#drawer {
  position: fixed;
  top: 0;
  left: 80px;
  width: 320px;
  bottom: 0;
  padding: 16px 0;
  background-color: #28292A;
  color: var(--white, #FFF);
  overflow: auto;

  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background-color: #28292A;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #BDC1C6;
    outline: 1px solid #BDC1C6;
    border-radius: 8px;
  }

  & h1 {
    margin: 0;
    font: 1.4rem/1 var(--font-base);
  }

  &:hover {
    --clr-spacer: #444;
  }
}

#drawer-structure {
  font-size: 1.4rem;
  line-height: 1.5;
  margin: 0 8px;
}

.node-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}

.node {
  & a {
    color: var(--white, #fff);
    text-decoration: none;
  }

  &.current>.node-row:nth-child(1) {
    background-color: #37383A;
  }
}

.node-row {
  --level: 0;
  --toggle-width: 1.6rem;

  display: grid;
  grid-template-columns: calc(var(--level) * (var(--toggle-width) / 2)) var(--toggle-width) 1fr;
  grid-template-areas: "spacer toggle content";

  min-height: 3.2rem;
  padding: 0 10px 0 0;
  cursor: pointer;

  &:hover {
    background-color: #37383A;
    border-radius: 4px;
  }


  .child {
    color: var(--clr-grey-400);
    font: 1.8rem/1 var(--font-icons);
    font-variation-settings: 'opsz' 24, 'wght' 300, 'FILL' 1, 'GRAD' 0;
    grid-area: toggle;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .parent {

    &:hover {

      background-color: var(--clr-grey-600);
      border-radius: 4px 0 0 4px;
    }

    & span:nth-child(1) {
      display: inherit;
    }

    & span:nth-child(2) {
      display: none;
    }
  }

  &.closed {
    .parent {

      & span:nth-child(1) {
        display: none;
      }

      & span:nth-child(2) {
        display: inherit;
      }
    }
  }

}

.node-title {
  display: flex;
  align-items: center;
  gap: 4px;
  grid-area: content;
  letter-spacing: 0.00625em;
  text-overflow: ellipsis;
  
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;

  &::before {
    color: var(--data-icon-color, #717274);
    font-family: var(--font-icons);
    font-variation-settings: 'opsz' 24, 'wght' 300, 'FILL' 1, 'GRAD' 0;
    font-size: 2.0rem;
    content: attr(data-icon);
  }
}

.node-link {
  text-decoration: none;
  color: var(--black);
  display: flex;
  align-items: center;
  gap: 8px;
  
  &:not(:has(img))::before {
    color: var(--data-icon-color, #717274);
    font-family: var(--font-icons);
    font-variation-settings: 'opsz' 24, 'wght' 300, 'FILL' 1, 'GRAD' 0;
    font-size: 2.4rem;
    line-height: 1.5;
    content: attr(data-icon);
  }

  &:has(img) {
    & img {
      width: 24px;
      height: 36px;
      object-fit: contain;
    }
  }  
  
}

[data-icon=inventory_2] {
  --data-icon-color: #886F65;
}
[data-icon=folder] {
  --data-icon-color: #EC5F59;
}
[data-icon=book_2] {
  --data-icon-color: #F8CA4F;
}
[data-icon=description] {
  --data-icon-color: #94A3AD;
}






.spacer {
  grid-area: spacer;
  display: flex;
  justify-content: stretch;

  & div {
    width: 100%;
    height: 100%;
    border-right: 1px solid var(--clr-spacer, transparent);
  }

}

.closed~.node {
  display: none;
}

.node-ctrls {
  display: flex;
  gap: 8px;

  & button {
    font: 1.6rem/1 var(--font-icons);
    font-variation-settings: 'opsz' 24, 'wght' 300, 'FILL' 1, 'GRAD' 0;
  }
}

#tree {
  margin-left: 320px;
}

.tree-title {
  font-size: 1.6rem;
  font-weight: 600;
  display: flex;
  justify-content: start;
  gap: 0.2em;

  & a {
    color: var(--action);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

.tree-children {

  font-size: 1.6rem;
}