.ga-input {
  @apply text-md animate-hover flex h-10 w-50 flex-row items-center gap-2 rounded border border-(--ga-color-border-primary) bg-(--ga-color-surface-primary) px-3 py-2 transition-colors;

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

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

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

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

  &:has(input:focus),
  &:is(input:focus) {
    &:not(.ga-input--invalid, .ga-input--success) {
      @apply border-(--ga-color-border-focus) outline-1 outline-(--ga-color-border-focus);
    }
  }

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

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

  &.ga-input--success {
    @apply border-(--ga-color-border-success) outline outline-(--ga-color-border-success);

    &:has(input:not(:placeholder-shown)),
    &:is(input:not(:placeholder-shown)) {
      @apply bg-(--ga-color-surface-success);
    }
  }

  input,
  &:is(input) {
    @apply min-w-0 leading-6;

    &::placeholder {
      @apply text-(--ga-color-text-disabled);
    }
  }

  input {
    @apply h-6 w-full outline-none;
  }
}