.keyboardContainer {
    display: flex;
    height: 10rem;
}

.octaveContainer {
    position: relative;
    width: 15rem;
}

.whiteKeyContainer {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: stretch;
}

.whiteKey {
    background-color: var(--col03);
    border: var(--border);
    border-left: none;
    border-radius: 0 0 0.25rem 0.25rem;
    flex: 1;
    cursor: pointer;
}
.keyboardContainer > .octaveContainer:first-of-type > .whiteKeyContainer > .whiteKey:first-of-type {
    border: var(--border);
}

.blackKeyContainer {
    position: absolute;
    top: 0;
    display: flex;
    height: 55%;
    width: 100%;
    align-items: stretch;
    pointer-events: none;
}

.blackKey {
    margin: 0;
    background-color: var(--col01);
    border: var(--border);
    border-left: none;
    border-radius: 0 0 0.25rem 0.25rem;
    flex: 1;
    cursor: pointer;
    pointer-events: all;
}
.blackKey:nth-of-type(1) {
    border: var(--border);
    width: calc(2rem + 4px);
}
.blackKey:nth-of-type(3) {
    border: var(--border);
    width: calc(2rem + 4px);
}
.blackKeySpacer {
    flex: 0.5;
    opacity: 0;
}

.whiteKey.activeKey {
    background-color: var(--col06);
}
.blackKey.activeKey {
    background-color: var(--col05);
}