/*
:filename: wexa_statics/css/keypiano.css
:author: Brigitte Bigi
:contact: contact@sppas.org
:summary: style for the generic "KeyPiano" clickable button input

-------------------------------------------------------------------------

This file is part of Whakerexa: https://whakerexa.sf.net/

Copyright (C) 2026 Brigitte Bigi, CNRS
Laboratoire Parole et Langage, Aix-en-Provence, France

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.

This banner notice must not be removed.

-------------------------------------------------------------------------

*/

/* --------------------------------------------------------------------- */
/* Container and groups                                                   */
/* --------------------------------------------------------------------- */

.wexa-key-piano {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    border: var(--border-width) solid var(--border-color-alt);
    border-radius: var(--border-radius);
}

.wexa-key-piano-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* --------------------------------------------------------------------- */
/* Keys: base sizing comes from the global button/role=button rule.      */
/* Focus outline comes from the global :focus rule -- nothing to add.    */
/* --------------------------------------------------------------------- */

.wexa-key-piano-key {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--font-size) * 1.2);
    min-width: calc(var(--font-size) * 1.2);
    padding: 0.3rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    background-color: var(--bg-color-alt);
}

/* Deliberately no image sizing rule here: a key's illustration is content, */
/* not mechanics -- its size and classes are the consuming page's own      */
/* concern, not Whakerexa's.                                              */

/* A "radio" key hides its native input: the label is the visible key.   */
/* Same pattern as the ".switch" checkbox in button.css.                 */
label.wexa-key-piano-key input[type="radio"] {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

label.wexa-key-piano-key:has(input[type="radio"]:checked) {
    border-color: var(--fg-color);
    background-color: var(--buttons-bg-color);
    color: var(--buttons-fg-color);
}

label.wexa-key-piano-key:has(input[type="radio"]:disabled) {
    color: var(--fg-color-alt);
    border-color: var(--border-color-alt);
    cursor: not-allowed;
}

/* --------------------------------------------------------------------- */
/* Injected controls: "delete last key" and "clear all"                  */
/* Same idiom as the accessibility buttons (.menuitem, wexa.css): a flex  */
/* row of same-sized icon buttons, using the actual "buttons" colors --   */
/* not the neutral/alt background of a piano key.                        */
/* --------------------------------------------------------------------- */

.wexa-key-piano-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.wexa-key-piano-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: calc(var(--font-size) * 1.2);
    min-width: calc(var(--font-size) * 1.2);
    padding: 0.2rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    background-color: var(--buttons-bg-color);
    color: var(--buttons-fg-color);
}

.wexa-key-piano-control svg {
    height: 1.4rem;
    width: 1.4rem;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------- */
/* Visually-hidden live region announcing every action to screen readers */
/* --------------------------------------------------------------------- */

.wexa-key-piano-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}