/*------------------------------------------------------------------

  Navbar

-------------------------------------------------------------------*/
.navbar-youplay {
    border: none;
    min-height: $navbar-sm-height;
    background: rgba($back_darken_color, 0.4);
    -webkit-transition: .3s background ease;
    transition: .3s background ease;

    a {
        text-decoration: none;
    }

    // height
    .navbar-brand {
        display: block;
        height: $navbar-height;
        line-height: $navbar-height;
        margin-left: 15px;
        -webkit-transition: .3s ease;
        transition: .3s ease;

        @media #{$media-xs} {
            float: none;
            margin: 0 auto;
        }
    }
    .navbar-nav > li > a {
        height: $navbar-height;
        padding: $navbar-height/3.3 0;
        -webkit-transition: .3s ease;
        transition: .3s ease;
    }

    // labels
    .navbar-nav > li > a > .label {
        display: block;
        padding: 0;
        text-transform: none;
        color: $text_mute_color;
        -webkit-transition: .3s ease;
        transition: .3s ease;
        text-align: left;
        
        &:before {
            content: none;
        }
    }
    .navbar-nav > li > a:hover > .label,
    .navbar-nav > li > a:focus > .label {
        color: $text_color;
    }

    // brand image
    .navbar-brand {
        padding: 0;
        width: 160px;
    }
    .navbar-brand img {
        display: inline-block;
        max-width: 100%;
    }

    // menu items
    .navbar-nav > li > a,
    .navbar-nav > li > a:hover,
    .navbar-nav > li > a:focus {
        color: $text_color;
    }
    .navbar-nav > li > a {
        text-transform: uppercase;
    }
    .navbar-nav > li {
        margin-left: 30px;
    }

    // active/open menu items colors change
    .navbar-nav > .active > a,
    .navbar-nav > .active > a:focus,
    .navbar-nav > .active > a:hover,
    .navbar-nav > .open > a,
    .navbar-nav > .open > a:focus,
    .navbar-nav > .open > a:hover {
        color: $text_color;
        background: none;
    }

    // active menu items decoration
    .navbar-nav > .active > a,
    .navbar-nav > .active > a:focus,
    .navbar-nav > .active > a:hover {
        &:after {
            content: '';
            position: absolute;
            background: $text_color;
            height: 3px;
            bottom: 0;
            left: 0;
            right: 0;
        }
    }

    // dropdown
    .navbar-nav > li > .dropdown-menu,
    .dropdown-menu {
        border: none;
        border-radius: 5px;

        // change default colors
        background: $back_darken_color;
        background: rgba($back_darken_color, 0.8);

        > ul {
            display: block;
            list-style: none;
            float: left;
            margin: 0;
            padding: 0;
            min-width: 160px;

            > li > a {
                position: relative;
                display: block;
                color: $text_color;
                padding: 10px 25px;

                // submenu items decoration
                &:after {
                    content: '';
                    display: block;
                    width: 0;
                    height: 1px;
                    background: $text_color;
                    -webkit-transition: .3s width ease;
                    transition: .3s width ease;
                }
            }
            > li > a:focus,
            > li > a:hover,
            > li.active > a {
                &:after {
                    width: 100%;
                }
            }
            
            // divider
            .divider {
                background: rgba($text_color, 0.15);
            }
        }
    }

    // dropdown on hover
    .dropdown-hover > .dropdown-menu {
        display: block;
        visibility: hidden;
        opacity: 0;
        transform: translateY(10px);
        -webkit-transition: .2s visibility ease, .2s opacity ease, .2s -webkit-transform ease, .2s transform ease;
        transition: .2s visibility ease, .2s opacity ease, .2s -webkit-transform ease, .2s transform ease;
    }
    .dropdown-hover:hover > .dropdown-menu {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    // dropdown top offset
    .navbar-nav > li > .dropdown-menu {
        margin-top: 15px;

        // fix on hover gap
        &:before {
            content: '';
            position: absolute;
            left: 0;
            top: -15px;
            width: 100%;
            height: 15px;
        }
    }

    // arrow for first dropdown
    .dropdown > .dropdown-menu:after {
        content: " ";
        position: absolute;
        pointer-events: none;
        border: solid transparent;
        bottom: 100%;
        left: 20px;
        height: 0;
        width: 0;
        border-bottom-color: rgba($back_darken_color, 0.8);
        border-width: 10px;
        margin-right: -10px;
    }
    .navbar-right .dropdown > .dropdown-menu:after {
        margin-right: 0;
        margin-left: -10px;
        right: 20px;
        left: auto;
    }

    // small navbar size
    &.navbar-small {
        background: $back_darken_color;
        background: rgba($back_darken_color, 0.94);

        .navbar-brand {
            height: $navbar-sm-height;
            line-height: $navbar-sm-height;
        }
        .navbar-nav > li > a {
            height: $navbar-sm-height;
            padding: $navbar-sm-height/3.3 0;

            > .label {
              display: none;
            }
        }
        .navbar-brand {
            width: 110px;
        }
    }

    // toggle button
    .navbar-toggle,
    .navbar-toggle:hover,
    .navbar-toggle:focus {
        border: none;
        background: none;

        .icon-bar {
            width: 30px;
            background: $text_color;
        }
        .icon-bar + .icon-bar {
            margin-top: 7px;
        }
    }
    .navbar-toggle {
        margin-top: 20px;
        -webkit-transition: .3s margin-top ease;
        transition: .3s margin-top ease;
    }
    &.navbar-small .navbar-toggle {
        margin-top: 8px;
    }


    // navbar collapse
    @media #{$media-xs} {
        .navbar-collapse {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            width: 100%;
            margin: 0;
            padding-top: $navbar-height;
            overflow-y: auto;
            max-height: 100%;
            border: none;
            background: $back_darken_color;
            -webkit-transition: .3s padding-top ease, .3s left ease;
            transition: .3s padding-top ease, .3s left ease;

            &.collapse {
                display: block;
                left: 100%;
            }

            .navbar-nav {
                margin: 0;
            }

            // menu items
            .navbar-nav > li {
                margin-left: 0;
            }
            .navbar-nav > li > a {
                margin: 0 10px;
                padding: $navbar-sm-height/3.3 0;
                height: $navbar-sm-height;

                .label {
                    display: none;
                }
            }
            
            .dropdown-submenu > .dropdown-menu,
            .dropdown-hover > .dropdown-menu {
                opacity: 1;
                visibility: visible;
                -webkit-transform: none;
                transform: none;

                &:after {
                    content: none;
                }
            }

            // dropdown menu
            .open .dropdown-menu > li > a {
                color: $text_mute_color;

                &:hover,
                &:focus {
                    color: $text_color;
                }
            }
            .navbar-nav > li > .dropdown-menu,
            .navbar-nav > li > .dropdown-menu > ul {
                position: relative;
                margin: 0;
                width: 100% !important;
                float: none;
            }
            .navbar-nav > li {
                clear: both;
            }
            .dropdown-submenu > .dropdown-menu,
            .dropdown-submenu > .dropdown-menu > ul {
                position: relative;
                left: auto;
                right: auto;
                width: 100% !important;
                padding-left: 25px;
                margin: 0;

                &:before, &:after {
                    content: none;
                }
            }
        }
        
        // small navbar
        &.navbar-small .navbar-collapse {
            padding-top: $navbar-sm-height;
        }

        // header over collapse
        .navbar-header {
            position: relative;
            z-index: 1;
        }

        // remove shadows
        .dropdown-menu {
            box-shadow: none;
        }
    }
}


