landing_page/qdrant-landing/themes/qdrant-2024/assets/css/partials/_table-of-contents.scss

@use '../helpers/functions' as *;
@use 'sass:math';

.table-of-contents {
  scrollbar-width: none;

  &__head {
    display: none;
    margin-bottom: 0;
    padding: 0 math.div($spacer, 2) $spacer;
    color: $neutral-20;
  }

  &__title {
    display: none;
    color: $neutral-30;
    margin-bottom: math.div($spacer, 4);
    padding: math.div($spacer, 4) math.div($spacer, 2);
    font-size: pxToRem(14);
    line-height: pxToRem(21);
  }

  nav {
    display: none;
    padding-bottom: $spacer;

    ul {
      padding-left: 0;
      margin-bottom: 0;
    }

    li {
      list-style: none;
      padding: 0;

      a {
        display: block;
        padding: math.div($spacer, 4) math.div($spacer, 2);
        color: $neutral-30;
        font-weight: 400;
        font-size: pxToRem(14);
        line-height: pxToRem(21);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: all 0.3s;

        &:hover {
          color: $primary-50;
        }

        &.active {
          font-weight: 600;
          background-color: $neutral-90;
          color: $neutral-30;
          border-radius: $spacer * 0.5;
        }
      }

      & > ul > li {
        padding-left: $spacer;
      }
    }
  }

  &__external-links {
    border-top: 1px solid $neutral-90;
    border-bottom: 1px solid $neutral-90;
    list-style: none;
    padding: $spacer * 1.5 0;
    margin: 0;
  }

  &__link {
    margin-bottom: pxToRem(12);
    font-size: pxToRem(14);
    line-height: pxToRem(21);

    &:last-of-type {
      margin-bottom: 0;
    }

    a {
      display: flex;
      align-items: center;
      gap: calc($spacer / 2);
      padding: 0 math.div($spacer, 2);
      color: $neutral-30;
      font-weight: 500;

      &:hover {
        color: $primary-50;
        text-decoration: none;
        svg path {
          fill: $primary-50;
        }
      }
    }

    svg {
      display: block;
      width: pxToRem(16);
      height: pxToRem(16);
      path {
        fill: $neutral-30;
      }
    }
  }

  &__button {
    width: 100%;
    font-size: $font-size-s;
    line-height: $line-height-sm;
    color: $neutral-100;
  }

  @include media-breakpoint-up(xl) {
    max-height: calc(100vh - 80px);
    width: pxToRem(232);
    position: sticky;
    overflow-x: hidden;
    overflow-y: auto;
    top: $spacer * 5;
    margin-bottom: pxToRem(220);
    flex-shrink: 0;

    &__external-links {
      border-bottom: none;
    }

    nav,
    &__head,
    &__title {
      display: block;
    }
  }

  [data-theme='dark'] & {
    &__title,
    &__head {
      color: $neutral-98;
    }

    a:not(.table-of-contents__button) {
      color: $neutral-70;
      transition: all 0.3s;
      &:hover {
        color: $neutral-98;
      }
      &.active {
        font-weight: 600;
        background-color: $neutral-30;
        color: $neutral-90;
        border-radius: $spacer * 0.5;
      }
    }

    &__external-links {
      border-top: 1px solid $neutral-20;
      border-bottom: 1px solid $neutral-20;
    }

    &__link {
      a {
        color: $neutral-98;
        transition:
          color 0.3s,
          fill 0.25s;
        svg path {
          fill: $neutral-98;
        }
        &:hover {
          text-decoration: underline;
          color: $neutral-98;
          svg path {
            fill: $neutral-98;
          }
        }
      }
    }
  }

  // scoped styles
  .documentation & {
    &__external-links {
      display: none;
    }
    @include media-breakpoint-up(xl) {
      padding: $spacer * 1.5 $spacer $spacer * 1.5 pxToRem(40);
      &__external-links {
        display: block;
      }
    }
  }

  .qdrant-blog-post & {
    &__external-links {
      display: flex;
      justify-content: space-between;
      column-gap: pxToRem(12);
      padding-bottom: $spacer * 1.5;
    }
    @include media-breakpoint-down(xl) {
      &__external-links {
        padding-top: 0;
        border-top: 0;
      }
      &__link {
        margin: 0;
      }
    }
    @include media-breakpoint-up(xl) {
      width: $spacer * 15;
      padding-top: $spacer;

      &__external-links {
        flex-direction: column;
      }
    }
  }
}