textarea.ga-text-area {
  @apply text-md animate-hover inline-flex w-full min-w-0 rounded border border-(--ga-color-border-primary) bg-(--ga-color-surface-primary) px-3 py-2 leading-6 transition-colors;

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

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

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

    &:not(:placeholder-shown) {
      @apply border-(--ga-color-surface-disable-selected) bg-(--ga-color-surface-disable-selected) text-(--ga-color-text-on-action);
    }
  }

  &:focus {
    &:not(.ga-text-area--invalid) {
      @apply border-(--ga-color-border-focus) outline-1 outline-(--ga-color-border-focus);
    }
  }

  &.ga-text-area--invalid {
    @apply border-(--ga-color-border-error) outline outline-(--ga-color-border-error);

    &:not(:placeholder-shown) {
      @apply bg-(--ga-color-surface-error);
    }
  }
}