/* public/app/css/dash-sound-btn.css
 * Synopsis: Bouton d’activation des sons du dashboard.
 * Objectif: Afficher clairement les états muet et actif.
 */

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

.dash .dash-sound-btn[data-sound="off"] {
    color: color-mix(in srgb, var(--dash-text) 58%, transparent);
}

.dash .dash-sound-btn[data-sound="on"] {
    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) 18%, transparent),
        0 2px 8px color-mix(in srgb, var(--dash-accent) 18%, transparent);
    color: var(--dash-accent);
}

.dash .dash-sound-btn__on {
    display: none;
}

.dash .dash-sound-btn[data-sound="on"] .dash-sound-btn__on {
    display: block;
}

.dash .dash-sound-btn[data-sound="on"] .dash-sound-btn__off {
    display: none;
}