.keyboard {

    @media (width <= 800px) {
        &.active {
            background-color: hsl(330 40 15);
            height: var(--keyboard-height);
            flex-direction: column;
            padding: 0.4em;
            padding-bottom: 2rem;
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none; /*disable iOS long-press callout/selection UI*/

            &:has(.uppercase) {text-transform: uppercase;}

            & > .keyboard-row {
                flex-grow: 1;
                display: flex;
                flex-direction: row;
                justify-content: space-evenly;

                & > div {
                    
                    flex-grow: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    container-type: size;
                    padding: 0.2em 0.15em;

                    &:has([data-key="shift"], [data-key="backspace"]) {flex-grow: 1.5;}
                    &:has([data-key="spacebar"]) {flex-grow: 4;}
                    &:has([data-key="enter"]) {flex-grow: 1.75;}
                    &:has(.m) {flex-grow: 1.2;}
                    &:has(.numbers-1) {flex-grow: 1.5;}

                    & > span {
                        display: none;
                        border-radius: 0.2em;
                        flex-grow: 1;
                        height: 100%;
                        background-color: hsl(330 100 50 / 0.3);
                        font-size: calc( 100cqh / 1.2 * 0.75 );
                        align-items: center;
                        justify-content: center;
                        padding-bottom: 0.1em;
                        max-width: 100cqw;
                        &:active {background-color: hsl(330 100 50 / 0.6);}
                        &.active {display: flex;}
                        &.uppercase svg {fill: currentColor;}
                        &.numbers-1 {font-size: calc( 100cqh / 1.2 * 0.65 );}
                        &.numbers-2 {font-size: calc( 100cqh / 1.2 * 0.65 );}
                        &.letters {font-size: calc( 100cqh / 1.2 * 0.55 );}
                        &.special {font-size: calc( 100cqh / 1.2 * 0.45 );}
                    }
                }
            }
        }
    }
}