@use '@style/theme/index.scss' as theme;
@use 'sass:string';
@use '@components/anchor/style/token.scss' as *;

$anchor-prefix-cls: string.unquote('#{theme.$prefix}-anchor');

.#{$anchor-prefix-cls} {
  position: relative;
  width: $anchor-width;
  overflow: auto;

  &-line {
    &-slider {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: $anchor-line-width;
      height: $anchor-line-slider-height;
      margin-top: (
        ($anchor-font-size-title * theme.$line-height-base) * 0.5 + $anchor-title-padding-vertical -
          $anchor-line-slider-height * 0.5
      );
      background-color: $anchor-color-bg-line_active;
      transition: top theme.$transition-duration-2 theme.$transition-timing-function-standard;
    }
  }

  &-list {
    position: relative;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: $anchor-line-margin-right - $anchor-title-padding-horizontal;
    padding-left: 0;
    list-style: none;

    &::before {
      position: absolute;
      left: -($anchor-line-margin-right - $anchor-title-padding-horizontal);
      width: $anchor-line-width;
      height: 100%;
      background-color: $anchor-color-bg-line;
      content: '';
    }
  }

  &-sublist {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
  }

  &-link-item {
    margin-bottom: $anchor-title-margin-bottom;

    .#{$anchor-prefix-cls}-link {
      display: block;
      margin-bottom: $anchor-title-margin-bottom;
      padding: $anchor-title-padding-vertical $anchor-title-padding-horizontal;
      overflow: hidden;
      color: $anchor-color-title;
      font-size: $anchor-font-size-title;
      line-height: theme.$line-height-base;
      white-space: nowrap;
      text-decoration: none;
      text-overflow: ellipsis;
      border-radius: $anchor-border-radius-title-hover;
      cursor: pointer;

      &:hover {
        color: $anchor-color-title_hover;
        font-weight: $anchor-font-weight-title_hover;
        background-color: $anchor-color-bg-title_hover;
      }
    }
  }

  &-link-active > &-link {
    color: $anchor-color-title_active;
    font-weight: $anchor-font-weight-title_active;
    transition:
      color theme.$transition-duration-1 theme.$transition-timing-function-standard,
      background-color theme.$transition-duration-1 theme.$transition-timing-function-standard;
  }

  &-link-item &-link-item {
    margin-left: $anchor-item-inner-margin-left;
  }

  // line-less
  &-line-less &-list {
    margin-left: 0;

    &::before {
      display: none;
    }
  }

  &-line-less &-link-active > &-link {
    color: $anchor-lineless-color-title_active;
    font-weight: $anchor-lineless-font-weight-title_active;
    background-color: $anchor-lineless-bg-title_active;
  }
}