/* use textarea instead of text-area to avoid conflict with Tailwind `text-` prefix */
.textarea {
  @apply rounded-field border bg-field px-3 py-2 text-base text-field-foreground shadow-field outline-none placeholder:text-field-placeholder sm:text-sm;

  min-height: 38px;

  border-width: var(--border-width-field);
  border-color: var(--color-field-border);

  /**
   * Transitions
   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
   */
  transition:
    background-color 150ms var(--ease-smooth),
    border-color 150ms var(--ease-smooth),
    box-shadow 150ms var(--ease-out);
  @apply motion-reduce:transition-none;

  @media (hover: hover) {
    &:hover:not(:focus):not(:focus-visible),
    &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) {
      @apply bg-field-hover;
      border-color: var(--color-field-border-hover);
    }
  }

  /* Focus state */
  &:focus,
  &[data-focused="true"] {
    @apply status-focused-field;
    border-color: var(--color-field-border-focus);
    background-color: var(--color-field-focus);
  }

  /* Focus visible state */
  &:focus-visible:not(:focus),
  &[data-focus-visible="true"] {
  }

  &[data-invalid="true"] {
    @apply status-invalid-field;
    background-color: var(--color-field-focus);
  }

  /* Disabled state */
  &[data-disabled="true"],
  &[aria-disabled="true"] {
    @apply status-disabled;
  }
}

/* Variant property definitions */
.textarea--primary {
  /* Default styles */
}

.textarea--secondary {
  @apply shadow-none;
  background-color: var(--textarea-bg);

  --textarea-bg: var(--color-default);
  --textarea-bg-hover: var(--color-default-hover);
  --textarea-bg-focus: var(--color-default);

  @media (hover: hover) {
    &:hover:not(:focus):not(:focus-visible),
    &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) {
      background-color: var(--textarea-bg-hover);
    }
  }

  &:focus,
  &[data-focused="true"] {
    background-color: var(--textarea-bg-focus);
  }

  /* Focus visible state */
  &:focus-visible:not(:focus),
  &[data-focus-visible="true"] {
  }

  /* Invalid state */
  &[data-invalid="true"] {
    @apply status-invalid-field;
    background-color: var(--textarea-bg-focus);
  }
}

/* Full width modifier */
.textarea--full-width {
  @apply w-full;
}