@define-mixin docs-toc-ui-light {
  .docs-toc__content::before {
    background-color: var(--ld-col-neutral-050);
  }
}
@define-mixin docs-toc-ui-dark {
  .docs-toc__content::before {
    background-color: var(--ld-col-neutral-400);
  }
}

@mixin docs-toc-ui-light;

@media (prefers-color-scheme: dark) {
  @mixin docs-toc-ui-dark;
}
.docs-ui-dark {
  @mixin docs-toc-ui-dark;
}
.docs-ui-light {
  @mixin docs-toc-ui-light;
}

.docs-toc {
  --docs-toc-heading-height: 2rem;
}

.docs-toc__content {
  overflow: hidden;
  padding: var(--ld-sp-8) var(--ld-sp-24) var(--ld-sp-24) 0;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(1.25rem + var(--docs-toc-heading-height));
    bottom: 1.25rem;
    width: 0.1875rem;
    display: block;
    transform: translateY(-0.4rem);
    border-radius: var(--ld-br-full);
  }
}

.docs-toc__nav {
  max-height: calc(100vh - var(--docs-toc-top) - 4rem);
  overflow: visible scroll;
  position: relative;
  padding-right: 3rem;
  margin-right: -3rem;

  ol {
    list-style: none;
    padding-left: var(--ld-sp-24);
  }

  li {
    margin-top: var(--ld-sp-12);
  }

  a {
    font: var(--ld-typo-label-s);
    text-decoration: none;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      height: 2.2rem;
      width: 0.1875rem;
      display: block;
      transform: translateY(-0.4rem);
      border-radius: var(--ld-br-full);
    }

    &.docs-toc__link--is-active,
    &.docs-toc__link--is-target {
      color: var(--ld-thm-secondary);
    }

    &.docs-toc__link--is-active {
      &::before {
        background-color: var(--ld-thm-secondary);
        z-index: 1;
      }
    }

    &[href='#methods'] + ol a {
      word-break: break-all;
    }
  }
}

[href='#overview'],
[href='#graph'],
[href='#shadow-parts'] {
  display: none;

  & + ol {
    display: none;
  }
}

.docs-toc__heading {
  display: block;
  font: var(--ld-typo-cap-m);
  font-weight: 400;
  height: var(--docs-toc-heading-height);
  text-transform: uppercase;
}
