/* this block modifies multiple menus in order to display them as a scrollable section with a fade-out gradient */

.dm-scrollableList {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.dm-scrollableList > LI {
    white-space: nowrap;
}

.dm-scrollableList::-webkit-scrollbar {
    display: none;
}

.dm-scrollableList::after {
    content: "";
    display: block;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 50%, rgba(255,255,255,1) 100%);
    width: 2rem;
    height: calc(100% - 2px);
    position: absolute;
    right: 0;
    top: 1px;
    bottom: 1px;
    pointer-events: none;
}

.dm-scrollableList::before {
    content: "";
    display: block;
    background: linear-gradient(-90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 50%, rgb(255 255 255) 100%);
    width: 1.5rem;
    height: calc(100% - 1px);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    bottom: 1px;
    pointer-events: none;
}

/* Size: breakpoint-M */
@media (min-width: 768px) {
    .dm-scrollableList {
        flex-wrap: wrap;
    }
}