/*
* Tag component
*
*/

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

.dnb-tag {
  --tag-icon-color: var(--color-sea-green);
  --tag-icon-border-color: var(--tag-icon-color);

  &.dnb-button {
    appearance: none;
    background-color: var(--color-black-8);

    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(--color-sea-green);
      background-color: var(--color-pistachio);

      @include fakeBorder(var(--color-sea-green), 0.0625rem, inset);
      @include buttonFocusVisible(
        $focus-color: var(--color-emerald-green)
      ) {
        --tag-icon-color: var(--color-emerald-green);
      }
      @include buttonHover() {
        --tag-icon-color: var(--color-emerald-green);
      }
      @include buttonActive(
        $background-color: var(--color-mint-green-50)
      ) {
        --tag-icon-color: var(--color-sea-green);
      }

      &[disabled] {
        color: var(--color-sea-green-30);
        background-color: var(--color-white);

        @include fakeBorder(var(--color-sea-green-30));
      }
    }
  }

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

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

  &--addable {
    --tag-icon-fill-color: var(--tag-icon-color);
    --tag-icon-stroke-color: var(--color-white);
    svg {
      transform: rotate(45deg);
    }
  }

  &--removable {
    --tag-icon-fill-color: var(--color-white);
    --tag-icon-stroke-color: var(--tag-icon-color);
  }

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