// -----------------------------------------------------------------------------
// Contains all styles related to the Wbsite settings Navigation section
// -----------------------------------------------------------------------------

.navigation-shadow() when (@layout-header-navigation-shadow = True) {
	box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.175);
}

.mega-menu-separation-lines() when (@layout-header-separation-lines = True) {
    border-right: 1px @gray solid;
}

.mega-menu-center-alignment() when (@layout-header-content-alignment = "center") {
    .menu__item--mega {
        text-align: center;
    }

    .mega-menu__list-image {
        margin-left: auto;
        margin-right: auto;
    }

    .mega-menu__header-container {
        text-align: center;
    }
}

.is-dropdown-mixin() when not (@layout-header-navigation-height = none) and not (@layout-header-navigation-font-font-size = none) {   
    line-height: unit((@layout-header-navigation-font-line-height + 1), em); 
}

.is-dropdown-mixin() when not (@layout-header-navigation-height = 0) {   
	line-height: unit((@layout-header-navigation-height + 14), px); 
}

.is-mega-mixin() when not (@layout-header-navigation-height = none) and not (@layout-header-navigation-font-font-size = none) {   
    line-height: unit((@layout-header-navigation-height + @layout-header-navigation-font-font-size), px); 
}

.mega-menu-show-only-headers() when (@layout-header-show-only-headers = True) {
    .mega-menu__grid.dw-mod {
        margin: @reflex-cell-spacing-lg 0;
    }

    .mega-menu__list-wrap.dw-mod {
        margin-bottom: 0;
    }
}

.menu__item--top-level-mixin() when not (@layout-header-navigation-background-color = none) { 
    border-top: @menu-item-padding-size solid transparent;
    border-bottom: @menu-item-padding-size solid transparent;
}

.menu__item--top-level-mixin() when (@layout-header-navigation-active-design = "box") { 
    padding: 0 @reflex-cell-spacing-md;
}

.menu__item--top--active-mixin() when (@layout-header-navigation-active-design = "line") { 
    .border-bottom-color(@layout-header-navigation-active-font-color);
    .color(@layout-header-navigation-active-font-color);

    &::before,
    &::after { 
        .color(@layout-header-navigation-active-font-color);
    }

    .menu__link {
        .color(@layout-header-navigation-active-font-color);
    }
}  

.menu__item--top--active-mixin() when (@layout-header-navigation-active-design = "box") { 
    .border-bottom-color(@layout-header-navigation-active-background-color);
    .border-top-color(@layout-header-navigation-active-background-color);
    .background-color(@layout-header-navigation-active-background-color);
    .color(@layout-header-navigation-active-font-color);

    &::before,
    &::after { 
        .color(@layout-header-navigation-active-font-color);
    }

    .menu__link {
        .color(@layout-header-navigation-active-font-color);
    }
}  

.menu__item--top--active-mixin() when (@layout-header-navigation-active-design = "font-color") { 
    .border-top(@menu-item-padding-size, solid, @layout-header-navigation-background-color);
    .border-bottom(@menu-item-padding-size, solid, @layout-header-navigation-background-color);
    .color(@layout-header-navigation-active-font-color);

    &::before,
    &::after { 
        .color(@layout-header-navigation-active-font-color);
    }

    .menu__link {
        .color(@layout-header-navigation-active-font-color);
    }
}   

.menu__item--top--active-mixin() when (@layout-header-navigation-active-design = "arrow") { 
    .border-top(@menu-item-padding-size, solid, @layout-header-navigation-background-color);
    .border-bottom(@menu-item-padding-size, solid, @layout-header-navigation-background-color);
    .color(@layout-header-navigation-active-font-color);

    &::before,
    &::after { 
        display: none;
    }

    .menu__link {
        .color(@layout-header-navigation-active-font-color);
        position: relative;

        &::after {
            position: absolute;
            content: "";
            width: 0; 
            height: 0; 
            border-left: @menu-item-padding-size*2 solid transparent;
            border-right: @menu-item-padding-size*2 solid transparent;
            .border-bottom(@menu-item-padding-size*2, solid, @layout-header-navigation-active-font-color);
            bottom: -@menu-item-padding-size;
            left: 50%;
            margin-left: -@menu-item-padding-size*2;
        }
    }
}  

.menu__item--top--mixin() when (@layout-header-navigation-active-design = "arrow") { 
    &::before,
    &::after { 
        display: none;
    }
} 

.menu__item--top--mixin() when not (@layout-header-navigation-space-between = none) {
    &:not(.menu__item--icon) {
        padding: 0 unit(@layout-header-navigation-space-between, px); 
    }  
    
    &:first-of-type {
        padding-left: 0;
    }    
}                                


//Main navigation
.main-navigation.dw-mod {
   .background-color(@layout-header-navigation-background-color);
   .navigation-shadow();
}

.main-navigation-mobile.dw-mod {
    .background-color(@layout-mobile-top-background-color);
    .navigation-shadow();
   
    .menu__link.dw-mod {
        .color(@layout-mobile-top-font-color);
    }
}

//Dropdown 
.menu--dropdown.dw-mod, 
.menu--dropleft.dw-mod {
    .background-color(@layout-header-dropdown-background-color);

    .menu-dropdown__link.dw-mod {
        .color(@layout-header-dropdown-font-color);
        .font-size(@layout-header-navigation-font-font-size, px);
    }

    & > .menu__item:after {
        .color(@layout-header-dropdown-font-color);
    } 
}

