// /**
//  * Copyright © BlueskyTechco, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//
//  Variables
//  _____________________________________________
@active-nav-indent: 54px;

//
//  Common
//  _____________________________________________
.lib-main-navigation_mobile_view(
    @_nav__indent-side: 15px,
    @_nav-background-color: @navigation__background,
    @_nav-border: @navigation__border,
    @_nav-level0-font-size: @navigation-level0-item__font-size,
    @_nav-level0-font-weight: @navigation-level0-item__font-weight,
    @_nav-level0-item-line-height: @navigation-level0-item__line-height,
    @_nav-level0-item-margin: @navigation-level0-item__margin,
    @_nav-level0-item-padding: @navigation-level0-item__padding,
    @_nav-level0-text-transform: @navigation-level0-item__text-transform,

    @_nav-level0-item-background-color: @navigation-level0-item__background,
    @_nav-level0-item-border: @navigation-level0-item__border,
    @_nav-level0-item-color: @navigation-level0-item__color,
    @_nav-level0-item-text-decoration: @navigation-level0-item__text-decoration,

    @_nav-level0-item-background-color-active: @navigation-level0-item__active__background,
    @_nav-level0-item__active__border-color: @navigation-level0-item__active__border-color,
    @_nav-level0-item__active__border-style: @navigation-level0-item__active__border-style,
    @_nav-level0-item__active__border-width: @navigation-level0-item__active__border-width,
    @_nav-level0-item-color-active: @navigation-level0-item__active__color,
    @_nav-level0-item-text-decoration-active: @navigation-level0-item__active__text-decoration,

    @_submenu-background-color: @submenu__background,
    @_submenu-border: @submenu__border,
    @_submenu-font-size: @submenu__font-size,
    @_submenu-font-weight: @submenu__font-weight,
    @_submenu-line-height: @submenu-item__line-height,
    @_submenu-item__padding-top: @submenu__padding-top,
    @_submenu-item__padding-right: @submenu__padding-right,
    @_submenu-item__padding-bottom: @submenu__padding-bottom,
    @_submenu-item__padding-left: @submenu__padding-left,

    @_submenu-item-background-color: @submenu-item__background,
    @_submenu-item-border: @submenu-item__border,
    @_submenu-item-color: @submenu-item__color,
    @_submenu-item-text-decoration: @submenu-item__text-decoration,

    @_submenu-item-background-color-active: @submenu-item__active__background,
    @_submenu-item__active__border: @submenu-item__active__border,
    @_submenu-item__active__border-color: @submenu-item__active__border-color,
    @_submenu-item__active__border-style: @submenu-item__active__border-style,
    @_submenu-item__active__border-width: @submenu-item__active__border-width,
    @_submenu-item-color-active: @submenu-item__active__color,
    @_submenu-item-text-decoration-active: @submenu-item__active__text-decoration
) {
    .navigation {
        &.mobile-style{
            .lib-css(background, @_nav-background-color);
            .lib-css(border, @_nav-border);
            box-sizing: border-box;

            ul {
                margin: 0;
                padding: 0;
            }

            li {
                margin: 0;
            }

            a {
                display: block;
                .lib-css(padding-top, @_submenu-item__padding-top);
                .lib-css(padding-right, @_submenu-item__padding-right);
                .lib-css(padding-bottom, @_submenu-item__padding-bottom);
                .lib-css(padding-left, @_submenu-item__padding-left);
            }

            a,
            a:hover {
                .lib-css(color, @_nav-level0-item-color);
                .lib-css(text-decoration, @_nav-level0-item-text-decoration);
            }

            .level0 {
                .lib-css(border-top, @_nav-level0-item-border);
                .lib-font-size(@_nav-level0-font-size);

                > .level-top {
                    .lib-css(background, @_nav-level0-item-background-color);
                    .lib-css(font-weight, @_nav-level0-font-weight);
                    .lib-css(line-height, @_nav-level0-item-line-height);
                    .lib-css(padding, @_nav-level0-item-padding);
                    .lib-css(text-transform, @_nav-level0-text-transform);
                    word-wrap: break-word;
                    .lib-css(color, @_nav-level0-item-color);
                    &:hover {
                        .lib-css(color, @navigation-level0-item__hover__color);
                    }
                }

                &.active {
                    .all-category {
                        .ui-state-focus {
                            .lib-css(background, @_nav-level0-item-background-color-active);
                            .lib-css(border-color, @_nav-level0-item__active__border-color);
                            .lib-css(border-style, @_nav-level0-item__active__border-style);
                            .lib-css(border-width, @_nav-level0-item__active__border-width);
                            .lib-css(color, @_nav-level0-item-color-active);
                            .lib-css(padding-left, @_nav__indent-side - @_submenu-item__active__border);
                            .lib-css(text-decoration, @_nav-level0-item-text-decoration-active);
                            display: inline-block;
                        }
                    }
                }

                > .level1 {
                    .lib-css(font-weight, @font-weight__semibold);
                }

                &.active,
                &.has-active { // ToDo UI: remove "has_active" here, when mobile navigation default open state is implemented
                    > a:not(.ui-state-active) {
                        .lib-css(background, @_nav-level0-item-background-color-active);
                        .lib-css(border-color, @_nav-level0-item__active__border-color);
                        .lib-css(border-style, @_nav-level0-item__active__border-style);
                        .lib-css(border-width, @_nav-level0-item__active__border-width);
                        .lib-css(color, @_nav-level0-item-color-active);
                        .lib-css(text-decoration, @_nav-level0-item-text-decoration-active);

                        span:not(.ui-menu-icon) {
                            .lib-css(margin-left, -@_submenu-item__active__border);
                        }
                    }
                }
            }

            li.level0 {
                &:last-child {
                    .lib-css(border-bottom, @_nav-level0-item-border);
                }
            }

            .submenu {
                > li {
                    word-wrap: break-word;
                    > a {
                        &:hover {
                            .lib-css(color, @navigation-level0-item__hover__color);
                        }
                    }
                }

                &:not(:first-child) {
                    .lib-css(background, @_submenu-background-color);
                    .lib-css(border, @_submenu-border);
                    .lib-css(font-size, @_submenu-font-size);
                    .lib-css(font-weight, @_submenu-font-weight);
                    .lib-css(line-height, @_submenu-line-height);
                    left: auto !important;
                    overflow-x: hidden;
                    padding: 0;
                    position: relative;
                    top: auto !important;
                    transition: left .3s ease-out;

                    > li {
                        > a {
                            .lib-css(padding-left, @_nav__indent-side);
                        }

                        &:last-child {
                            margin-bottom: 0;
                        }
                    }

                    ul {
                        display: block;
                        .lib-css(padding-left, @_submenu-item__padding-left);

                        > li {
                            margin: 0;

                            a {
                                .lib-css(background, @_submenu-item-background-color);
                                .lib-css(border, @_submenu-item-border);
                                .lib-css(color, @_submenu-item-color);
                                .lib-css(text-decoration, @_submenu-item-text-decoration);
                                display: block;
                                line-height: normal;
                                &:hover {
                                    .lib-css(color, @navigation-level0-item__hover__color);
                                }
                            }
                        }
                    }

                    &.expanded {
                        display: block !important;
                        padding-right: 0;
                        top: 0 !important;
                    }

                    .active {
                        > a {
                            .lib-css(background, @_submenu-item-background-color-active);
                            .lib-css(border-color, @_submenu-item__active__border-color);
                            .lib-css(border-style, @_submenu-item__active__border-style);
                            .lib-css(border-width, @_submenu-item__active__border-width);
                            .lib-css(color, @_submenu-item-color-active);
                            .lib-css(padding-left, @_nav__indent-side - @_submenu-item__active__border);
                            .lib-css(text-decoration, @_submenu-item-text-decoration-active);
                        }
                    }

                    .level1 {
                        &.active {
                            > a {
                                .lib-css(padding-left, @_nav__indent-side - @_submenu-item__active__border);
                            }
                        }
                    }
                }
            }
        }
    }
}
& when (@media-common = true) {
    .panel.header {
        .links{
            display: none;
        }
    }

    .nav-sections {
        .lib-css(background, @navigation__background);
        &.mobile-style{
            padding: 0;
            -webkit-overflow-scrolling: touch;
            .lib-css(transition, all .3s, 1);
            height: 100%;
            overflow: auto;
            position: fixed;
            left: -@mobile_navigation_max-width;
            top: 0;
            width: @mobile_navigation_max-width;
            max-width: 100%;
            .parent {
                .level-top {
                    position: relative;
                    .lib-icon-font(
                    @_icon-font-content: @icon-down,
                    @_icon-font-size: 30px,
                    @_icon-font-position: after,
                    @_icon-font-display: block
                    );
                    &:after {
                        position: absolute;
                        right: 10px;
                        top: -1px;
                    }

                    &.ui-state-active {
                        .lib-icon-font-symbol(
                        @_icon-font-content: @icon-up,
                        @_icon-font-position: after
                        );
                    }
                }
            }
            .switcher {
                border-top: 1px solid @border-color__base;
                font-size: 1.6rem;
                font-weight: @font-weight__bold;
                margin: 0;
                padding: .8rem 3.5rem .8rem 2rem;

                .label {
                    display: block;
                    margin-bottom: @indent__xs;
                }

                &:last-child {
                    border-bottom: 1px solid @border-color__base;
                }
            }
            .switcher-trigger {
                strong {
                    position: relative;
                    .lib-icon-font(
                    @_icon-font-content: @icon-down,
                    @_icon-font-size: 30px,
                    @_icon-font-position: after,
                    @_icon-font-display: block
                    );

                    &:after {
                        position: absolute;
                        right: -40px;
                        top: -16px;
                    }
                }

                &.active strong {
                    .lib-icon-font-symbol(
                    @_icon-font-content: @icon-up,
                    @_icon-font-position: after
                    );
                }
            }
            .switcher-dropdown {
                .lib-list-reset-styles();
                display: none;
                padding: @indent__s 0;
            }
            .switcher-options {
                &.active {
                    .switcher-dropdown {
                        display: block;
                    }
                }
            } 
            .header.links {
                .lib-list-reset-styles();
                border-bottom: 1px solid @border-color__base;

                li {
                    font-size: 1.6rem;
                    margin: 0;

                    &.greet.welcome {
                        border-top: 1px solid @border-color__base;
                        font-weight: @font-weight__bold;
                        padding: .8rem @indent__base;
                    }

                    > a {
                        border-top: 1px solid @border-color__base;
                    }
                }

                a,
                a:hover {
                    .lib-css(color, @navigation-level0-item__color);
                    .lib-css(text-decoration, @navigation-level0-item__text-decoration);
                    display: block;
                    font-weight: @font-weight__bold;
                    padding: .8rem @indent__base;
                }

                .header.links {
                    border: 0;
                }
            }
            .nav-sections-items {
                .lib-clearfix();
                position: relative;
                z-index: 1;
            }
            .nav-sections-item-title {
                background: darken(@navigation__background, 5%);
                border: solid @border-color__base;
                border-width: 0 0 1px 1px;
                box-sizing: border-box;
                float: left;
                height: 71px;
                padding-top: 24px;
                text-align: center;
                width: 33.33%;

                &.active {
                    background: transparent;
                    border-bottom: 0;
                }

                .nav-sections-item-switch {
                    &:hover {
                        text-decoration: none;
                    }
                }
            }
            .nav-sections-item-content {
                .lib-clearfix();
                box-sizing: border-box;
                float: right;
                margin-left: -100%;
                margin-top: 71px;
                width: 100%;

                &.active {
                    display: block;
                }

                padding: @indent__m 0;
            }
        }
    }

    .nav-open {
        .nav-toggle {
            &:after {
               opacity: 5;
               visibility: visible;
               pointer-events: auto;
            }
        }
        .nav-sections {
            &.mobile-style{
                @transform: translate3d(@mobile_navigation_max-width,0,0);
                .lib-css(transform, @transform, 1);
                z-index: 99;
            }
        }
    }
    .nav-before-open {
        height: 100%;
        overflow-x: hidden;
        width: 100%;

        .page-wrapper {
            .lib-css(transition, left .3s, 1);
            height: 100%;
            left: 0;
            overflow: hidden;
            position: relative;
        }

        body {
            height: 100%;
            overflow: hidden;
            position: relative;
            width: 100%;
        }
    }
    .nav-toggle {
        .lib-icon-font(
        @icon-menu,
        @_icon-font-size: 28px,
        @_icon-font-color: @header-icons-color,
        @_icon-font-color-hover: @header-icons-color-hover
        );
        .lib-icon-text-hide();
        cursor: pointer;
        display: block;
        font-size: 0;
        left: 15px;
        position: absolute;
        top: 15px;
        z-index: 20;
        &:after {
            background: rgba(0, 0, 0, @overlay__opacity);
            content: '';
            display: block;
            height: 100%;
            position: fixed;
            right: 0;
            top: 0;
            width: 100%;
            z-index: 1;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
    }
    .lib-main-navigation_mobile_view();
    body .navigation{
        ul{
            padding: 0;
        }
    }
    .navigation .level0 > .level-top{
        .lib-css(color, @navigation-level0-item__color);
    }
}

//
//  Mobile
//  _____________________________________________
@mobile_navigation_max-width: 35rem;

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__l) {
    .navigation {
        padding: 0;
        .parent {
            .level-top {
                position: relative;
                .lib-icon-font(
                @_icon-font-content: @icon-down,
                @_icon-font-size: 30px,
                @_icon-font-position: after,
                @_icon-font-display: block
                );

                &:after {
                    position: absolute;
                    right: 10px;
                    top: -1px;
                }

                &.ui-state-active {
                    .lib-icon-font-symbol(
                    @_icon-font-content: @icon-up,
                    @_icon-font-position: after
                    );
                }
            }
        }
    }

    .nav-sections {
        -webkit-overflow-scrolling: touch;
        .lib-css(transition, .3s, 1);
        height: 100%;
        left: -@mobile_navigation_max-width;
        overflow: auto;
        position: fixed;
        top: 0;
        .lib-css(width, @mobile_navigation_max-width);
		max-width: 100%;
        .switcher {
            border-top: 1px solid @border-color__base;
            font-size: 1.6rem;
            font-weight: @font-weight__bold;
            margin: 0;
            padding: .8rem 3.5rem .8rem 2rem;

            .label {
                display: block;
                margin-bottom: @indent__xs;
            }

            &:last-child {
                border-bottom: 1px solid @border-color__base;
            }
        }

        .switcher-trigger {
            strong {
                position: relative;
                .lib-icon-font(
                @_icon-font-content: @icon-down,
                @_icon-font-size: 30px,
                @_icon-font-position: after,
                @_icon-font-display: block
                );

                &:after {
                    position: absolute;
                    right: -40px;
                    top: -16px;
                }
            }

            &.active strong {
                .lib-icon-font-symbol(
                @_icon-font-content: @icon-up,
                @_icon-font-position: after
                );
            }
        }
        .switcher-dropdown {
            .lib-list-reset-styles();
            display: none;
            padding: @indent__s 0;
        }
        .switcher-options {
            &.active {
                .switcher-dropdown {
                    display: block;
                }
            }
        } 
        .header.links {
            .lib-list-reset-styles();
            border-bottom: 1px solid @border-color__base;

            li {
                font-size: 1.6rem;
                margin: 0;

                &.greet.welcome {
                    border-top: 1px solid @border-color__base;
                    font-weight: @font-weight__bold;
                    padding: .8rem @indent__base;
                }

                > a {
                    border-top: 1px solid @border-color__base;
                }
            }

            a,
            a:hover {
                .lib-css(color, @navigation-level0-item__color);
                .lib-css(text-decoration, @navigation-level0-item__text-decoration);
                display: block;
                font-weight: @font-weight__bold;
                padding: .8rem @indent__base;
            }

            .header.links {
                border: 0;
            }
        }
    }
    
    .nav-sections-items {
        .lib-clearfix();
        position: relative;
        z-index: 1;
    }

    .nav-sections-item-title {
        background: darken(@navigation__background, 5%);
        border: solid @border-color__base;
        border-width: 0 0 1px 1px;
        box-sizing: border-box;
        float: left;
        height: 71px;
        padding-top: 24px;
        text-align: center;
        width: 33.33%;

        &.active {
            background: transparent;
            border-bottom: 0;
        }

        .nav-sections-item-switch {
            &:hover {
                text-decoration: none;
            }
        }
    }

    .nav-sections-item-content {
        .lib-clearfix();
        box-sizing: border-box;
        float: right;
        margin-left: -100%;
        margin-top: 71px;
        width: 100%;

        &.active {
            display: block;
        }

        padding: @indent__m 0;
    }
    .nav-open {
        .nav-toggle {
            &:after{
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
            }
        }
        .nav-sections {
            z-index: 99;
            @transform: translate3d(@mobile_navigation_max-width,0,0);
            .lib-css(transform, @transform, 1);
        }
        
    }
    .lib-main-navigation();
}

