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

//
//  Navigation
//  _____________________________________________

.lib-main-navigation(@_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 {
        .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 {

                display: block;
                .lib-css(color, #575757);
                .lib-css(font-size, 14px);
                .lib-css(padding, 10px 15px 10px);

                &: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__regular);
            }

            &.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);
                        }
                    }
                }
            }
        }
    }
}

//
//  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 {
        .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 {
                a {
                    .lib-css(font-size, @_nav-font-size);
                }
            }
        }

        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, #222);
                .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(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, @theme-text-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;

                    a {
                        font-size: 13px;
                    }

                    &:not(:last-child) {
                        a {
                            border-bottom: 1px solid #eee;
                        }
                    }

                    &.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;
                }
            }
        }
    }
}

//  Submenu arrow
._lib-submenu-arrow(@_submenu-arrow,
    @_bg,
    @_border,
    @_size,
    @_left) when (@_submenu-arrow =true) {
    & when (iscolor(@_bg)) and (iscolor(@_border)) {
        @_outer-size: @_size +1;
        @_outer-left: @_left - 1;
        .lib-css(margin-top, @_outer-size);

        >ul {
            .lib-css(margin-top, @_outer-size);

            &:before,
            &:after {
                content: '';
                display: block;
                overflow: hidden;
                position: absolute;
            }

            &:before {
                .lib-css(color, @_bg);
                .lib-css(left, @_left);
                .lib-css(top, -@_size*2);
                .lib-arrow(up, @_size, @_bg);
                z-index: 4;
            }

            &:after {
                .lib-arrow(up, @_outer-size, @_border);
                .lib-css(color, @_border);
                .lib-css(left, @_outer-left);
                .lib-css(top, -@_outer-size*2);
                z-index: 3;
            }
        }
    }

    & when (iscolor(@_bg)) and not (iscolor(@_border)) {
        .lib-css(margin-top, -@_size);

        >ul {
            .lib-css(margin-top, @_size);

            &:before {
                .lib-arrow(up, @_size, @_bg);
                .lib-css(color, @_bg);
                .lib-css(left, @_left);
                .lib-css(top, -@_size*2);
                content: '';
                display: block;
                overflow: hidden;
                position: absolute;
                z-index: 4;
            }
        }
    }

    & when (iscolor(@_border)) and not (iscolor(@_bg)) {
        .lib-css(margin-top, -@_size);

        >ul {
            .lib-css(margin-top, @_size);

            &:before {
                .lib-arrow(up, @_size, @_border);
                .lib-css(color, @_border);
                .lib-css(left, @_left);
                .lib-css(top, -@_size*2);
                content: '';
                display: block;
                overflow: hidden;
                position: absolute;
                z-index: 4;
            }
        }
    }
}