@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tag';
@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';

$sizes: 'xs', 's';
$label-typography: (
  'xs': styles-tokens-tag.$sans-label-s,
  's': styles-tokens-tag.$sans-label-m,
);
$appearances: (
  'neutral': (
    'container': styles-tokens-tag.$sys-neutral-decor-default,
    'container-disabled': styles-tokens-tag.$sys-neutral-decor-disabled,
    'label': styles-tokens-tag.$sys-neutral-text-support,
    'icon': styles-tokens-tag.$sys-neutral-text-light,
    'icon-active': styles-tokens-tag.$sys-neutral-text-main,
    'button-hovered': styles-tokens-tag.$sys-neutral-decor-hovered,
    'button-active': styles-tokens-tag.$sys-neutral-decor-activated,
  ),
  'primary': (
    'container': styles-tokens-tag.$sys-primary-decor-default,
    'container-disabled': styles-tokens-tag.$sys-primary-decor-disabled,
    'label': styles-tokens-tag.$sys-primary-text-support,
    'icon': styles-tokens-tag.$sys-primary-text-light,
    'icon-active': styles-tokens-tag.$sys-primary-text-main,
    'button-hovered': styles-tokens-tag.$sys-primary-decor-hovered,
    'button-active': styles-tokens-tag.$sys-primary-decor-activated,
  ),
  'red': (
    'container': styles-tokens-tag.$sys-red-decor-default,
    'container-disabled': styles-tokens-tag.$sys-red-decor-disabled,
    'label': styles-tokens-tag.$sys-red-text-support,
    'icon': styles-tokens-tag.$sys-red-text-light,
    'icon-active': styles-tokens-tag.$sys-red-text-main,
    'button-hovered': styles-tokens-tag.$sys-red-decor-hovered,
    'button-active': styles-tokens-tag.$sys-red-decor-activated,
  ),
  'orange': (
    'container': styles-tokens-tag.$sys-orange-decor-default,
    'container-disabled': styles-tokens-tag.$sys-orange-decor-disabled,
    'label': styles-tokens-tag.$sys-orange-text-support,
    'icon': styles-tokens-tag.$sys-orange-text-light,
    'icon-active': styles-tokens-tag.$sys-orange-text-main,
    'button-hovered': styles-tokens-tag.$sys-orange-decor-hovered,
    'button-active': styles-tokens-tag.$sys-orange-decor-activated,
  ),
  'yellow': (
    'container': styles-tokens-tag.$sys-yellow-decor-default,
    'container-disabled': styles-tokens-tag.$sys-yellow-decor-disabled,
    'label': styles-tokens-tag.$sys-yellow-text-support,
    'icon': styles-tokens-tag.$sys-yellow-text-light,
    'icon-active': styles-tokens-tag.$sys-yellow-text-main,
    'button-hovered': styles-tokens-tag.$sys-yellow-decor-hovered,
    'button-active': styles-tokens-tag.$sys-yellow-decor-activated,
  ),
  'green': (
    'container': styles-tokens-tag.$sys-green-decor-default,
    'container-disabled': styles-tokens-tag.$sys-green-decor-disabled,
    'label': styles-tokens-tag.$sys-green-text-support,
    'icon': styles-tokens-tag.$sys-green-text-light,
    'icon-active': styles-tokens-tag.$sys-green-text-main,
    'button-hovered': styles-tokens-tag.$sys-green-decor-hovered,
    'button-active': styles-tokens-tag.$sys-green-decor-activated,
  ),
  'blue': (
    'container': styles-tokens-tag.$sys-blue-decor-default,
    'container-disabled': styles-tokens-tag.$sys-blue-decor-disabled,
    'label': styles-tokens-tag.$sys-blue-text-support,
    'icon': styles-tokens-tag.$sys-blue-text-light,
    'icon-active': styles-tokens-tag.$sys-blue-text-main,
    'button-hovered': styles-tokens-tag.$sys-blue-decor-hovered,
    'button-active': styles-tokens-tag.$sys-blue-decor-activated,
  ),
  'violet': (
    'container': styles-tokens-tag.$sys-violet-decor-default,
    'container-disabled': styles-tokens-tag.$sys-violet-decor-disabled,
    'label': styles-tokens-tag.$sys-violet-text-support,
    'icon': styles-tokens-tag.$sys-violet-text-light,
    'icon-active': styles-tokens-tag.$sys-violet-text-main,
    'button-hovered': styles-tokens-tag.$sys-violet-decor-hovered,
    'button-active': styles-tokens-tag.$sys-violet-decor-activated,
  ),
  'pink': (
    'container': styles-tokens-tag.$sys-pink-decor-default,
    'container-disabled': styles-tokens-tag.$sys-pink-decor-disabled,
    'label': styles-tokens-tag.$sys-pink-text-support,
    'icon': styles-tokens-tag.$sys-pink-text-light,
    'icon-active': styles-tokens-tag.$sys-pink-text-main,
    'button-hovered': styles-tokens-tag.$sys-pink-decor-hovered,
    'button-active': styles-tokens-tag.$sys-pink-decor-activated,
  ),
);

.tag {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;

  .tagButton {
    cursor: pointer;

    position: relative;

    box-sizing: border-box;
    margin: 0;
    padding: 0;

    background: none;
    border: none;

    &:focus {
      @include styles-tokens-tag.outline-inside-var(styles-tokens-element.$container-focused-s);
    }

    &:active {
      outline: none;
    }
  }

  .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include styles-tokens-tag.composite-var(styles-tokens-tag.$tag, 'container', $size, 'label-only');

      &[data-removable='true'] {
        @include styles-tokens-tag.composite-var(styles-tokens-tag.$tag, 'container', $size, 'button-after');
      }

      .label {
        @include styles-tokens-tag.composite-var($label-typography, $size);
      }

      .tagButton {
        @include styles-tokens-tag.composite-var(styles-tokens-tag.$tag-button, 'container', $size, 'icon-only');
      }
    }
  }

  @each $appearanceKey, $appearance in $appearances {
    &[data-appearance='#{$appearanceKey}'] {
      background-color: styles-tokens-tag.simple-var($appearance, 'container');

      .label {
        overflow: hidden;
        color: styles-tokens-tag.simple-var($appearance, 'label');
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .tagButton {
        color: styles-tokens-tag.simple-var($appearance, 'icon');

        &:focus,
        &:hover,
        &:active {
          color: styles-tokens-tag.simple-var($appearance, 'icon-active');
        }

        &:focus,
        &:hover {
          background-color: styles-tokens-tag.simple-var($appearance, 'button-hovered');
        }

        &:active {
          background-color: styles-tokens-tag.simple-var($appearance, 'button-active');
        }
      }
    }
  }
}