/* 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(--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(--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;
    }
}

/* Part locale — glass, le champ en verre sur l'aura des outils de création, champs de mesure et
   selects, quand les formulaires du compte gardent le champ du canon. Le resserrement suit le
   contexte : le compact des champs de mesure, et les selects de l'aperçu, du choix de méthode et le
   champ du dock, qui gardent leur forme pleine. */

@layer components {
    .field-control--compact,
    .generator-preview-select .field-control--glass,
    .workspace-choice .field-control--glass,
    .dock .field-control--glass {
        --field-padding: 2px 10px;
    }
    .field-control--glass {
        --field-radius: var(--local-radius-field);
        --field-surface: var(--local-color-decor-glass);
        --field-line: var(--local-color-decor-glass-bright);
        --field-line-hover: var(--local-color-decor-glass-bright);
        --field-weight: var(--canon-weight-emphasis);
    }
}