.ui-textarea {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ui-textarea__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-default);
}

.ui-textarea__required {
  color: var(--state-error);
}

.ui-textarea__control {
  width: 100%;
  min-height: calc(var(--control-height-md) * 3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-panel);
  color: var(--text-strong);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  resize: vertical;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

.ui-textarea__control::placeholder {
  color: var(--text-muted);
}

.ui-textarea__control:hover:not(:disabled):not([readonly]) {
  border-color: var(--border-strong);
}

.ui-textarea__control:focus {
  outline: none;
}

.ui-textarea__control:focus-visible {
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}

.ui-textarea__control:disabled {
  background: var(--surface-disabled);
  color: var(--text-disabled);
  cursor: not-allowed;
  resize: none;
}

.ui-textarea__control[readonly] {
  background: var(--surface-subtle);
  resize: none;
}

.ui-textarea--error .ui-textarea__control {
  border-color: var(--state-error);
}

.ui-textarea--valid .ui-textarea__control {
  border-color: var(--state-ok);
}

.ui-textarea__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.ui-textarea__help,
.ui-textarea__error,
.ui-textarea__counter {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

.ui-textarea__help,
.ui-textarea__counter {
  color: var(--text-muted);
}

.ui-textarea__error {
  color: var(--state-error);
}

.ui-textarea__counter {
  margin-left: auto;
  white-space: nowrap;
}

.ui-textarea--sm .ui-textarea__control {
  min-height: calc(var(--control-height-sm) * 2);
}

.ui-textarea--lg .ui-textarea__control {
  min-height: calc(var(--control-height-lg) * 4);
}

.ui-textarea--fixed .ui-textarea__control {
  resize: none;
}

.ui-textarea--block {
  width: 100%;
}