/* Text fields, single-choice selects and ranges. Layout belongs to their component. */
.field-control {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: var(--control-height);
  margin: 0;
  padding: 10px var(--space-3);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-control);
  background-color: var(--field-surface);
  color: var(--field-ink);
  font: var(--text-body)/1.5 var(--font-body);
  box-shadow: none;
}
textarea.field-control { min-height: 104px; resize: vertical; }
.field-control::placeholder { color: var(--field-placeholder); opacity: 1; }
.field-control:focus { border-color: var(--focus-color); }
.field-control:focus-visible,.range-control:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: -2px; }
.field-control[aria-invalid="true"] { border-color: var(--field-error); }
.field-control[aria-invalid="true"]:focus-visible { outline-color: var(--field-error); }
.field-control:disabled,.range-control:disabled { opacity: .55; cursor: not-allowed; }
@media (hover:hover) {
  .field-control:where(:not(:focus):not(:disabled):not([aria-invalid="true"])):hover { border-color: var(--field-hover-border); }
}
/* Native menus remain native. Space for the common arrow is independent of page padding. */
select.field-control:where(:not([multiple]):not([size]),[size="1"]:not([multiple])) {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: var(--control-icon-size);
  background-image: url("assets/icons/chevron-down.svg");
  background-position: right 14px center;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
  cursor: pointer;
}
.range-control {
  display: block;
  width: 100%;
  height: var(--control-icon-size);
  min-height: var(--control-icon-size);
  margin: 0;
  padding: 0;
  accent-color: var(--range-accent);
  cursor: pointer;
}
@media (forced-colors:active) {
  select.field-control:where(:not([multiple]):not([size]),[size="1"]:not([multiple])) {
    appearance: auto;
    -webkit-appearance: auto;
    background-image: none;
  }
}