@use 'sass:map';

@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

@include b(anchor-wrapper) {
  @include set-component-css-var('anchor', $anchor);
  @include set-component-css-var('anchor-ink', $anchor-ink);
  @include set-component-css-var('anchor-link', $anchor-link);

  padding-left: 4px;
  background-color: #fff;

  @include b(anchor) {
    position: relative;
    color: var(--sg-text-color-primary);
    font-size: var(--sg-font-size-base);
    list-style: none;
    padding: 0 0 0 2px;
    margin: 0;

    &::before {
      content: '';
      position: absolute;
      background-color: var(--sg-anchor-ink-background);
    }
  }

  @include b(anchor-ink) {
    position: absolute;
    background-color: var(--sg-anchor-ink-color);
    display: none;

    @include when(ink-visible) {
      display: block;
    }
  }

  @include b(anchor-link) {
    padding: var(--sg-anchor-link-padding);

    @include e(title) {
      position: relative;
      display: block;
      color: var(--sg-text-color-primary);
      text-decoration: none;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      transition: all .3s;

      &:hover {
        color: var(--sg-color-primary);
      }
    }

    @include when(active) {
      @include e(title) {
        color: var(--sg-color-primary);
      }
    }
  }

  &:not(.is-horizontal) {
    .sg-anchor {
      &::before {
        top: 0;
        left: 0;
        width: 2px;
        height: 100%;
      }

      &-ink {
        left: 0;
        width: var(--sg-anchor-ink-width);
        transition: top 0.3s ease-in-out;
      }
    }
  }

  @include when('horizontal') {
    position: relative;

    .sg-anchor {
      display: flex;
      overflow-x: scroll;

      &::before {
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
      }

      &-ink {
        bottom: 0;
        height: var(--sg-anchor-ink-width);
        transition: left 0.3s ease-in-out;
      }

      &-link {
        &:first-of-type {
          padding-left: 0;
        }
      }
    }
  }
}