.com-keyboard {

    --note-width:           var(--keyboard-note-width);

    background-color:       #fff;
    overflow-x:             visible;
}

.com-keyboard > .all-notes {

    display:                flex;
    flex-direction:         row;
}

.com-keyboard > .all-notes > .note {

    flex:                   0 0 auto;
    height:                 calc( var(--button-size) / 2 );
    width:                  var(--note-width);
}

.com-keyboard > .all-notes > .note.is-black {

    background-color:       var(--color-background);
    border-bottom:          calc( 2px + var(--note-width) ) solid #eef;
}

.com-keyboard > .all-notes > .note.is-white {

    background-color:       #fff;
}

.com-keyboard > .all-notes > .note:first-child,
.com-keyboard > .all-notes > .note.is-white + .is-white {

    border-left:            1px solid #ccc;
}
.com-keyboard > .all-notes > .note:last-child {

    border-right:           1px solid #ccc;
}

.com-keyboard > .all-notes > .note.is-black.is-active,
.com-keyboard > .all-notes > .note.is-white.is-active {

    background-color:       var(--color-secondary);
}