@import (reference) '../../styles/variables.less';

.@{prefix}-toc {
  list-style: none;
  margin: 12px 0 0;
  padding: 4px 0;
  border-inline-start: 1px solid @c-border;

  @{dark-selector} & {
    border-inline-start-color: @c-border-dark;
  }

  &:empty {
    display: none;
  }

  > li {
    > a {
      display: block;
      margin: 6px 0;
      padding: 3px 12px;
      color: @c-text-secondary;
      font-size: 13px;
      line-height: 1;
      text-decoration: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      @{dark-selector} & {
        color: @c-text-secondary-dark;
      }

      &:hover {
        color: @c-text;

        @{dark-selector} & {
          color: @c-text-dark;
        }
      }

      &.active {
        margin-inline-start: -1px;
        color: @c-text;
        border-inline-start: 1px solid @c-primary;

        @{dark-selector} & {
          color: @c-text-dark;
          border-inline-start-color: @c-primary-dark;
        }
      }
    }

    &[data-depth='3'] > a {
      padding-inline-start: 20px;
    }
  }
}