/* public/app/css/dashboard-stage-kbd-feat.css
 * Synopsis: Touches spéciales mises en avant.
 * Objectif: Cotes, crochets, tirets et dièse visibles.
 */

.dash .dash-kbd-key--feat {
    font-size: .92rem;
    font-weight: 600;
}

.dash .dash-kbd-key--quote {
    background: color-mix(in srgb, var(--dash-accent) 16%, var(--dash-kbd-face));
    border-color: color-mix(in srgb, var(--dash-accent) 48%, var(--dash-line));
    color: color-mix(in srgb, var(--dash-accent) 78%, var(--dash-text));
}

.dash .dash-kbd-key--bracket {
    background: color-mix(in srgb, var(--dash-accent) 10%, var(--dash-kbd-face));
    border-color: color-mix(in srgb, var(--dash-accent) 40%, var(--dash-line));
    color: color-mix(in srgb, var(--dash-accent) 62%, var(--dash-text));
    font-family: var(--display);
}

.dash .dash-kbd-key--dash {
    background: color-mix(in srgb, var(--dash-hot) 10%, var(--dash-kbd-face));
    border-color: color-mix(in srgb, var(--dash-hot) 36%, var(--dash-line));
    color: color-mix(in srgb, var(--dash-hot) 68%, var(--dash-text));
}

.dash .dash-kbd-key--hash {
    background: color-mix(in srgb, #dfff00 28%, var(--dash-kbd-face));
    border-color: color-mix(in srgb, var(--dash-accent) 55%, #dfff00 45%);
    color: #06110c;
    font-family: var(--display);
    font-size: 1rem;
    letter-spacing: -.02em;
}

.dash .dash-kbd-key--feat:hover,
.dash .dash-kbd-key--feat:focus-visible {
    background: var(--dash-kbd-hover);
    border-color: var(--dash-kbd-ring);
    color: #06110c;
}

.dash .dash-kbd-key--feat:active {
    background: var(--dash-accent);
    border-color: var(--dash-accent);
    color: #06110c;
}