/* Keep the four side buttons in place while their icons respond to a press. */
.menu-container-fixed .menu-button-container:not(#menuBottom) {
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    transition: background-color 150ms ease, box-shadow 150ms ease;
}

.menu-container-fixed .menu-button-container:not(#menuBottom) > svg,
.menu-container-fixed .menu-button-container:not(#menuBottom) > img,
.menu-container-fixed .menu-button-container:not(#menuBottom) > .bcntf-icon-wrap {
    transition: transform 150ms ease;
}

.menu-container-fixed .menu-button-container:not(#menuBottom):active {
    background-color: rgba(255, 192, 55, 0.24);
    box-shadow: inset 0 0 0 1px rgba(255, 192, 55, 0.55);
    transition-duration: 60ms;
}

.menu-container-fixed .menu-button-container:not(#menuBottom):active > svg,
.menu-container-fixed .menu-button-container:not(#menuBottom):active > img,
.menu-container-fixed .menu-button-container:not(#menuBottom):active > .bcntf-icon-wrap {
    transform: scale(0.88);
    transition-duration: 60ms;
}

@media (prefers-reduced-motion: reduce) {
    .menu-container-fixed .menu-button-container:not(#menuBottom),
    .menu-container-fixed .menu-button-container:not(#menuBottom) > svg,
    .menu-container-fixed .menu-button-container:not(#menuBottom) > img,
    .menu-container-fixed .menu-button-container:not(#menuBottom) > .bcntf-icon-wrap {
        transition: none;
    }
    .menu-container-fixed .menu-button-container:not(#menuBottom):active > svg,
    .menu-container-fixed .menu-button-container:not(#menuBottom):active > img,
    .menu-container-fixed .menu-button-container:not(#menuBottom):active > .bcntf-icon-wrap {
        transform: none;
    }
}