@use "@sass-palette/hope-config";
@use "vuepress-shared/styles/wrapper";

$headings: (2, 3, 4, 5, 6);

.toc-place-holder {
  @include wrapper.horizontal-wrapper;

  position: sticky;
  top: calc(var(--navbar-height) + 2rem);
  z-index: 99;
  max-width: var(--content-width, 740px);

  + .theme-hope-content:not(.custom) {
    padding-top: 0;
  }
}

#toc {
  position: absolute;
  left: calc(100% + 1rem);

  display: none;

  min-width: 10rem;
  max-width: 15rem;

  @media (min-width: hope-config.$pc) {
    .has-toc & {
      display: block;
    }
  }

  @media print {
    display: none !important;
  }

  #{hope-config.$rtl-selector} & {
    right: calc(100% + 1rem);
    left: unset;
  }

  .toc-header {
    margin-bottom: 0.75rem;
    margin-inline-start: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
  }

  .toc-wrapper {
    position: relative;

    overflow-x: hidden;
    overflow-y: auto;

    max-height: 75vh;
    margin: 0 0.5rem;
    padding-inline-start: 8px;

    text-overflow: ellipsis;
    white-space: nowrap;

    scroll-behavior: smooth;

    &::-webkit-scrollbar-track-piece {
      background: transparent;
    }

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

    &::-webkit-scrollbar-thumb:vertical {
      background: #ddd;

      #{hope-config.$dark-selector} & {
        background: #333;
      }
    }

    &::before {
      content: " ";

      position: absolute;
      top: 0;
      bottom: 0;

      // NOTE: Compatible with Android Wechat
      // inset-inline-start: 0;
      left: 0;
      z-index: -1;

      width: 2px;

      background: var(--border-color);

      #{hope-config.$rtl-selector} & {
        right: 0;
        left: unset;
      }
    }
  }

  .toc-list {
    position: relative;

    // override ul default margin
    margin: 0;

    // override ul default padding
    padding: 0;
  }

  .toc-marker {
    content: " ";

    position: absolute;
    top: 0;

    // NOTE: Compatible with Android Wechat
    // inset-inline-start: -8px;
    left: 0;
    z-index: 2;

    width: 2px;
    height: 1.7rem;

    background: var(--theme-color);

    transition: top var(--vp-tt);

    #{hope-config.$rtl-selector} & {
      right: 0;
      left: unset;
    }
  }

  .toc-link {
    position: relative;

    display: block;

    overflow: hidden;

    max-width: 100%;

    color: var(--light-grey);

    line-height: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;

    @each $heading in $headings {
      &.level#{$heading} {
        padding-inline-start: ($heading * 8 - 16) * 1px;
        font-size: (16 - $heading) * 1px;
      }
    }
  }

  .toc-item {
    position: relative;

    box-sizing: border-box;

    height: 1.7rem;
    padding: 0 0.5rem;

    list-style: none;

    line-height: 1.7rem;

    &:hover {
      > .toc-link {
        color: var(--theme-color);
      }
    }

    &.active {
      > .toc-link {
        color: var(--theme-color);
        font-weight: bold;
      }
    }
  }
}