.input {
  height: var(--control-height-md);
  padding: 0 var(--inset-control-inline);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-control);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--type-body-3-size);
  font-weight: var(--type-body-3-weight);
  line-height: var(--type-body-3-line-height);
  outline: none;
  transition:
    border-color var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    background var(--duration-normal) var(--ease-out);
}

.input:hover {
  border-color: var(--field-border-hover);
}

.input:focus,
.input:focus-visible {
  border-color: var(--border-focus);
  box-shadow: var(--field-ring);
}

.textarea {
  height: auto;
  min-height: 88px;
  padding: var(--inset-control-block) var(--inset-control-inline);
  resize: vertical;
}

.lg {
  min-height: 120px;
  border-radius: var(--radius-control-lg);
}

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

.invalid:focus,
.invalid:focus-visible,
.textarea[aria-invalid="true"]:focus,
.textarea[aria-invalid="true"]:focus-visible {
  border-color: var(--border-danger);
  box-shadow: var(--field-invalid-ring);
}
