@use 'sass:map';

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

@use '../fonts' as *;

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

@include b(link) {
  // display: inline-flex;
  gap: 4px;
  flex-direction: row;
  align-items: center;
  // justify-content: center;
  vertical-align: middle;
  position: relative;
  text-decoration: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  // font-size: getCssVar('link', 'font-size');
  font-weight: getCssVar('link', 'font-weight');
  color: getCssVar('link', 'text-color');
  // line-height: getCssVar('line-height', 'base');
  // border-bottom: 1px solid transparent;

  &:hover {
    color: getCssVar('link', 'hover-text-color');
  }

  &:active {
    color: getCssVar('link', 'active-text-color');
  }

  @include when(hover-underline) {
    &:hover:after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 0;
      bottom: 0;
      border-bottom-width: 1px;
      border-color: getCssVar('color', 'primary', 'light-4');
      border-style: solid;
    }
  }

  @include when(underline) {
    &:after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 2px;
      border-bottom-width: 1px;
      border-color: getCssVar('color', 'primary', 'light-4');
      border-style: solid;
    }
  }

  @include when(disabled) {
    color: getCssVar('link', 'disabled-text-color');
    cursor: not-allowed;
  }

  & [class*='#{$namespace}-icon-'] {
    & + span {
      margin-left: 5px;
    }
  }

  &.#{$namespace}-link--default {
    &:hover::after {
      border-color: getCssVar('color', 'primary', 'light-4');
    }
  }

  @include e(inner) {
    // display: inline-flex;
    // justify-content: center;
    // align-items: center;

    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
  }

  @each $type in $types {
    &.#{$namespace}-link--#{$type} {
      @include css-var-from-global(('link', 'text-color'), ('color', $type));
      @include css-var-from-global(('link', 'hover-text-color'), ('color', $type, 'light-4'));
      @include css-var-from-global(('link', 'active-text-color'), ('color', $type, 'light-6'));
      @include css-var-from-global(('link', 'disabled-text-color'), ('color', $type, 'light-2'));

      &::after {
        // border-color: getCssVar('link', 'text-color');
      }

      @include when(hover-underline) {
        &:hover:after {
          border-color: getCssVar('color', $type, 'light-4');
        }
      }

      @include when(underline) {
        &:hover:after {
          border-color: getCssVar('color', $type, 'light-4');
        }
      }
    }
  }

  @each $size in $sizes {
    // @include css-var-from-global(('line-height', $size), ('line-height', $size));

    &[size='#{$size}'] {
      font-size: map.get($font-size, $size);
      line-height: map.get($line-height, $size);
      @extend %p-#{$size};
    }

    &[size='default'] {
      @extend %p-medium;
    }
  }
}