/* password-toggle.css - Oeil "afficher / masquer" dans un champ mot de passe.
 *
 * Brique MUTUALISEE, chargee par les layouts d authentification de chaque app.
 * Le balisage est cree par password-toggle.js (l enveloppe .mvs-pw entoure l input).
 *
 * ZERO COULEUR EN DUR : l icone herite de `currentColor`, donc elle suit
 * automatiquement la palette de CHAQUE app (tokens --ds-*) et le theme clair/sombre,
 * sans qu aucune app n ait a surcharger quoi que ce soit. C est aussi ce qui garantit
 * le passage du gate CI `scripts/lint-couleurs.sh`.
 */

/* Enveloppe : conserve le comportement de bloc de l input d origine (les formulaires
   des apps comptent dessus pour la largeur), et sert de reference de positionnement. */
.mvs-pw {
    position: relative;
    display: block;
    width: 100%;
}

/* Reserve la place de l oeil pour que le texte saisi ne passe jamais dessous.
   La valeur couvre le bouton (34px) plus une respiration. */
.mvs-pw-input {
    padding-right: 44px !important;
}

.mvs-pw-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;

    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;

    /* Herite de la couleur du texte du champ, attenuee : lisible sans capter l oeil. */
    color: inherit;
    opacity: .55;
    transition: opacity .15s ease, background-color .15s ease;
}

.mvs-pw-toggle:hover,
.mvs-pw-toggle:focus-visible {
    opacity: 1;
}

/* Teinte de survol tiree de la couleur courante : aucune valeur codee en dur. */
.mvs-pw-toggle:hover {
    background-color: color-mix(in srgb, currentColor 10%, transparent);
}

.mvs-pw-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.mvs-pw-toggle svg {
    display: block;
    pointer-events: none; /* le clic vise toujours le bouton, jamais le trace SVG */
}

@media (prefers-reduced-motion: reduce) {
    .mvs-pw-toggle {
        transition: none;
    }
}