/*
 * <form class="form">
 *   <div>                     a field: label, control, optional <p class="hint">
 *     <label>…</label>
 *     <input>                 also textarea, select, file input
 *   </div>
 * </form>
 * Inside .form, direct <div>s, labels and controls are styled without extra classes, so Rails
 * form helpers work as they are. .field, .label and .input give the same look anywhere else.
 * Rails wraps invalid controls in .field_with_errors, which is styled as the invalid state.
 */
@layer components {
  [data-theme] {
    .form {
      display: flex;
      flex-direction: column;
      gap: var(--space-5);
      max-width: var(--container-narrow);
    }

    .field,
    .form > :where(div:not([role])),
    .fieldset > :where(div:not([class])) {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }

    .field_with_errors {
      display: contents;
    }

    .label,
    .form :where(label:not([class])) {
      font-family: var(--font-display);
      font-size: var(--text-control);
      font-weight: var(--weight-display);
    }

    .input,
    .form :where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"]), select, textarea) {
      width: 100%;
      min-height: var(--control-height);
      padding: var(--space-2) var(--space-4);
      border: var(--border-width) solid var(--color-border-strong);
      border-radius: var(--radius-control);
      background: var(--color-surface);
      color: var(--color-text);
      /* 16px minimum stops iOS zooming into focused fields. */
      font-size: max(1rem, var(--text-control));
      line-height: var(--leading-snug);
      transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);

      &::placeholder {
        color: var(--color-text-muted);
        opacity: 1;
      }

      &:hover {
        border-color: var(--color-text-muted);
      }

      &:focus-visible {
        border-color: var(--color-brand);
        outline-offset: 0;
      }

      &:disabled {
        background: var(--color-surface-sunken);
        color: var(--color-text-muted);
        cursor: not-allowed;
      }
    }

    textarea.input,
    .form :where(textarea) {
      min-height: 7rem;
      padding-block: var(--space-3);
      resize: vertical;
    }

    input[type="file"].input,
    .form :where(input[type="file"]) {
      padding: var(--space-2);
      font-size: var(--text-sm);

      &::file-selector-button {
        margin-inline-end: var(--space-3);
        min-height: var(--control-height-sm);
        padding: 0 var(--space-4);
        border: var(--border-width) solid var(--color-border-strong);
        border-radius: var(--radius-button);
        background: var(--color-surface-sunken);
        color: var(--color-text);
        font: inherit;
        font-weight: var(--weight-strong);
        cursor: pointer;
      }
    }

    .hint {
      color: var(--color-text-muted);
      font-size: var(--text-sm);
    }

    .field-error {
      color: var(--color-danger);
      font-size: var(--text-sm);
      font-weight: var(--weight-strong);
    }

    .field--invalid .input,
    .field_with_errors :where(input, select, textarea) {
      border-color: var(--color-danger);
      background: var(--color-danger-soft);
    }

    .field--invalid .label,
    .field_with_errors :where(label) {
      color: var(--color-danger);
    }

    .form > :where(.btn) {
      align-self: flex-start;
    }

    .fieldset {
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      min-width: 0;
      margin: 0;
      padding: var(--card-padding);
      border: var(--border-width) solid var(--color-border);
      border-radius: var(--radius-card);
      background: var(--color-surface);

      :where(legend) {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding-inline: var(--space-2);
        font-family: var(--font-display);
        font-weight: var(--weight-display);
      }

      :where(input[type="radio"]) {
        width: 1.25rem;
        height: 1.25rem;
        margin: 0;
        accent-color: var(--color-brand);
      }
    }

    .checkbox {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      min-height: var(--control-height-sm);
      cursor: pointer;

      input {
        flex: none;
        width: 1.5rem;
        height: 1.5rem;
        margin: 0;
        accent-color: var(--color-brand);
      }
    }
  }
}