@layer components {
  .textarea {
    @apply inline-block min-h-[5rem] w-full rounded-primary border border-slate-300 bg-transparent px-4 py-2 text-sm text-slate-700 placeholder:text-slate-400 focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-500 disabled:opacity-80 disabled:placeholder:text-slate-500 dark:border-slate-600 dark:text-slate-300 dark:placeholder:text-slate-400 dark:focus:border-primary-500  dark:disabled:bg-slate-700;

    &-sm {
      @apply min-h-[3rem] text-xs;
    }

    &-md {
      @apply min-h-[5rem] text-sm;
    }

    &-lg {
      @apply min-h-[7rem] text-base;
    }

    &.is-valid,
    .form-validated &:valid {
      @apply border-success-500 focus:border-success-500 focus:ring-1 focus:ring-success-500 dark:border-success-500 dark:focus:border-success-500 dark:focus:ring-success-500;
    }

    &.is-valid ~ .success-message,
    .form-validated &:valid ~ .success-message {
      @apply block;
    }

    &.is-invalid,
    .form-validated &:invalid {
      @apply border-danger-500 focus:border-danger-500 focus:ring-1 focus:ring-danger-500 dark:border-danger-500 dark:focus:border-danger-500 dark:focus:ring-danger-500;
    }

    &.is-invalid ~ .error-message,
    .form-validated &:invalid ~ .error-message {
      @apply block;
    }
  }
}
