@import './token.less';

@anchor-prefix-cls: ~'@{prefix}-anchor';

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

  &-line {
    &-slider {
      position: absolute;
      height: @anchor-line-slider-height;
      width: @anchor-line-width;
      margin-top: 4px + @anchor-title-padding-vertical;
      background-color: @anchor-color-bg-line_active;
      left: 0;
      top: 0;
      transition: top @transition-duration-2 @transition-timing-function-standard;
      z-index: 1;
    }
  }

  &-list {
    margin-left: @anchor-line-margin-right - @anchor-title-padding-horizontal;
    position: relative;

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

  &-link {
    margin-bottom: @anchor-title-margin-bottom;

    &-title {
      color: @anchor-color-title;
      line-height: @line-height-base;
      font-size: @anchor-font-size-title;
      margin-bottom: @anchor-title-margin-bottom;
      padding: @anchor-title-padding-vertical @anchor-title-padding-horizontal;
      text-decoration: none;
      cursor: pointer;
      text-overflow: ellipsis;
      overflow: hidden;
      display: block;
      white-space: nowrap;
      border-radius: @anchor-border-radius-title-hover;
    }

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

    &-active > &-title {
      transition: all @transition-duration-1 @transition-timing-function-linear;
      color: @anchor-color-title_active;
      font-weight: @anchor-font-weight-title_active;
    }
  }

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

  // Lineless
  &-lineless &-list {
    margin-left: 0;

    &::before {
      display: none;
    }
  }

  &-lineless &-link-active > &-link-title {
    background-color: @anchor-lineless-bg-title_active;
    color: @anchor-lineless-color-title_active;
    font-weight: @anchor-lineless-font-weight-title_active;
  }
}