@import "_colors";

h1.regionHeader{
    margin-bottom:0px;
    padding-bottom:5px;

    @media screen and (max-width:1000px){
        text-align:center;
        
    }

    @media screen and (max-width:600px){
        font-size:22px;
    }
}

#regionMenu{
    position:relative; 
    z-index:0;
    border-top:1px solid #ececec;
    .arrowLeft, .arrowRight{
        color:#000;
        width:30px;
        height:100%;
        position:absolute;
        top:0px;
        z-index:2;
        background-color:#f5f5f5;
        display:none;
        justify-content: center;
        align-items: center;
        cursor:pointer;

        &.show{
            display:flex;
        }

        svg{
            width:20px;
        }
        
    }

    .arrowLeft{
        left:0px;
        &::after{
            content:'';
            display:block;
            width:1px;
            height:100%;
            top:0px;
            right:0px;
            background-color:#ececec;
            position:absolute;
        }
    }

    .arrowRight{
        right:0px;
        &::after{
            content:'';
            position:absolute;
            display:block;
            width:1px;
            height:100%;
            top:0px;
            left:0px;
            background-color:#ececec;
        }
    }
    ul.scroller{
        display:grid;
        grid-auto-flow:column;
        margin:0px;
        padding:0px;
        overflow-x:auto;

        -ms-overflow-style: none;
        scrollbar-width: none;

        &::-webkit-scrollbar{
            display:none;
        }
        li{
            white-space:nowrap;
            list-style:none;
            padding:10px;
            padding-left:15px;
            padding-right:15px;
            margin:0px;
            margin-left:0px;
            margin-right:0px;
            position:relative;


            a{
                display:block;
                text-align:center;
                color:$color_purple;
            }

            &::after{
                content:'|';
                font-weight:normal;
                color:#ccc;
                position:absolute;
                left:100%;
                top:10px;
            }

            &:last-child::after{
                display:none;
            }


        }
    }
}