//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .header.content {
        .navigation {
            .navigation .level0:nth-last-child(2) {
                border-bottom: 1px solid #d1d1d1;
            }
        }
        .navigation .level0 {
            > .level-top {
                text-transform: none;
            }
            &.parent {
                > .level-top {
                    &::after {
                        .lib-font-size(38);
                        color: @djo-gray-light;
                        content: '+';
                        font-family: @font-family__base;
                        font-weight: 400;
                        line-height: 1;
                        top: 0;
                    }
                    &.ui-state-active {
                        &::after {
                            content: '\2013';
                        }
                    }
                }
            }
        }
    }
    .navigation .level0.active > a:not(.ui-state-active),
    .navigation .level0.has-active > a:not(.ui-state-active) {
        border-width: 0;
    }
    .navigation .level0.active > a:not(.ui-state-active) span:not(.ui-menu-icon),
    .navigation .level0.has-active > a:not(.ui-state-active) span:not(.ui-menu-icon) {
        margin-left: 0;
    }
    .navigation .submenu:not(:first-child) .active > a,
    .navigation .level0.active .all-category .ui-state-focus {
        border-width: 0;
    }
}


//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .navigation .level0 > .level-top {
        display: inline-block;
    }
    .navigation .level0.parent > .level-top {
        padding-right: 9px;
    }
    .header.content {
        .navigation {
            .mobile-only {
                display: none;
            }
        }
    }
    .header.content {
        .navigation {
            .level0 {
                margin-right: 1px;

                button.level-top,
                a.level-top,
                span.nolink.level-top {
                    font-size: 1.53rem;
                    color: @djo-gray;
                    border-radius: 0;

                    &:hover {
                        color: @djo-blue;
                        text-decoration: underline;
                    }
                }

                button.level-top {
                    text-transform: unset;
                    background: transparent;
                    border: 0;
                    letter-spacing: unset;
                }

                span.nolink.level-top {
                    &:hover {
                        text-decoration: underline; // keep underline on non-links in top nav per Raj
                    }
                }
            }
        }
    }
    .header.content {
        .navigation {
            li.level0 {
                &.level-top {
                    position: static;
                }
            }
        }
    }
    .navigation .level0.active > .level-top,
    .navigation .level0.has-active > .level-top {
        border-width: 0;
    }
    .navigation .level0 .submenu .active > a {
        border-width: 0;
    }
}