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

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

    .field {
        border: 0;
    }

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

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

    .field-control {
        border: var(--field-line-width, var(--canon-line-width)) solid var(--field-line, var(--canon-theme-control-boundary));
        border-radius: var(--field-radius, var(--canon-radius-control));
        background-color: var(--field-surface, var(--canon-theme-field));
    }
    .field-control:hover {
        border-color: var(--field-line-hover, var(--canon-theme-ink));
    }
    .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);
        font-weight: var(--field-weight, inherit);
        line-height: var(--field-leading, 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[readonly] {
        color: var(--field-ink-readonly, var(--canon-theme-ink));
    }

    .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(--field-padding, var(--canon-space-1) var(--canon-space-2));
    }

    .field-control--number {
        display: inline-block;
        width: var(--field-number-width, 12rem);
        max-width: 100%;
    }

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