.tree-list {
  --division-badge-site-size: 3rem;
  --division-badge-dept-size: 2.5rem;
  --border-width: 1px;
  --branch-style: var(--border-width) solid var(--mid-gray);
  --tree-border-radius: var(--border-radius);
  --tree-color: var(--theme-color-darker);
  --tree-transition: 0.4s ease-in-out;

  &:not(:last-child) {
    border-bottom: 1px solid var(--light-gray);
  }

  .tree-list__item {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 1rem 0.5rem;
    transition: var(--tree-transition);

    &:hover {
      background-color: var(--lightest-gray);
    }

    header.tree-list__header {
      align-items: center;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 1rem;
      padding: 0;
      margin-bottom: 0.125rem;

      .heading {
        flex: 1;
      }

      .tree-list__toggle-btn {
        min-width: unset;

        .icon {
          transition: transform var(--tree-transition);
        }
      }
    }

    .tree-list__content {
      margin: 0.125rem 0 0.125rem calc(var(--division-badge-site-size) / 2 - 1px);
      padding: 0 0 0 calc(var(--division-badge-site-size) / 2 - 1px + 1rem);

      & > * {
        max-height: 0;
        opacity: 0;
        visibility: hidden;
      }
    }

    &:has(.tree-list--nested) {
      .tree-list--nested {
        max-height: calc(2rem * 3); /* DeptMem list item has a height of 2rem, show 3 */
        overflow-x: clip;
        overflow-y: scroll;
        scroll-snap-type: y mandatory;

        .tree-list__item {
          overflow: clip;
          scroll-snap-align: start;
        }
      }

      & > .tree-list__content {
        border-left: var(--branch-style);
        min-height: 0.5rem;
        max-height: 0.5rem;
      }
    }

    &:has(.tree-list--nested .tree-list__item:hover):hover {
      background-color: var(--pure-white);
    }
  }

  /* Nested Tree List Items */

  &.tree-list--nested {
    --nested-tree-list-item-padding: 0.25rem;
    --tree-border-radius: calc(var(--border-radius) / 2);
    transition: margin-left 0.5s ease-in-out;
    margin-left: calc((var(--division-badge-site-size) / 2) - (24px / 2) - 1px - var(--nested-tree-list-item-padding));

    .tree-list__item {
      border-radius: 0.25rem;
      padding: 0.25rem;

      header.tree-list__header {
        margin-bottom: 0;

        .division-badge.division-badge--department {
          --badge-size: 24px;
        }
      }

      .tree-list__content {
        margin: 0;
      }

      &:not(:last-child) .tree-list__content {
        border-left: var(--branch-style);
      }
    }
  }

  &.tree-list--maximized {
    .tree-list__item {
      gap: 0;

      .tree-list__header {
        margin-bottom: 0.125rem;

        .btn.tree-list__toggle-btn {
          transform: rotate(-180deg);
        }
      }

      & > .tree-list__content {
        min-height: fit-content;
        max-height: fit-content;
      }
      .tree-list__content > * {
        max-height: unset;
        opacity: 1;
        visibility: visible;
      }
    }

    &:has(.tree-list--nested) {
      .tree-list--nested {
        margin-left: calc((var(--division-badge-site-size) / 2) - (var(--division-badge-dept-size) / 2) - 1px - 0.25rem);
        max-height: calc(6.5rem * 3); /* Maximized DeptMem list item has a height of 6.5rem, show 3 */

        .tree-list__item {
          overflow: unset;

          .tree-list__header .division-badge.division-badge--department {
            --badge-size: var(--division-badge-dept-size);
          }

          .tree-list__content {
            margin: 0.125rem 0 0.125rem calc(var(--division-badge-dept-size) / 2);
            padding-left: calc((var(--division-badge-dept-size) / 2) + 1rem - 1px);
          }

          &:not(:last-child) .tree-list__content {
            border-left: var(--branch-style);
          }
        }
      }
    }
  }
}