/* The module band is a normal scrolling list; the controls enhance it when JavaScript is available. */
.modules-navigation { position: relative; height: 100px; }
.modules-navigation-viewport { height: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
.modules-navigation-viewport::-webkit-scrollbar { display: none; }
.modules-navigation.is-enhanced .modules-navigation-viewport { margin: 0 36px; }
.modules-navigation .modules-navigation-list { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; }
.modules-navigation-list > li { flex: 0 0 100px; width: 100px; height: 100px; margin: 0; padding: 0; }
.modules-navigation-list a,
.modules-navigation-list img { display: block; width: 100px; height: 100px; }
.modules-navigation-list img { user-select: none; }
.modules-navigation a:focus-visible,
.modules-navigation-viewport:focus-visible,
.modules-navigation-control:focus-visible { outline: 3px solid #ffcf27; outline-offset: -3px; border-radius: 4px; }
.modules-navigation-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    color: #fff;
    background: rgba(0, 0, 0, .65);
}
.modules-navigation-control[hidden] { display: none; }
.modules-navigation-previous { left: 0; }
.modules-navigation-next { right: 0; }
.modules-navigation-control:hover:not(:disabled) { background: rgba(0, 0, 0, .8); }
.modules-navigation-control:disabled { opacity: .35; cursor: default; }
@media (any-pointer: fine) {
    .modules-navigation.is-enhanced .modules-navigation-viewport { cursor: grab; }
    .modules-navigation.is-enhanced a { cursor: inherit; }
    .modules-navigation.is-dragging .modules-navigation-viewport { cursor: grabbing; user-select: none; }
}