/* TextArea */
.ui-text-area {
  @apply flex w-full max-w-80 flex-col gap-2;
}

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

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

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

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

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

.ui-text-area__field {
  @apply w-full rounded-md border border-gray-200 bg-white text-gray-900 outline-none;
  resize: vertical;
}

.ui-text-area__field--xs {
  @apply min-h-[60px] px-2 py-1 text-xs font-normal leading-4;
}

.ui-text-area__field--sm {
  @apply min-h-[70px] px-3 py-1.5 text-sm font-normal leading-5;
}

.ui-text-area__field--md {
  @apply min-h-[80px] px-4 py-2.5 text-base font-normal leading-6;
}

.ui-text-area__field--lg {
  @apply min-h-[100px] px-6 py-3 text-lg font-normal leading-7;
}

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

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

.ui-text-area__field--disabled {
  @apply border-gray-200 bg-gray-50 cursor-not-allowed text-gray-400;
}

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

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

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

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

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

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

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