.ga-button {
  @apply text-md animate-hover inline-flex h-10 cursor-pointer items-center justify-center gap-2 rounded px-4 align-middle leading-1 font-medium whitespace-nowrap transition-colors;

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

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

  &:disabled {
    @apply cursor-not-allowed;

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

  &.ga-button--primary {
    @apply bg-(--ga-color-surface-action) text-(--ga-color-text-on-action);

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

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

    &:active {
      @apply bg-(--ga-color-surface-action);
    }

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

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

  &.ga-button--secondary {
    @apply border border-(--ga-color-border-action) bg-(--ga-color-surface-primary) text-(--ga-color-text-action);

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

    &:active {
      @apply bg-(--ga-color-surface-primary);
    }

    &:disabled {
      @apply 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-button--ghost {
    @apply border border-transparent bg-transparent text-(--ga-color-text-action);

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

    &:active {
      @apply text-(--ga-color-text-action);
    }

    &:disabled {
      @apply border-transparent text-(--ga-color-text-disabled);

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

  &.ga-button--transparent {
    @apply border border-(--ga-color-border-action) bg-transparent text-(--ga-color-text-action);

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

    &:focus-visible {
      @apply border-(--ga-color-border-action);
    }

    &:active {
      @apply bg-transparent;
    }

    &:disabled {
      @apply border-(--ga-color-border-disabled) bg-transparent text-(--ga-color-text-disable-selected);

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

  &.ga-button--icon-only {
    @apply w-10 px-0;
  }
}