.ga-card {
  @apply text-md inline-block rounded border border-(--ga-color-border-tertiary) bg-white p-4;

  &.ga-card--selectable {
    @apply animate-hover relative cursor-pointer transition-[color,background-color,border-color,box-shadow];

    &:hover:not(.ga-card--selected) {
      @apply shadow-north border-(--ga-color-border-action-hover) bg-(--ga-color-surface-action-hover-2);
    }

    &:focus-visible {
      @apply outline-none;
    }

    &:focus-visible::after {
      @apply absolute -inset-[5px] border-2 border-(--ga-color-border-focus) content-[''];
    }
  }

  &.ga-card--disabled {
    @apply border-(--ga-color-border-disabled) bg-(--ga-color-surface-disabled) text-(--ga-color-text-disabled);
  }

  &.ga-card--selected {
    @apply border-(--ga-color-border-focus) bg-(--ga-color-surface-selected);
  }
}