//
// Right side toc
//
.td-sidebar-toc {
  @include link-decoration;

  border-left: 1px solid var(--bs-border-color);

  @supports (position: sticky) {
    position: sticky;
    top: 4rem;
    height: calc(100vh - 4rem);
    overflow-y: auto;
  }

  order: 2;
  padding-top: 0.75rem;
  padding-bottom: 1.5rem;
  vertical-align: top;

  .td-page-meta a {
    display: block;
    font-weight: $font-weight-medium;
  }
}

.td-toc {
  $toc-padding-base: 1rem;
  $toc-padding-increment: 0.5rem; // for TOC entry nesting

  margin-top: 1rem;

  nav a {
    display: block;
    font-weight: $font-weight-light;
    padding-bottom: 0.25rem;
  }

  li {
    list-style: none;
    display: block;
  }

  &-title {
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--bs-tertiary-color);
    padding-bottom: 0.25rem;
    margin-bottom: 0.75rem;

    &__text {
      font-weight: $font-weight-bold;
    }

    @at-root .td-toc:hover &__link,
      .td-toc:focus &__link {
      visibility: visible !important;
    }

    &__link {
      font-weight: $font-weight-bold;
      padding-left: 0.25em;
      text-decoration: none;
      // Projects who wish to hide the link can set:
      visibility: hidden;

      &::after {
        content: fa-content($fa-var-chevron-up);
        font-family: $td-font-awesome-font-name;
      }

      // Always visible on touch devices and small screens
      @media (hover: none) and (pointer: coarse),
        (max-width: map-get($grid-breakpoints, sm)) {
        opacity: 1;
        visibility: visible;
      }
    }
  }

  #TableOfContents {
    margin-left: -0.75rem;

    a {
      margin-left: 0;
      padding-left: $toc-padding-base;
      text-decoration: none;
      border-left: 0.125rem solid transparent;
      color: var(--bs-secondary-color);

      &.active {
        color: var(--bs-primary-text-emphasis);
        border-left-color: var(--bs-primary);
        background-color: var(--bs-tertiary-bg);
      }

      &:focus,
      &:hover {
        // Possible alternative color:
        // color: var(--bs-nav-link-disabled-color);
        background-color: var(--bs-secondary-bg-subtle);
      }
    }

    ul ul a {
      padding-left: $toc-padding-base + $toc-padding-increment;
    }

    ul ul ul a {
      padding-left: $toc-padding-base + ($toc-padding-increment * 2);
    }

    ul ul ul ul a {
      padding-left: $toc-padding-base + ($toc-padding-increment * 3);
    }

    ul ul ul ul ul a {
      padding-left: $toc-padding-base + ($toc-padding-increment * 4);
    }
  }

  ul {
    padding-left: 0;
  }
}
