@use 'sass:map';

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

// $types: primary info success warning error;

$linker: () !default;
$linker: map.merge(
  (
    color: inherit,
    color-hover: value('color-primary-light-1'),
    color-active: value('color-primary-dark-1'),
    color-disabled: value('content-color-disabled'),
    series-span: 8px,
    underline-height: 1px
  ),
  $linker
);

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

  @mixin define-linker-style($style-map) {
    @include define-preset-style('linker', $style-map);
  }

  @include basis {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: value('linker-color');
    text-decoration: none;
    vertical-align: inherit;
    cursor: pointer;
    outline: 0;
    transition: value('transition-color');
  }

  & + & {
    margin-inline-start: value('linker-series-span');
  }

  &:hover,
  &:focus {
    color: value('linker-color-hover');
    text-decoration: none;
  }

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

  &--underline {
    &::after {
      position: absolute;
      inset-inline-start: 0;
      right: 0;
      bottom: 0;
      height: value('linker-underline-height');
      content: '';
      background-color: value('linker-color-hover');
      opacity: 0%;
      transition: value('transition-background'), value('transition-opacity');
    }

    &:hover::after {
      opacity: 100%;
    }

    &:active::after {
      background-color: value('linker-color-active');
    }
  }

  &--disabled {
    cursor: not-allowed;

    &,
    &:hover,
    &:focus,
    &:active {
      color: value('linker-color-disabled');
    }

    &:hover::after {
      opacity: 0%;
    }
  }

  &__icon {
    margin-inline-end: 3px;
  }

  @each $type in $types {
    &--#{$type} {
      @include define-linker-style(
        (
          color: 'color' $type 'base',
          color-hover: 'color' $type 'light-2',
          color-active: 'color' $type 'dark-1',
          color-disabled: 'color' $type 'opacity-5'
        )
      );
    }
  }
}