/* Input */
.ui-input {
  @apply flex w-full flex-col gap-2;
}

.ui-input__label {
  @apply flex items-end gap-1 text-gray-900;
}

.ui-input__label--xs {
  @apply text-xs font-normal leading-4;
}

.ui-input__label--sm,
.ui-input__label--md {
  @apply text-sm font-normal leading-5;
}

.ui-input__label--lg {
  @apply text-base font-normal leading-6;
}

.ui-input__required {
  @apply text-red-500;
}

.ui-input__control {
  @apply flex w-full items-center rounded-md border border-gray-200 bg-white;
}

.ui-input__control--xs {
  @apply h-6 gap-1 px-2;
}

.ui-input__control--sm {
  @apply h-8 gap-1.5 px-3;
}

.ui-input__control--md {
  @apply h-10 gap-2 px-4;
}

.ui-input__control--lg {
  @apply h-12 gap-2 px-5;
}

.ui-input__control--error {
  @apply border-red-500;
}

.ui-input__control--disabled {
  @apply border-gray-200 bg-gray-50;
}

.ui-input__control:not(.ui-input__control--disabled):focus-within {
  @apply border-blue-500 ring-1 ring-inset ring-blue-500;
}

.ui-input__field {
  @apply min-w-0 flex-1 border-none bg-transparent p-0 text-gray-900 outline-none;
}

.ui-input__field::placeholder {
  @apply text-gray-400;
}

.ui-input__field[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.ui-input__field[type="number"]::-webkit-inner-spin-button,
.ui-input__field[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.ui-input__field--xs {
  @apply text-xs font-normal leading-4;
}

.ui-input__field--sm {
  @apply text-sm font-normal leading-5;
}

.ui-input__field--md {
  @apply text-base font-normal leading-6;
}

.ui-input__field--lg {
  @apply text-lg font-normal leading-7;
}

.ui-input__control--disabled .ui-input__field {
  @apply cursor-not-allowed text-gray-400;
}

.ui-input__icon {
  @apply flex shrink-0 items-center justify-center text-gray-400;
  line-height: 1;
}

.ui-input__icon .icon {
  @apply flex items-center justify-center;
  line-height: 1;
}

.ui-input__icon--xs {
  @apply size-3;
}

.ui-input__icon--sm {
  @apply size-3.5;
}

.ui-input__icon--md {
  @apply size-4;
}

.ui-input__icon--lg {
  @apply size-5;
}

.ui-input__helper {
  @apply text-gray-600;
}

.ui-input__helper--xs,
.ui-input__helper--sm,
.ui-input__helper--md {
  @apply text-xs font-normal leading-4;
}

.ui-input__helper--lg {
  @apply text-sm font-normal leading-5;
}

.ui-input__error {
  @apply text-red-500;
}

.ui-input__error--xs,
.ui-input__error--sm,
.ui-input__error--md {
  @apply text-xs font-normal leading-4;
}

.ui-input__error--lg {
  @apply text-sm font-normal leading-5;
}