@use 'sass:color';
@use 'sass:map';

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

// $types: primary info success error warning;

$tag: () !default;
$tag: map.merge(
  (
    color: value('content-color-base'),
    color-disabled: value('content-color-disabled'),
    bg-color: value('fill-color-background'),
    bg-color-disabled: value('fill-color-background'),
    b-color: value('border-color-base'),
    b-color-disabled: value('border-color-light-2'),
    v-padding: 0,
    h-padding: 8px,
    radius: value('radius-base'),
    series-span: 4px,
    small-font-size: value('font-size-secondary'),
    default-font-size: value('font-size-base'),
    large-font-size: value('font-size-primary'),
    close-color: value('content-color-secondary'),
    d-color: value('border-color-light-1')
  ),
  $tag
);

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

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

  @include basis {
    position: relative;
    display: inline-flex;
    font-size: value('tag-default-font-size');
    color: value('tag-color');
    white-space: nowrap;
    transition: value('transition-color');
  }

  $radius: value('tag-radius');

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

  &--small {
    font-size: value('tag-small-font-size');
  }

  &--large {
    font-size: value('tag-large-font-size');
  }

  &--circle {
    @include define-preset-values(
      'tag',
      (
        h-padding: 12px,
        radius: 14px
      )
    );
  }

  &--disabled {
    color: value('tag-color-disabled');
    cursor: not-allowed;
  }

  &__unit {
    display: flex;
    align-items: center;
    max-width: 100%;
    padding: value('tag-v-padding') value('tag-h-padding');
    background-color: value('tag-bg-color');
    border: value('border-shape') value('tag-b-color');
    border-inline-start-color: value('tag-d-color');
    border-inline-end-width: 0;
    transition: value('transition-background'), value('transition-border');

    &:first-child {
      border-inline-start-color: value('tag-b-color');

      @include logical-radius($radius null null $radius);
    }

    &:last-child {
      border-inline-end-width: value('border-width');

      @include logical-radius(null $radius $radius null);
    }
  }

  &--disabled &__unit {
    background-color: value('tag-bg-color-disabled');
    border-color: value('tag-b-color-disabled');
  }

  &__close {
    position: relative;
    inset-inline-start: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 12px;
    padding: 0;
    margin-inline-start: 4px;
    color: value('tag-close-color');
    cursor: pointer;
    background-color: transparent;
    border: 0;
    outline: 0;
    opacity: 60%;
    transition: value('transition-opacity');

    &:hover,
    &:focus {
      opacity: 100%;
    }
  }

  &--disabled &__close {
    &,
    &:hover,
    &:focus {
      opacity: 50%;
    }
  }

  $close: #{&}__close;

  @each $type in $types {
    &--#{$type} {
      @include define-tag-style(
        (
          color: 'color-white',
          bg-color: 'color' $type 'base',
          b-color: 'color' $type 'base',
          close-color: 'color-white',
          d-color: 'color' $type 'light-3'
        )
      );
    }

    &--border#{&}--#{$type},
    &--simple#{&}--#{$type} {
      @include define-tag-style(
        (
          color: 'color' $type 'base',
          close-color: 'color' $type 'base'
        )
      );
    }

    &--simple#{&}--#{$type} {
      @include define-tag-style(
        (
          bg-color: 'color' $type 'opacity-8'
        )
      );
    }
  }

  $preset-color-map: (
    'lime': rgb(18 228 83),
    'pink': rgb(240 101 149),
    'magenta': rgb(235 47 150),
    'tomato': rgb(250 99 99),
    'orange': rgb(255 146 43),
    'cyan': rgb(19 194 194),
    'navy': rgb(47 65 224),
    'gold': rgb(236 202 11),
    'purple': rgb(114 46 209)
  );

  @each $name in map.keys($preset-color-map) {
    $color: map.get($preset-color-map, $name);

    @at-root {
      &--#{$name} {
        @include define-tag-style(
          (
            color: 'color-white',
            close-color: 'color-white',
            d-color: 'color' $color 'light-2'
          )
        );

        @include define-css-var('tag-bg-color', $color);
        @include define-css-var('tag-b-color', $color);
        @include define-css-var('tag-d-color', color.mix($color-white, $color, 30%));
      }

      &--border#{&}--#{$name},
      &--simple#{&}--#{$name} {
        @include define-css-var('tag-color', $color);
        @include define-css-var('tag-close-color', $color);
      }

      &--simple#{&}--#{$name} {
        @include define-css-var('tag-bg-color', rgba($color, 20%));
      }
    }
  }

  &--border &__unit,
  &--border#{&}--disabled &__unit {
    background-color: transparent;
  }
}