.ga-form-field {
  @apply flex flex-col gap-2;

  > .ga-select,
  > .ga-input {
    @apply w-full shrink-0;
  }

  .ga-form-field__label {
    @apply inline-flex h-5 w-fit max-w-full min-w-0 gap-1 px-1 leading-5;

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

  .ga-form-field__label-text {
    @apply text-md animate-hover min-w-0 truncate font-medium transition-colors;
  }

  .ga-form-field__label-state {
    @apply text-sm font-normal;
  }

  .ga-form-field__label--defined {
    .ga-form-field__label-text {
      @apply border-b-2 border-dotted text-(--ga-color-text-action);
    }

    &:not(.ga-form-field__label--disabled) .ga-form-field__label-text:hover {
      @apply text-(--ga-color-text-body);
    }
  }

  .ga-form-field__label--disabled {
    .ga-form-field__label-text,
    .ga-form-field__label-state {
      @apply border-(--ga-color-border-disabled) text-(--ga-color-text-disabled);
    }
  }

  .ga-form-field__info {
    @apply flex items-start gap-1 px-1 text-xs;

    .ga-icon {
      @apply shrink-0;
    }
  }
}