/*
* Tag component
*
*/

@use '../../../style/core/utilities.scss' as utilities;
@use '../../button/style/themes/button-mixins.scss' as button-mixins;
@use './tag-mixins.scss' as tag-mixins;

.dnb-tag {
  --tag-icon-border-color: var(--token-color-stroke-action);

  &.dnb-button {
    appearance: none;
    background-color: var(--token-color-background-neutral-base);

    padding-left: 0.5rem;
    padding-right: 0.5rem;

    .dnb-button__text {
      font-size: var(--font-size-x-small);
      transform: none;
    }
  }

  &:not(#{&}--interactive) {
    user-select: unset;
    cursor: unset;

    .dnb-button__text {
      cursor: text;
    }
  }

  &--interactive {
    &.dnb-button {
      color: var(--token-color-text-action);
      background-color: var(--token-color-decorative-third-muted);

      @include utilities.fakeBorder(
        var(--token-color-stroke-action),
        0.0625rem,
        inset
      );

      @include utilities.focusVisible() {
        --tag-icon-border-color: var(--token-color-stroke-action-focus);

        outline: none;
        color: var(--token-color-text-action-focus);
        background-color: var(
          --token-color-background-action-focus-subtle
        );

        @include utilities.fakeBorder(
          var(--token-color-stroke-action-focus),
          0.125rem,
          inset
        );
      }

      @include button-mixins.buttonHover(
        $color: var(--token-color-text-action-hover),
        $border-color: var(--token-color-stroke-action-hover)
      );

      @include button-mixins.buttonActive(
        $color: var(--token-color-text-action-pressed),
        $background-color: var(
            --token-color-background-action-pressed-subtle
          )
      );

      &[disabled] {
        color: var(--token-color-component-button-text-action-disabled);
        background-color: var(--token-color-background-action-disabled);

        @include utilities.fakeBorder(
          var(--token-color-stroke-action-disabled)
        );
      }
    }
  }

  &--removable,
  &--addable {
    &.dnb-button {
      padding-right: 0.25rem;

      @include tag-mixins.tagIcon(
        var(--tag-icon-fill-color),
        var(--tag-icon-stroke-color),
        var(--tag-icon-border-color)
      );
    }
  }

  &--addable {
    --tag-icon-fill-color: var(--token-color-background-action);
    --tag-icon-stroke-color: var(--token-color-icon-neutral-inverse);
    svg {
      transform: rotate(45deg);
    }

    &.dnb-button {
      @include utilities.hover() {
        --tag-icon-fill: var(--token-color-background-neutral);
        --tag-icon-stroke: var(--token-color-icon-action-hover);
      }

      @include utilities.focusVisible() {
        --tag-icon-fill: var(--token-color-background-neutral);
        --tag-icon-stroke: var(--token-color-icon-action-focus);
      }

      @include utilities.active() {
        --tag-icon-fill: var(--token-color-background-neutral);
        --tag-icon-stroke: var(--token-color-icon-action-pressed);
        --tag-icon-border-color: var(--token-color-stroke-action-pressed);
      }

      &[disabled] {
        --tag-icon-fill-color: var(
          --token-color-background-action-disabled
        );
        --tag-icon-border-color: var(--token-color-stroke-action-disabled);
      }
    }
  }

  &--removable {
    --tag-icon-fill-color: var(--token-color-background-neutral);
    --tag-icon-stroke-color: var(--token-color-stroke-action);

    &.dnb-button {
      @include utilities.hover() {
        --tag-icon-fill: var(--token-color-background-action-hover);
      }

      @include utilities.focusVisible() {
        --tag-icon-fill: var(--token-color-background-action-focus);
        --tag-icon-stroke: var(--token-color-icon-neutral-inverse);
      }

      @include utilities.active() {
        --tag-icon-fill: var(--token-color-background-action-pressed);
        --tag-icon-stroke: var(--token-color-icon-neutral-inverse);
        --tag-icon-border-color: var(--token-color-stroke-action-pressed);
      }

      &[disabled] {
        --tag-icon-stroke-color: var(--token-color-stroke-action-disabled);
        --tag-icon-border-color: var(--token-color-stroke-action-disabled);
      }
    }
  }

  // Default space between tags
  &__group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}