/*
 * bootstrap dropdown submenus
 * from http://www.bootply.com/86684
 */
.dropdown-submenu {
    position:relative;

    > .dropdown-menu {
        top:0;
        left:100%;
        margin-top:-3px;
        border-radius: 6px;
        margin-left: 15px;
    
        // arrow
        &:after {
            content: " ";
            position: absolute;
            pointer-events: none;
            border: solid transparent;
            right: 100%;
            top: 15px;
            height: 0;
            width: 0;
            border-right-color: rgba($back_darken_color, 0.94);
            border-width: 10px;
        }

        // fix gap
        &:before {
            content: '';
            position: absolute;
            left: -15px;
            top: 0;
            width: 15px;
            height: 100%;
        }
    }
    > .dropdown-menu {
        display: block;
        visibility: hidden;
        opacity: 0;
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
        -webkit-transition: .2s visibility ease, .2s opacity ease, .2s -webkit-transform ease, .2s transform ease;
        transition: .2s visibility ease, .2s opacity ease, .2s -webkit-transform ease, .2s transform ease;
    }
    &:hover > .dropdown-menu {
        visibility: visible;
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    // arrow
    > a:before {
        display:block;
        content:" ";
        float:right;
        width:0;
        height:0;
        border-color:transparent;
        border-style:solid;
        border-width: 5px;
        border-left-color:$text_color;
        margin-top:5px;
        margin-right:-10px;
    }
    &:hover > a:before {
        border-left-color:$text_color;
    }

    // left drop
    &.pull-left {
        float:none !important;
        
        // change arrow direction
        > a:before {
            border-color:transparent;
            border-right-color:$text_color;
        }

        > .dropdown-menu {
            left:auto;
            right:100%;
            margin-left: 0;
            margin-right: 15px;
        
            // arrow
            &:after {
                left: 100%;
                right: auto;
                border: solid transparent;
                border-left-color: rgba($back_darken_color, 0.94);
                border-width: 10px;
            }

            // fix gap
            &:before {
                left: auto;
                right: -15px;
                top: 0;
            }
        }
    }
}



/*
 * Shopping Cart
 */ 
.navbar-youplay .dropdown-cart {
    .dropdown-menu {
        width: 260px;
        padding-top: 1rem;
    }
    .youplay-side-news {
        padding-left: 2rem;
        padding-right: 1rem;
    }
    h4 a {
        text-decoration: underline;
    }
}