.ga-quick-filter-button {
  @apply text-md animate-hover inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded-full px-4 align-middle leading-1 font-medium whitespace-nowrap transition-colors;
  @apply border border-(--ga-color-border-action) bg-(--ga-color-surface-primary) text-(--ga-color-text-action);

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

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

  &:hover:not(
      :disabled,
      .ga-quick-filter-button--disabled,
      .ga-quick-filter-button--selected
    ) {
    @apply bg-(--ga-color-surface-action-hover-2) text-(--ga-color-text-action-hover);

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

  &:active:not(:disabled, .ga-quick-filter-button--disabled) {
    @apply bg-(--ga-color-surface-primary);
  }

  &:disabled,
  &.ga-quick-filter-button--disabled {
    @apply cursor-not-allowed border-(--ga-color-border-disabled) bg-(--ga-color-surface-page) text-(--ga-color-text-disabled);

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

  &.ga-quick-filter-button--transparent {
    @apply bg-transparent;

    &:active:not(:disabled, .ga-quick-filter-button--disabled) {
      @apply bg-transparent;
    }
  }

  &.ga-quick-filter-button--selected {
    @apply border-(--ga-color-border-action) bg-(--ga-color-surface-action) text-(--ga-color-text-on-action);

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

    &:hover:not(:disabled, .ga-quick-filter-button--disabled) {
      @apply border-(--ga-color-border-action-hover) bg-(--ga-color-surface-action-hover);
    }

    &:disabled,
    &.ga-quick-filter-button--disabled {
      @apply border-(--ga-color-surface-disabled) bg-(--ga-color-surface-disabled) text-(--ga-color-text-disable-selected);

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