.is-dropdown.dw-mod::after {
    .color(@layout-header-navigation-font-font-color);
    .font-size(@layout-header-navigation-font-font-size, px);
    .is-dropdown-mixin();
}

.menu-dropdown__item.dw-mod {
    .color(@layout-header-dropdown-font-color);
    .font-size(@layout-header-navigation-font-font-size, px);
}

.menu-dropdown__link.dw-mod,
.menu--dropdown .list__link.dw-mod {
    .color(@layout-header-dropdown-font-color);
    .font-size(@layout-header-navigation-font-font-size, px);
    .font-family(@layout-header-navigation-font-font-family-family);
}

.menu--dropdown.dw-mod .menu__item:hover, 
.menu--dropleft.dw-mod .menu__item:hover,
.mega-menu.dw-mod .menu__item--mega:hover {
    .background-color(@layout-header-dropdown-active-color);

    &::after {
        .color(@layout-header-dropdown-active-font-color);
    }

    & > .menu-dropdown__link.dw-mod {
	    .color(@layout-header-dropdown-active-font-color);
        .background-color(@layout-header-dropdown-active-color);
    }

    & > .mega-menu__link.dw-mod {
	    .color(@layout-header-dropdown-active-font-color);
        .background-color(@layout-header-dropdown-active-color);
    }
} 

//Mega menu
.mega-menu.dw-mod {
    .background-color(@layout-header-dropdown-background-color);
    .mega-menu-mixin();
    .mega-menu-center-alignment();
    .mega-menu-show-only-headers();
}

.mega-menu-mixin() when not (@layout-page-center-width = none) {   
	max-width: ~'@{layout-page-center-width}';
}

.mega-menu__header-container__text.dw-mod {
    .color(@layout-header-dropdown-heading-color);
    .font-size(@layout-header-dropdown-heading-size, rem);
    .font-family(@layout-header-navigation-font-font-family-family);
    .text-transform(@layout-header-navigation-font-casing);
}

.mega-menu__link.dw-mod {
    .color(@layout-header-dropdown-font-color);
    .font-size(@layout-header-navigation-font-font-size, px);
    .font-family(@layout-header-navigation-font-font-family-family);
}

.is-mega.dw-mod::after {
    .is-mega-mixin();
    .color(@layout-header-navigation-font-font-color);
}

.mega-menu__col.dw-mod {
    .mega-menu-separation-lines();
}

//Menu item specifics
.menu__link.dw-mod {
    &:not(.menu__link--icon) {
        .font-mixin(
            @layout-header-navigation-font-font-family-family,
            @layout-header-navigation-font-font-family-style,
            @layout-header-navigation-font-font-size,
            @layout-header-navigation-font-font-family-weight,
            @layout-header-navigation-font-line-height,
            @layout-header-navigation-font-font-color,
            @layout-header-navigation-font-casing
        );
    }
    &:not(.menu__link--mobile) {
        .menu__link-line-height-mixin();
    }
}

.menu__link-line-height-mixin() when (@layout-header-navigation-height > @layout-logo-height) {
    .line-height(@layout-header-navigation-height, px);
}

.menu__link-line-height-mixin() when (@layout-header-navigation-height < @layout-logo-height) and not (@layout-header-top-layout = "two-lines-centered") and not (@layout-header-top-layout = "two-lines") and not (@layout-header-top-layout = "normal") and not (@layout-header-top-layout = "splitted") and not (@layout-header-top-layout = "splitted-center") {
    .line-height(@layout-logo-height, px);
}

.menu__link-line-height-mixin() when (@layout-header-top-layout = "two-lines-centered") {
    .line-height(@layout-header-navigation-height, px);
}

.menu__link-line-height-mixin() when (@layout-header-top-layout = "two-lines") {
    .line-height(@layout-header-navigation-height, px);
}

.menu__link-line-height-mixin() when (@layout-header-top-layout = "normal") {
    .line-height(@layout-header-navigation-height, px);
}

.menu__link-line-height-mixin() when (@layout-header-top-layout = "splitted") {
    .line-height(@layout-header-navigation-height, px);
}

.menu__link-line-height-mixin() when (@layout-header-top-layout = "splitted-center") {
    .line-height(@layout-header-navigation-height, px);
}

.menu__link--icon.dw-mod {
    .color(@layout-header-navigation-font-font-color);
}

//Menu item specifics

.header-menu__link.dw-mod {
    .line-height(@layout-header-navigation-height, px);
}

.menu__item.dw-mod:hover:not(.menu__item--top-level) {
    .background-color(@layout-header-dropdown-active-color);
	.color(@layout-header-dropdown-active-font-color);
} 

.menu__item--top-level {
    .menu__item--top-level-mixin();
} 

.menu__item--top-level.dw-mod {
    &.menu__item--active,
    &:hover, 
    &:focus, 
    &:active {
        .menu__item--top--active-mixin();
    }
}

.menu__item--top-level.dw-mod {
    .menu__item--top--mixin();
} 


//Mini cart dropdown
.mini-cart-dropdown.dw-mod {
    .background-color(@layout-header-dropdown-background-color);
    .font-size(@layout-header-navigation-font-font-size, px);
    .color(@layout-header-dropdown-font-color);

    h4 {
        .color(@layout-header-dropdown-font-color);
    }

    //depricated
    .mini-cart-orderlines__name {
        .color(@layout-header-dropdown-font-color);
    }
    
    .mini-cart-orderline__name {
        .color(@layout-header-dropdown-font-color);
    }
}

//Top header icons color (for loayout 0)

.header-menu__link.dw-mod {
    .color(@layout-header-extra-top-links-color);
}