// Non-mobile nav, hidden on small screens.
.docs-Nav {
    display: none;
    margin: 0 0 8px 0;
    width: 100%;

    .docs-MobileNav-item {
        display: inline-block;
        margin: 0 12px 0 0;
        width: auto;

        i {
            display: none;
        }

        a,
        a:active {
            @include ms-font-m;
            color: $ms-color-neutralPrimary;
            display: block;
            height: 100%;
            padding-bottom: 8px;
            padding-top: 16px;
            position: relative;
            
            @include high-contrast {
               color: $high-contrast-yellow;
            }
            
            @include high-contrast-black-on-white {
               color: $high-contrast-blueBG;
            }
        }

        a:focus {
            outline: none !important;
            
            @include high-contrast {
               &::before {
                    border: 1px solid $ms-color-white;
               }
            }
            
            @include high-contrast-black-on-white {
               &::before {
                    border: 1px solid $high-contrast-purpleBG;
               }
            }
        }
    }

    div.current {
        a {
            border-bottom: 2px solid $ms-color-themePrimary;
        }
    }
}

// Show it on larger screens, and make sure the mobile nav submenus are hidden
@media (min-width: $docs-mobileNavBreakpoint) {
    .docs-Nav {
        display: block;

        div.docs-MobileNav-subMenu {
            display: none;
        }
    }
}