buttonBar.module.css

:root {
    --button-bar-button-size: 4em;
    --button-bar-active-color: rgba(0, 0, 0, 0.25);
    --button-bar-disabled-opacity: 0.25;
    --button-bar-image-size: 2em;
}

.button-bar {
    display: inline-flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-content: center;
    align-items: center;
    box-sizing: border-box;
    margin: var(--spacing);
    border-radius: var(--rounding);
    box-shadow: var(--shadow);
    padding: 0;
    background: var(--app-background-color);
}

.button-bar button {
    flex: 1 1 var(--button-bar-button-size);
    border: none;
    border-radius: 0;
    padding: var(--spacing);
    height: 100%;
    min-width: 0;
    max-height: var(--button-bar-button-size);
    background: rgba(0, 0, 0, 0);
    text-align: center;
}
.button-bar button:first-of-type {
    border-top-left-radius: var(--rounding);
    border-bottom-left-radius: var(--rounding);
}
.button-bar button:last-of-type {
    border-top-right-radius: var(--rounding);
    border-bottom-right-radius: var(--rounding);
}
.button-bar button:disabled {
    opacity: var(--button-bar-disabled-opacity);
}
.button-bar button:active:not(:disabled) {
    background: var(--button-bar-active-color);
}

.button-bar button img {
    height: var(--button-bar-image-size);
}