/*
Menu scroller
==================================
Some styling rules can also be found in the hacks.less!
*/
.js--menu-scroller {
    position: relative;
}

.navigation--list-wrapper {
    position: relative;
    overflow: hidden;
}

.js--menu-scroller--list {
    max-width: none;
    overflow-x: scroll;
    position: relative;
    white-space: nowrap;
    left: 0;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
        display: none;
    }
}

.js--menu-scroller--arrow {
    .unitize-width(22);
    .unitize-height(37);
    .unitize(line-height, 36);
    .unitize(font-size, 12);
    .linear-gradient(@btn-default-top-bg, @btn-default-bottom-bg);
    .unitize(top, 1);
    border: 1px solid @btn-default-border-color;
    position: absolute;
    font-family: @sw-icon-fontname;
    text-align: center;
    color: @btn-default-text-color;
    cursor: pointer;
    z-index: @zindex-menu-scroller-arrow;
    display: none;

    &:hover,
    &:active {
        color: @btn-default-hover-text-color;
        border-color: @btn-default-hover-border-color;
        background: @btn-default-hover-bg;
    }

    &.left--arrow {
        .border-radius-multi(0, 3px, 3px, 0);
        border-left: 0 none;
        left: 0;
    }

    &.right--arrow {
        .border-radius-multi(3px, 0, 0, 3px);
        border-right: 0 none;
        right: 0;
    }
}

@media screen and(min-width: @desktopViewportWidth) {
    .js--menu-scroller--arrow {
        &.left--arrow {
            .border-radius();
            border: 1px solid @btn-default-border-color;
            left: 0;

            &:hover {
                border-color: @btn-default-hover-border-color;
            }
        }

        &.right--arrow {
            .border-radius();
            border: 1px solid @btn-default-border-color;
            right: 0;

            &:hover {
                border-color: @btn-default-hover-border-color;
            }
        }
    }
}