.field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap-s);
}

.field__label {
  font: var(--type-text-caption-r);
  color: var(--color-text-heading);
}

.field__control {
  width: 100%;
  height: 56px;
  padding-inline: var(--spacing-gap-lg);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xs);
  background-color: var(--color-neutral-fff);
  font: var(--type-text-body-r);
  color: var(--color-text-heading);
  appearance: none;
  transition: border-color var(--transition-duration) var(--transition-easing);
}

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

/* Рамка в макете и есть указатель фокуса, общий контур из base.css ее дублировал бы */
.field__control:focus-visible {
  border-width: 2px;
  border-color: var(--color-accent-500);
  outline: none;
}

.field__control[aria-invalid="true"] {
  border-width: 2px;
  border-color: var(--color-red);
}

.field__message:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 2px;
  font: var(--type-text-caption-r);
  color: var(--color-red);
}

.field__warning {
  flex: 0 0 auto;
  fill: currentColor;
}