/* public/app/css/dash-visual-btn.css
 * Synopsis: Bouton mode visuel Éco / Ultra.
 * Objectif: Afficher clairement les deux états du toggle.
 */

.dash .dash-visual-btn {
    color: var(--dash-text);
}

.dash .dash-visual-btn[data-visual="eco"] {
    color: color-mix(in srgb, #2d8a5a 55%, var(--dash-text));
}

.dash .dash-visual-btn[data-visual="ultra"] {
    background: color-mix(in srgb, var(--dash-accent-dim) 88%, var(--dash-elev2));
    border-color: color-mix(in srgb, var(--dash-accent) 48%, transparent);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent),
        0 0 0 1px color-mix(in srgb, var(--dash-accent) 22%, transparent),
        0 0 12px color-mix(in srgb, var(--dash-accent) 22%, transparent);
    color: var(--dash-accent);
}

.dash .dash-visual-btn__ultra {
    display: none;
}

.dash .dash-visual-btn[data-visual="ultra"] .dash-visual-btn__ultra {
    display: block;
}

.dash .dash-visual-btn[data-visual="ultra"] .dash-visual-btn__eco {
    display: none;
}