@import '../_variables';
@import '../vars';
@import '../_mixins';

.zp-toc-list {
  list-style: none;
  padding-left: 0.7em;
  margin: 0;
  // a 标签 class
  .zp-toc-link {
    color: var(--c-text-quote);
    display: block;
    position: relative;
    left: -0.2em;
    transition: all var(--t-color);

    @include textEllipsis(1);
    &:hover {
      color: var(--c-text-accent);
    }
  }
  .zp-link-active-class {
    color: var(--c-text-accent);
  }
}

.zp-toc {
  position: sticky;
  top: calc(var(--navbar-height) + 1rem);
  z-index: 99;
  max-width: var(--content-width);
  margin: 0 auto;

  .zp-toc-container {
    position: absolute;
    left: calc(100% + 1rem);
    width: max-content;
  }

  .toc-title {
    margin: 1rem;
    font-family: var(--font-family);
    font-weight: bold;
    color: var(--c-text);
  }

  .table-of-contents {
    min-width: 10rem;
    max-width: 15rem;
    border-left: 0.19em solid var(--c-border);
    margin: 0 1rem;
    padding-left: 0.2em;
    position: relative;

    .zp-toc-marker {
      position: absolute;
      left: -0.18em;
      height: 1.7em;
      width: 0.19em;
      background-color: var(--c-text-accent);
      transition: top var(--t-color);
    }
  }
  .badge {
    vertical-align: middle;
  }
}

@media (max-width: $MQToc) {
  .zp-toc {
    display: none;
  }
  .page-has-toc {
    padding-right: 0rem;
  }
}