@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$anchor: () !default;
$anchor: map.merge(
  (
    link-color: value('content-color-base'),
    link-color-hover: value('color-primary-light-1'),
    link-color-active: value('color-primary-base'),
    track-width: 2px,
    track-style: solid,
    track-color: value('border-color-light-2'),
    track: value('anchor-track-width') value('anchor-track-style') value('anchor-track-color'),
    track-color-active: value('anchor-link-color-active'),
    pointer-size: 8px,
    pointer-bg-color: value('color-white'),
    pointer-b-color: value('anchor-link-color-active'),
    pointer-border: value('border-shape') value('anchor-pointer-b-color')
  ),
  $anchor
);

.#{$namespace}-anchor {
  &-vars {
    @include define-preset-values('anchor', $anchor);
  }

  @include basis {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-inline-start: calc(value('anchor-pointer-size') * 0.5);
    vertical-align: middle;
  }

  &__list {
    padding: 0;
  }

  &__item {
    display: flex;
    flex-direction: column;
  }

  &__link {
    padding: 4px 14px;
    margin-inline-start: calc(value('anchor-track-width') * -1);
    color: value('anchor-link-color');
    text-decoration: none;
    cursor: pointer;
    border-inline-start: value('anchor-track');
    transition: value('transition-color'), value('transition-border');

    &:hover {
      color: value('anchor-link-color-hover');
    }

    &--active {
      color: value('anchor-link-color-active');
    }
  }

  &--no-marker &__link--active {
    border-inline-start-color: value('track-color-active');
  }

  &__marker {
    position: absolute;
    inset-inline-start: calc(value('anchor-pointer-size') * 0.5 - 1px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: top value('transition-base');
    transform: translate3d(-50%, -50%, 0);
    will-change: top;

    @include rtl {
      transform: translate3d(50%, -50%, 0);
    }
  }

  &__pointer {
    width: value('anchor-pointer-size');
    height: value('anchor-pointer-size');
    background-color: value('anchor-pointer-bg-color');
    border: value('anchor-pointer-border');
    border-radius: value('anchor-pointer-size');
  }
}