html-piano {
    display: block;
    position: relative;
    min-height: 200px;
    min-width: 200px;
    overflow: hidden;
    button {
        touch-action: none;
    }
    .blackkeys {
        top: 0;
        position: absolute;
        display: flex;
        width: 100%;
        height: 60%;
        left: calc(50% / var(--whites));
        touch-action: none;
        pointer-events: none;
        button {
            padding: 0;
            background: black;
            width: 100%;
            margin: 0 calc(25% / var(--whites));
            pointer-events: auto;
            &.pressed {
                background: darkslategrey;
            }
        }
        .spacer {
            opacity: 0;
            pointer-events: none;
        }
    }
    .whitekeys {
        position: absolute;
        inset: 0;
        display: flex;
        width: 100%;
        height: 100%;
        button {
            padding: 0;
            background: white;
            width: 100%;
            &.pressed {
                background: lightgoldenrodyellow;
            }
        }
    }
}