/* Champ — modèle canonique ; son emploi : canon_field.md. */

@layer components {
    .field {
        display: flex;
        flex-direction: column;
        gap: var(--canon-space-1);
    }

    .field-label {
        font-size: var(--canon-size-control);
        font-weight: var(--canon-weight-label);
        color: var(--canon-theme-ink);
    }
    .field-hint,
    .field-error {
        font-size: var(--canon-size-note);
    }
    .field-hint {
        color: var(--canon-theme-muted);
    }
    .field-error {
        color: var(--canon-theme-danger);
    }
}

@layer components {
    .field-control {
        display: block;
        width: 100%;
        padding: var(--canon-space-2) var(--canon-space-3);
    }

    .field-control {
        border: var(--field-line-width, var(--canon-line-width)) solid var(--canon-theme-control-boundary);
        border-radius: var(--field-radius, var(--canon-radius-control));
        background-color: var(--canon-theme-field);
    }
    .field-control:hover {
        border-color: var(--canon-theme-ink);
    }
    .field-control:focus {
        border-color: var(--canon-theme-action);
    }
    .field-control:disabled,
    .field-control[readonly] {
        border-color: var(--canon-theme-line);
    }
    .field-control[aria-invalid="true"] {
        border-color: var(--canon-theme-danger);
        background-color: var(--canon-theme-danger-surface);
    }
    /* Le fond que le navigateur impose à un champ autorempli, recouvert d'une ombre intérieure ; deux
       règles, un pseudo-élément inconnu invaliderait la liste. */
    .field-control:autofill {
        box-shadow: inset 0 0 0 100vmax var(--canon-theme-tint), inset 0 0 0 100vmax var(--canon-theme-field);
    }
    .field-control:-webkit-autofill {
        box-shadow: inset 0 0 0 100vmax var(--canon-theme-tint), inset 0 0 0 100vmax var(--canon-theme-field);
    }
    .field-control[aria-invalid="true"]:autofill {
        box-shadow: inset 0 0 0 100vmax var(--canon-theme-danger-surface);
    }
    .field-control[aria-invalid="true"]:-webkit-autofill {
        box-shadow: inset 0 0 0 100vmax var(--canon-theme-danger-surface);
    }

    .field-control {
        font-size: var(--canon-size-field);
        line-height: var(--canon-leading-body);
        color: var(--canon-theme-ink);
    }
    .field-control:autofill {
        -webkit-text-fill-color: var(--canon-theme-ink);
        caret-color: var(--canon-theme-ink);
    }
    .field-control:-webkit-autofill {
        -webkit-text-fill-color: var(--canon-theme-ink);
        caret-color: var(--canon-theme-ink);
    }
    .field-control::placeholder {
        color: var(--canon-theme-faint);
    }
    .field-control:disabled {
        color: var(--canon-theme-faint);
    }

    .field-control {
        transition: border-color var(--canon-duration-state), background-color var(--canon-duration-state);
    }
}

@layer components {
    .field-control--compact {
        display: inline-block;
        width: auto;
        padding: var(--canon-space-1) var(--canon-space-2);
    }

    .field-control--long {
        resize: vertical;
    }
}