//
//  Desktop
//  _____________________________________________
.lib-main-navigation-desktop(
    @_nav-background-color: @navigation-desktop__background,
    @_nav-border: @navigation-desktop__border,
    @_nav-font-size: @navigation-desktop__font-size,
    @_nav-font-weight: @navigation-desktop__font-weight,

    @_nav-level0-item-line-height: @navigation-desktop-level0-item__line-height,
    @_nav-level0-item-margin: @navigation-desktop-level0-item__margin,
    @_nav-level0-item-padding: @navigation-desktop-level0-item__padding,

    @_nav-level0-item-background-color: @navigation-desktop-level0-item__background,
    @_nav-level0-item-border: @navigation-desktop-level0-item__border,
    @_nav-level0-item-color: @navigation-desktop-level0-item__color,
    @_nav-level0-item-text-decoration: @navigation-desktop-level0-item__text-decoration,

    @_nav-level0-item-background-color-hover: @navigation-desktop-level0-item__hover__background,
    @_nav-level0-item-border-hover: @navigation-desktop-level0-item__hover__border,
    @_nav-level0-item-color-hover: @navigation-desktop-level0-item__hover__color,
    @_nav-level0-item-text-decoration-hover: @navigation-desktop-level0-item__hover__text-decoration,

    @_nav-level0-item-background-color-active: @navigation-desktop-level0-item__active__background,
    @_nav-level0-item__active__border-color: @navigation-desktop-level0-item__active__border-color,
    @_nav-level0-item__active__border-style: @navigation-desktop-level0-item__active__border-style,
    @_nav-level0-item__active__border-width: @navigation-desktop-level0-item__active__border-width,
    @_nav-level0-item-color-active: @navigation-desktop-level0-item__active__color,
    @_nav-level0-item-text-decoration-active: @navigation-desktop-level0-item__active__text-decoration,

    @_submenu-background-color: @submenu-desktop__background,
    @_submenu-border-width: @submenu-desktop__border-width,
    @_submenu-border-style: @submenu-desktop__border-style,
    @_submenu-border-color: @submenu-desktop__border-color,
    @_submenu-box-shadow: @submenu-desktop__box-shadow,
    @_submenu-font-size: @submenu-desktop__font-size,
    @_submenu-font-weight: @submenu-desktop__font-weight,
    @_submenu-min-width: @submenu-desktop__min-width,
    @_submenu-padding: @submenu-desktop__padding,

    @_submenu-arrow: @submenu-desktop-arrow,
    @_submenu-arrow-size: @submenu-desktop-arrow__size,
    @_submenu-arrow-left: @submenu-desktop-arrow__left,

    @_submenu-item-padding: @submenu-desktop-item__padding,
    @_submenu-item-background-color: @submenu-desktop-item__background,
    @_submenu-item-border: @submenu-desktop-item__border,
    @_submenu-item-color: @submenu-desktop-item__color,
    @_submenu-item-text-decoration: @submenu-desktop-item__text-decoration,

    @_submenu-item__hover__background-color: @submenu-desktop-item__hover__background,
    @_submenu-item-border-hover: @submenu-desktop-item__hover__border,
    @_submenu-item-color-hover: @submenu-desktop-item__hover__color,
    @_submenu-item-text-decoration-hover: @submenu-desktop-item__hover__text-decoration,

    @_submenu-item-background-color-active: @submenu-desktop-item__active__background,
    @_submenu-item__active__border-color: @submenu-desktop-item__active__border-color,
    @_submenu-item__active__border-style: @submenu-desktop-item__active__border-style,
    @_submenu-item__active__border-width: @submenu-desktop-item__active__border-width,
    @_submenu-item-color-active: @submenu-desktop-item__active__color,
    @_submenu-item-text-decoration-active: @submenu-desktop-item__active__text-decoration
) {
    .navigation {
        &:not(.mobile-style){
            .lib-css(background, @_nav-background-color);
            .lib-css(border, @_nav-border);
            .lib-css(font-size, @_nav-font-size);
            .lib-css(font-weight, @_nav-font-weight);
            height: inherit;
            left: auto;
            overflow: inherit;
            padding: 0;
            position: relative;
            top: 0;
            width: 100%;
            z-index: 3;

            &:empty {
                display: none;
            }

            ul {
                margin-top: 0;
                margin-bottom: 0;
                padding: 0;
                position: relative;
            }

            li.level0 {
                .lib-css(border-top, none);
            }

            li.level1 {
                position: relative;
            }

            .level0 {
                .lib-css(margin, @_nav-level0-item-margin);
                display: inline-block;
                position: relative;

                &:last-child {
                    margin-right: 0;
                    padding-right: 0;
                }

                &:hover {
                    &:after {
                        content: '';
                        display: block;
                        position: absolute;
                        top: 0;
                        left: 100%;
                        width: 10px;
                        height: calc(~'100% + 3px');
                        z-index: 1;
                    }
                }

                > .level-top {
                    .lib-css(background, @_nav-level0-item-background-color);
                    .lib-css(border, @_nav-level0-item-border);
                    .lib-css(color, @_nav-level0-item-color);
                    .lib-css(line-height, @_nav-level0-item-line-height);
                    .lib-css(padding, @_nav-level0-item-padding);
                    .lib-css(text-decoration, @_nav-level0-item-text-decoration);
                    box-sizing: border-box;
                    position: relative;
                    display: inline-block;

                    &:hover, &.ui-state-focus {
                        .lib-css(background, @_nav-level0-item-background-color-hover);
                        .lib-css(border, @_nav-level0-item-border-hover);
                        .lib-css(color, @_nav-level0-item-color-hover);
                        .lib-css(text-decoration, @_nav-level0-item-text-decoration-hover);
                    }
                }

                &.active,
                &.has-active {
                    > .level-top {
                        .lib-css(background, @_nav-level0-item-background-color-active);
                        .lib-css(border-color, @_nav-level0-item__active__border-color);
                        .lib-css(border-style, @_nav-level0-item__active__border-style);
                        .lib-css(border-width, @_nav-level0-item__active__border-width);
                        .lib-css(color, @_nav-level0-item-color-active);
                        .lib-css(text-decoration, @_nav-level0-item-text-decoration-active);
                        display: inline-block;
                    }
                }

                &.parent:hover > .submenu {
                    overflow: visible !important;
                }

                &.parent {
                    > .level-top {
                        padding-right: 20px;

                        > .ui-menu-icon {
                            position: absolute;
                            right: 0;

                            .lib-icon-font(
                                @icon-down,
                                @_icon-font-size: 12px,
                                @_icon-font-line-height: 20px,
                                @_icon-font-text-hide: true,
                                @_icon-font-position: after
                            );
                        }
                    }
                }

                .submenu {
                    .lib-css(background, @_submenu-background-color);
                    .lib-css(border, @_submenu-border-width @_submenu-border-style @_submenu-border-color);
                    .lib-css(box-shadow, @_submenu-box-shadow);
                    .lib-css(font-size, @_submenu-font-size);
                    .lib-css(font-weight, @_submenu-font-weight);
                    .lib-css(min-width, @_submenu-min-width);
                    .lib-css(padding, @_submenu-padding);
                    display: none;
                    left: 0;
                    margin: 0 !important;
                    position: absolute;
                    z-index: 1;

                    ._lib-submenu-arrow(
                        @_submenu-arrow,
                        @_bg: @_submenu-background-color,
                        @_border: @_submenu-border-color,
                        @_size: @_submenu-arrow-size,
                        @_left: @_submenu-arrow-left
                    );

                    &:before {
                        content: '';
                        display: block;
                        position: absolute;
                        width: 100%;
                        height: 4px;
                        left: 0;
                        top: -4px;
                        z-index: 1;
                    }

                    a {
                        display: block;
                        line-height: inherit;
                        .lib-css(background, @_submenu-item-background-color);
                        .lib-css(border, @_submenu-item-border);
                        .lib-css(color, @_submenu-item-color);
                        .lib-css(padding, @_submenu-item-padding);
                        .lib-css(text-decoration, @_submenu-item-text-decoration);

                        &:hover,
                        &.ui-state-focus {
                            .lib-css(background, @_submenu-item__hover__background-color);
                            .lib-css(border, @_submenu-item-border-hover);
                            .lib-css(color, @_submenu-item-color-hover);
                            .lib-css(text-decoration, @_submenu-item-text-decoration-hover);
                        }
                    }

                    .active > a {
                        .lib-css(background, @_submenu-item-background-color-active);
                        .lib-css(border-color, @_submenu-item__active__border-color);
                        .lib-css(border-style, @_submenu-item__active__border-style);
                        .lib-css(border-width, @_submenu-item__active__border-width);
                        .lib-css(color, @_submenu-item-color-active);
                        .lib-css(text-decoration, @_submenu-item-text-decoration-active);
                    }

                    .submenu {
                        top: -1px !important;
                        left: 100% !important;
                    }

                    .submenu-reverse{
                        left: auto !important;
                        right: 100%;
                    }

                    li {
                        margin: 0;
                        position: relative;
                        
                        &.parent {
                            > a {
                                > .ui-menu-icon {
                                    position: absolute;
                                    right: 3px;

                                    .lib-icon-font(
                                        @icon-next,
                                        @_icon-font-size: 12px,
                                        @_icon-font-line-height: 20px,
                                        @_icon-font-text-hide: true,
                                        @_icon-font-position: after
                                    );
                                }
                            }
                        }
                    }
                }

                &.more {
                    position: relative;
                    .lib-icon-font(
                        @icon-pointer-down,
                        @_icon-font-size: 26px,
                        @_icon-font-position: after
                    );

                    &:before {
                        display: none;
                    }

                    &:after {
                        cursor: pointer;
                        padding: 8px 12px;
                        position: relative;
                        z-index: 1;
                    }

                    &:hover > .submenu {
                        overflow: visible !important;
                    }

                    li {
                        display: block;
                    }
                }
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    .navigation{
        &:not(.mobile-style){
            .nav-toggle {
                display: none;
            }

            &.nav-sections {
                .lib-vendor-prefix-flex-shrink(0);
                .lib-vendor-prefix-flex-basis(auto);
            }

            .nav-sections-item-title {
                display: none;
            }

            .nav-sections-item-content {
                display: block !important;
            }

            .nav-sections-item-content > * {
                display: none;
            }

            .nav-sections-item-content {
                > .navigation {
                    display: block;
                }
            }
        }
    }
    .lib-main-navigation-desktop();
}