@layer controls {

  /* simple_form default wrapper: div.input > label + input (+ .error / .hint). */
  .input {
    display: grid;
    align-content: start; /* beside a taller neighbour the field keeps its height */
    gap: 4px;

    & label {
      font-size: 12px;
      color: var(--color-ink-muted);
    }

    & input:is([type="text"], [type="number"], [type="email"], [type="url"], [type="search"], [type="tel"], [type="password"]),
    & input:not([type]),
    & textarea,
    & select {
      --spin-pad-y: calc(6px + var(--hairline-gap)); /* the number arrows reach over it (base.css) */
      --spin-pad-x: calc(8px + var(--hairline-gap));
      width: 100%;
      padding: var(--spin-pad-y) var(--spin-pad-x);
      font: inherit;
      color: var(--color-ink);
      background-color: var(--color-surface-sunken);
      border: var(--hairline) solid var(--color-line);
      border-radius: 4px;
    }

    /* Room for its arrow (base.css). */
    & select {
      padding-right: calc(24px + var(--hairline-gap));
    }

    &.field_with_errors :is(input, textarea, select),
    & .error~:is(input, textarea, select) {
      border-color: var(--color-danger);
    }

    & .error {
      font-size: 12px;
      color: var(--color-danger-ink);
    }

    & .hint {
      font-size: 12px;
      line-height: 1.4;
      color: var(--color-ink-muted);
    }

    /* A required field's mark after its label: a small asterisk icon (--icon-required) instead of the
       underlined "*"; the abbr's title still says what it means. */
    & label abbr[title] {
      display: inline-block;
      width: 7px;
      height: 7px;
      margin-top: 2px; /* level with the capitals' tops */
      vertical-align: text-top; /* the label's text, not its own (em would be 0 with its font-size) */
      font-size: 0;
      text-decoration: none;
      background: var(--color-danger);
      mask: var(--icon-required) center / contain no-repeat;
      cursor: help;
    }

    /* A checkbox (simple_form's boolean, nested: label > input + text): the box beside its words. */
    &.boolean label {
      display: flex;
      gap: 8px;
      align-items: center;
      width: fit-content;
      font-size: 13px;
      color: var(--color-ink);
      cursor: pointer;
    }

    /* Radios (simple_form's radio_buttons, nested: span.radio > label > input + text): one a line, the dot
       beside its words. */
    &.radio_buttons .radio label {
      display: flex;
      gap: 8px;
      align-items: center;
      width: fit-content;
      padding-block: 2px;
      cursor: pointer;
    }
  }

  .error_notification {
    padding: 6px 8px;
    font-size: 12px;
    color: var(--color-danger-ink);
    background: var(--color-danger-surface);
    border-radius: 4px;
  }

  /* Every message a field has, one a line (products/imports/_form: the rows of a file that were wrong). */
  .import-errors {
    display: grid;
    gap: 2px;
    margin: 0;
    padding-left: 16px;
    font-size: 12px;
    color: var(--color-danger-ink);
  }
}