//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .header.content {
        .navigation {
            .level-top.ui-state-focus + .submenu[aria-expanded='true'],
            .level-top.ui-state-active + .submenu[aria-expanded='true'] {
                display: block !important; // @DO - this is needed as important for going from desktop to mobile and not inheriting display table cached in JS menu
            }
            ul.level0 {
                > li {
                    .lib-font-size(14);
                    background: #f8f8f8 !important;
                }
            }
            .submenu:not(:first-child) > li > {
                a, span.nolink {
                    display: block;
                    padding-bottom: 11px;
                    padding-top: 11px;
                    padding-left: 15px;
                }
                span.nolink {
                   text-decoration: none;
                    &:hover {
                        text-decoration: none;
                    }
                }
            }
            .level0 > .level1 {
                font-weight: 400;
                &.parent {
                    font-weight: 600;
                }
            }
            .no-mobile-all-link ul.level0 > li:first-child {
                display: none;
            }
        }
    }
}


//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .header.content {
        .navigation {
            .level0 .submenu {
                z-index: 2;
                a,
                span.nolink {
                    color: @djo-gray;
                    display: block;
                    line-height: inherit;
                    padding: 8px 22px;
                }
                &:before {
                    display: none;
                }
            }
            li.level0.mega-menu {
                ul.level0.submenu {
                    padding-right: 0;
                }
            }
            li.level0.mega-menu {
                // "horizontal lists"
                ul.level0.submenu {
                    // border-collapse: collapse;
                    border-color: @djo-header-border-color;
                    box-sizing: border-box;
                    // display: table; // @DO - required, but setting this here means flash of content, see menu-extend.js instead
                    left: 0 !important;
                    min-width: auto;
                    width: 100%;
                    z-index: 99999;
                    // "each horizontal list"
                    ul.submenu {
                        border: 0; // clear out old borders
                        bottom: inherit !important; // to prevent shifting on hover
                        box-shadow: none;
                        display: block !important;
                        height: 82%;
                        left: inherit !important; // to prevent shifting on hover
                        min-width: auto;
                        position: static !important;
                        right: inherit !important; // to prevent shifting on hover
                        top: inherit !important; // to prevent shifting on hover
                        &:first-child {
                            border: 0;
                        }
                        a, span.nolink {
                            .lib-font-size(14);
                            color: @djo-gray;
                            padding-bottom: 5px;
                            padding-top: 5px;
                            &.active,
                            &.has-active,
                            &.ui-state-focus {
                                background: none;
                                text-decoration: none;
                            }
                            &:hover {
                                background: none;
                                text-decoration: underline;
                            }
                        }
                        span.nolink {
                           text-decoration: none;
                            &:hover {
                                text-decoration: none;
                            }
                        }
                    }

                    // "shoes list"
                    li.level1 {
                        border-left: 1px solid #dbdfe1;
                        box-sizing: border-box;
                        display: table-cell;
                        height: 100%;
                        padding-bottom: 135px; // a little more than the size of the bottom image
                        padding-top: 10px;
                        position: relative; // to allow for .image absolute bottom
                        vertical-align: top;
                        width: 25%;
                        &:first-child {
                            border-left: 0;
                        }
                        // header
                        > a, > span.nolink {
                            .lib-font-size(18);
                            color: #575757;
                            display: block;
                            font-weight: 700;
                            line-height: inherit;
                            padding: 8px 22px;
                            &.active,
                            &.has-active,
                            &.ui-state-focus {
                                background: none;
                                text-decoration: none;
                            }
                            &:hover {
                                background: none;
                                text-decoration: underline;
                            }
                        }
                        span.nolink {
                            text-decoration: none;
                            &:hover {
                                text-decoration: none;
                            }
                        }
                        // "shoe links"
                        ul.level1.submenu {
                            .lib-clearfix();
                            > li {
                            }
                        }
                        &.wide {
                            min-width: 280px;
                            a, span.nolink {
                                padding-left: 12px;
                                padding-right: 1px;
                            }
                            span.nolink {
                                text-decoration: none;
                                &:hover {
                                    text-decoration: none;
                                }
                            }
                            ul.level1.submenu {
                                > li.parent {
                                    float: left;
                                    width: 32%;
                                    > a, span.nolink {
                                        font-weight: 700;
                                    }
                                    span.nolink {
                                        text-decoration: none;
                                        &:hover {
                                            text-decoration: none;
                                        }
                                    }
                                }
                                ul.level2.submenu {
                                }
                            }
                        }
                    }
                    // no left border on first rows sub-menu
                    li:first-child {
                        ul.level1.submenu {
                            border: 0;
                        }
                    }
                }
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__1240 + 1) {
    .header.content {
        .navigation {
            li.level0.mega-menu {
                ul.level0.submenu {
                    padding-right: 257px; // slightly less than image width to prevent width space
                }
                ul.submenu {
                    a, span.nolink {
                        .lib-font-size(16);
                    }
                }
                li.level1 {
                    ul.level1.submenu {
                        > li.parent {
                            a, span.nolink {
                                .lib-font-size(14);
                            }
                        }
                    }
                }
            }
        }
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xl) {
    .header.content {
        .navigation {
            li.level0.mega-menu {
                ul.level0.submenu {
                    ul.submenu {
                        a, span.nolink {
                            .lib-font-size(16);
                        }
                    }
                    li.level1 {
                        ul.level1.submenu {
                            > li.parent {
                                a, span.nolink {
                                    .lib-font-size(16);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}