/* Textarea
   Multiline text field. Mirrors the input field styling. Wrap label, control
   and hint in .dp-field. Mark an invalid field with aria-invalid="true".
   All colour, radius and type come from tokens.css. */

.dp-textarea {
  width: 100%;
  min-height: 6rem;
  resize: vertical;
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-base);
  line-height: var(--dp-leading-normal);
  color: var(--dp-navy);
  background: var(--dp-white);
  border: 1px solid var(--dp-border-neutral);
  border-radius: var(--dp-radius-xs);
  padding: var(--dp-space-3);
  transition: border-color var(--dp-transition), box-shadow var(--dp-transition);
}

.dp-textarea::placeholder {
  color: var(--dp-text-subtle);
}

.dp-textarea:hover {
  border-color: var(--dp-blue-400);
}

.dp-textarea:focus {
  outline: none;
  border-color: var(--dp-primary-bg);
  box-shadow: var(--dp-shadow-focus);
}

.dp-textarea:disabled {
  background: var(--dp-neutral-200);
  color: var(--dp-text-subtle);
  cursor: not-allowed;
}

.dp-textarea[aria-invalid="true"] {
  border-color: var(--dp-danger);
}

.dp-textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
}