/**
 * Classes de champ de formulaire prêtes à l'emploi — à inclure séparément de
 * `themes/ariane.css` (fichier indépendant, même s'il consomme les mêmes
 * tokens `--ar-*` génériques).
 *
 * Contrairement aux tokens/`::part()` de `themes/ariane.css`, qui stylisent
 * le contrat intrinsèque des composants `ar-*`, ces classes habillent du
 * HTML consommateur ordinaire (un `<textarea>`/`<input>` externe que vous
 * associez vous-même à un composant, par exemple via `for` à `ar-charcounter`).
 * Opt-in : rien n'est appliqué sans poser explicitement la classe.
 *
 * Usage :
 *   <link rel="stylesheet" href="presets/fields.css">
 *
 *   <div class="ar-field-group">
 *       <label class="ar-label" for="bio">Bio</label>
 *       <textarea class="ar-input" id="bio"></textarea>
 *       <ar-charcounter for="bio" max="150"></ar-charcounter>
 *   </div>
 */
@layer ariane.presets {
    .ar-input {
        display: block;
        width: 100%;
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--ar-input-border-color);
        border-radius: var(--ar-input-radius);
        background-color: var(--ar-input-bg);
        color: var(--ar-input-color);
        font-family: inherit;
        font-size: var(--ar-input-font-size);
        transition: border-color 0.15s;

        &:focus-visible {
            outline: 2px solid var(--ar-input-focus-ring-color);
            outline-offset: 1px;
        }

        /* Lecture seule et désactivé : bordure inactive. Déclarées avant
           [aria-invalid] (même spécificité) pour qu'un champ invalide garde sa
           bordure d'erreur. */
        &:read-only {
            border-color: var(--ar-input-inactive-border-color);
            background: var(--ar-input-readonly-bg);
            cursor: default;
        }

        &[aria-disabled],
        &:disabled {
            cursor: not-allowed;
            border-color: var(--ar-input-inactive-border-color);
            color: var(--ar-input-disabled-color);
            background-color: var(--ar-input-disabled-bg);
        }

        &[aria-disabled] {
            pointer-events: none;
        }

        /* Même signal et mêmes tokens que `:state(has-error)` des composants : l'application
           déclare l'erreur. Pour un style piloté par la validation du navigateur, cibler
           `:user-invalid` à la place. */
        &[aria-invalid='true'] {
            border-color: var(--ar-input-error-border-color);
        }
    }

    textarea.ar-input {
        min-height: 4.5rem;
        resize: vertical;
    }

    .ar-label {
        display: block;
        margin-block-end: 0.375rem;
        color: var(--ar-color-text);
        font-size: var(--ar-font-size-sm);
        font-weight: var(--ar-font-weight-medium);
    }

    /* Hook documenté par ar-charcounter : posé sur le label lié au champ observé. */
    .ar-label[data-ar-char-state='warning'] {
        color: var(--ar-color-warning-text);
    }

    .ar-label[data-ar-char-state='error'] {
        color: var(--ar-color-danger-text);
    }

    /* Label d'un champ en erreur : le champ doit être dans le même `.ar-field-group`. */
    .ar-field-group:has([aria-invalid='true']) > .ar-label {
        color: var(--ar-input-error-color);
    }

    /* Empile label + champ + éléments liés (compteur, hint…) avec un espacement
       cohérent avec ar-datepicker (--ar-field-gap, même token). */
    .ar-field-group {
        display: flex;
        flex-direction: column;
        gap: var(--ar-field-gap);
    }

    .ar-field-group .ar-label {
        margin-block-end: 0;
    }
}