.ga-tag {
  @apply box-content inline-flex h-6 flex-row items-center gap-1 rounded-full border border-(--ga-color-border-action) pr-1 pl-2 text-sm;

  &:focus-visible {
    @apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);
  }

  &.ga-tag--information {
    @apply border-(--ga-color-border-information) bg-(--ga-color-surface-information) text-(--ga-color-text-information);

    .ga-tag__icon {
      @apply text-(--ga-color-icon-information);
    }
  }

  &.ga-tag--success {
    @apply border-(--ga-color-border-success) bg-(--ga-color-surface-success);

    .ga-tag__icon {
      @apply text-(--ga-color-icon-success);
    }
  }

  &.ga-tag--error {
    @apply border-(--ga-color-border-error) bg-(--ga-color-surface-error);

    .ga-tag__icon {
      @apply text-(--ga-color-icon-error);
    }
  }

  &.ga-tag--warning {
    @apply border-(--ga-color-border-warning) bg-(--ga-color-surface-warning);

    .ga-tag__icon {
      @apply text-(--ga-color-icon-warning);
    }
  }

  &.ga-tag--disabled {
    @apply border-(--ga-color-border-disabled) bg-(--ga-color-surface-disabled) text-(--ga-color-text-disable-selected);

    .ga-tag__icon {
      @apply text-(--ga-color-icon-on-disabled);
    }
  }

  &.ga-tag--interactive {
    @apply animate-hover cursor-pointer border-dashed bg-(--ga-color-surface-primary) transition-colors;

    &:hover {
      @apply bg-(--ga-color-surface-action-hover-2);

      .ga-tag__icon {
        @apply text-(--ga-color-icon-action-hover);
      }
    }
  }

  &.ga-tag--interactive-disabled {
    @apply cursor-not-allowed border-dashed border-(--ga-color-border-disabled) text-(--ga-color-text-disabled);

    .ga-tag__icon {
      @apply text-(--ga-color-icon-disabled);
    }
  }

  &.ga-tag--interactive-selected {
    @apply animate-hover border-solid bg-(--ga-color-surface-primary) text-(--ga-color-text-action) transition-colors;

    &:hover {
      @apply border-(--ga-color-border-action-hover);

      .ga-tag__icon {
        @apply text-(--ga-color-icon-action-hover);
      }
    }
  }

  &.ga-tag--interactive-selected-disabled {
    @apply cursor-not-allowed border-solid border-(--ga-color-surface-disable-selected) bg-(--ga-color-surface-disable-selected) text-(--ga-color-text-on-action);

    .ga-tag__icon {
      @apply text-(--ga-color-icon-on-primary);
    }
  }

  &.ga-tag--utility-grey,
  &.ga-tag--utility-indigo,
  &.ga-tag--utility-teal,
  &.ga-tag--utility-lime,
  &.ga-tag--utility-purple,
  &.ga-tag--utility-pink,
  &.ga-tag--utility-rose,
  &.ga-tag--utility-blue,
  &.ga-tag--utility-green,
  &.ga-tag--utility-orange,
  &.ga-tag--utility-disabled {
    @apply rounded pl-1.5;

    .ga-tag__icon {
      @apply text-(--ga-color-text-body);
    }
  }

  &.ga-tag--utility-grey {
    @apply border-(--ga-color-utility-grey) bg-(--ga-color-utility-grey-accent);
  }

  &.ga-tag--utility-indigo {
    @apply border-(--ga-color-utility-indigo) bg-(--ga-color-utility-indigo-accent);
  }

  &.ga-tag--utility-teal {
    @apply border-(--ga-color-utility-teal) bg-(--ga-color-utility-teal-accent);
  }

  &.ga-tag--utility-lime {
    @apply border-(--ga-color-utility-lime) bg-(--ga-color-utility-lime-accent);
  }

  &.ga-tag--utility-purple {
    @apply border-(--ga-color-utility-purple) bg-(--ga-color-utility-purple-accent);
  }

  &.ga-tag--utility-pink {
    @apply border-(--ga-color-utility-pink) bg-(--ga-color-utility-pink-accent);
  }

  &.ga-tag--utility-rose {
    @apply border-(--ga-color-utility-rose) bg-(--ga-color-utility-rose-accent);
  }

  &.ga-tag--utility-blue {
    @apply border-(--ga-color-utility-blue) bg-(--ga-color-utility-blue-accent);
  }

  &.ga-tag--utility-green {
    @apply border-(--ga-color-utility-green) bg-(--ga-color-utility-green-accent);
  }

  &.ga-tag--utility-orange {
    @apply border-(--ga-color-utility-orange) bg-(--ga-color-utility-orange-accent);
  }

  &.ga-tag--utility-disabled {
    @apply border-(--ga-color-border-disabled) bg-(--ga-color-surface-disabled) text-(--ga-color-text-disable-selected);
  }

  .ga-tag__icon {
    @apply shrink-0 text-(--ga-color-icon-action);
  }

  .ga-tag__label {
    @apply truncate pr-1;
  }

  .ga-tag__separator {
    @apply h-5 w-px bg-(--ga-color-border-disabled);
  }
}