/*
GPRO CSS: Horizontal Scroll Menu
Description: Keeps a Divi menu on one horizontal line at all widths, scrollable on overflow with scroll-hint arrows. Pairs with the Menu Scroll JS module.
Classes: .gpro-horizontal-scroll-menu
Version: 1.0
Order: 20
*/

/* Add .gpro-horizontal-scroll-menu to a Divi Menu module.
   Requires the "Menu Scroll" JS module for the arrow controls. */

/* Display the desktop menu on all devices */
.gpro-horizontal-scroll-menu .et_pb_menu__menu {
    display: block !important;
}
/* Hide the mobile menu */
.gpro-horizontal-scroll-menu .et_mobile_nav_menu {
    display: none !important;
}
@media screen and (max-width: 980px) {
    .gpro-horizontal-scroll-menu .et_pb_menu__menu {
        width: 100%;
    }
    .gpro-horizontal-scroll-menu .et_pb_menu__wrap {
        overflow: auto;
    }
    .gpro-horizontal-scroll-menu .et_pb_menu__menu ul.et-menu {
        white-space: nowrap !important;
        flex-wrap:   nowrap !important;
        margin:      0 auto;
    }
}
/* Hide scrollbar — Firefox, IE, Edge */
.gpro-horizontal-scroll-menu .et_pb_menu__wrap {
    -ms-overflow-style: none;
    scrollbar-width:    none;
}
/* Hide scrollbar — Chrome, Safari, Opera */
.gpro-horizontal-scroll-menu .et_pb_menu__wrap::-webkit-scrollbar {
    display: none;
}

/* --- Horizontal scroll arrows --- */

.gpro-horizontal-scroll-menu {
    position: relative;
}
.gpro-horizontal-scroll-menu .et_pb_menu__wrap {
    overflow:        auto;
    scroll-behavior: smooth;
    margin:          0;
}
/* Margin only when arrow is visible */
.gpro-horizontal-scroll-menu.can-scroll-left .et_pb_menu__wrap {
    margin-left: 35px;
}
.gpro-horizontal-scroll-menu.can-scroll-right .et_pb_menu__wrap {
    margin-right: 35px;
}
/* Arrows */
.gpro-horizontal-scroll-menu .scroll-hint {
    position:       absolute;
    top:            0;
    bottom:         0;
    width:          48px;
    display:        flex;
    align-items:    center;
    justify-content: center;
    opacity:        0;
    visibility:     hidden;
    pointer-events: none;
    z-index:        5;
    transition:     opacity .25s ease, visibility .25s ease;
    border:         0;
    background:     none;
    cursor:         pointer;
    color:          var(--menu-fg, #222);
    transform:      translateY(-1px);
}
.gpro-horizontal-scroll-menu .scroll-hint--left {
    left:      0;
    transform: translateY(-1px);
}
.gpro-horizontal-scroll-menu .scroll-hint--right {
    right:     0;
    transform: translateY(-1px);
}
/* Show arrows only when needed */
.gpro-horizontal-scroll-menu.can-scroll-left  .scroll-hint--left,
.gpro-horizontal-scroll-menu.can-scroll-right .scroll-hint--right {
    opacity:        1;
    visibility:     visible;
    pointer-events: auto;
}
.gpro-horizontal-scroll-menu .scroll-hint .arrow {
    font-size:   28px;
    line-height: 1;
    user-select: none;
}
.gpro-horizontal-scroll-menu .et_pb_menu__wrap {
    touch-action: pan-x;
}