﻿::deep .ms-Nav {
    overflow-y: auto;
    user-select: none;
    touch-action: pan-x pan-y;
}
    .ms-Nav.is-on-top {
        position: absolute;
    }

::deep .ms-Nav-linkText {
    margin: 0px 4px;
    overflow: hidden;
    vertical-align: middle;
    text-align: left;
    text-overflow: ellipsis;
}

::deep .ms-Nav-compositeLink {
    display: block;
    position: relative;
    color: var(--semanticTextColors-BodyText);
    background-color: var(--semanticColors-BodyBackground);
}

    ::deep .ms-Nav-compositeLink.is-disabled {
        color: var(--semanticTextColors-DisabledText);
    }

::deep .ms-Nav .ms-Nav-compositeLink .ms-Button-root {
    display:block; /* Hack to prevent inline-block */
}

::deep .ms-Nav-link {
    outline: transparent;
    position: relative;
    display: block;
    position: relative;
    height: 44px;
    width: 100%;
    line-height: 44px;
    text-decoration: none;
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-left: 20px;
    padding-right: 20px;
    color: var(--semanticTextColors-BodyText);
}

::deep .ms-Nav .ms-Nav-compositeLink .ms-Nav-link::-moz-focus-inner {
    border: 0;
}

.ms-Fabric--isFocusVisible .ms-Nav-root ::deep .ms-Nav .ms-Nav-compositeLink .ms-Nav-link:focus::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    bottom: 2px;
    right: 2px;
    border: 1px solid var(--palette-White);
    outline: 1px solid var(--palette-NeutralSecondary);
    z-index: var(--zIndex-FocusStyle);
}

@media screen and (-ms-high-contrast: active) {
    ::deep .ms-Nav-link {
        border-color: transparent;
    }
        ::deep .ms-Nav-link:focus {
            border-color: WindowText;
        }
}

::deep .ms-Nav-compositeLink:hover:not(.is-disabled) .ms-Nav-link {
    background-color: var(--semanticColors-BodyBackgroundHovered);
    color: var(--semanticTextColors-BodyText);
}

::deep .ms-Nav-compositeLink.is-selected .ms-Nav-link {
    background-color: var(--semanticColors-BodyBackgroundChecked);
    font-weight: var(--fontWeight-SemiBold);
    color: var(--semanticTextColors-BodyTextChecked);
}

    ::deep .ms-Nav-compositeLink.is-selected .ms-Nav-link::after {
        border-left: 2px solid var(--palette-ThemePrimary);
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        pointer-events: none;
    }

::deep .ms-Nav-compositeLink.is-disabled .ms-Nav-link {
    color: var(--semanticTextColors-DisabledText);
}

::deep .ms-Nav-compositeLink.is-button .ms-Nav-link {
    color: var(--palette-ThemePrimary);
}


::deep .ms-Nav-chevronButton {
    outline: transparent;
    position: relative;
    display: block;
    text-align: left;
    line-height: 44px;
    font-weight: var(--fontWeight-Regular);
    font-size: var(--fontSize-Small);
    margin: 5px 0px;
    padding: 0px 20px 0px 28px;
    border: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    color: var(--semanticTextColors-BodyText);
    background-color: transparent;
}

::deep .ms-Nav-chevronButton::-moz-focus-inner {
    border: 0;
}

.ms-Fabric--isFocusVisible .ms-Nav-root ::deep .ms-Nav-chevronButton:focus::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    bottom: 2px;
    right: 2px;
    border: 1px solid var(--palette-White);
    outline: 1px solid var(--palette-NeutralSecondary);
    z-index: var(--zIndex-FocusStyle);
}

::deep .ms-Nav-chevronButton:visited {
    color: inherit;
}

::deep .ms-Nav-chevronButton:hover {
    color: var(--semanticTextColors-BodyText);
    background-color: var(--semanticColors-BodyBackgroundHovered);
}
::deep .ms-Nav-compositeLink:hover .ms-Nav-chevronButton {
    color: var(--semanticTextColors-BodyText);
    background-color: var(--semanticColors-BodyBackgroundHovered);
}
::deep .ms-Nav-chevronButton.is-group {
    width: 100%;
    height: 44px;
    border-bottom: 1px solid var(--semanticColors-BodyDivider);
}

::deep .ms-Nav-compositeLink:not(.is-button) .ms-Nav-chevronButton {
    display: block;
    width: 26px;
    height: 42px;
    position: absolute;
    top: 1px;
    /*left:1px;*/
    z-index: var(--zIndex-Nav);
    padding: 0;
    margin: 0;
}

::deep .ms-Nav .ms-Nav-compositeLink.is-selected .ms-Nav-chevronButton {
    color: var(--palette-ThemePrimary);
    background-color: var(--palette-NeutralLighterAlt);
}
    ::deep .ms-Nav .ms-Nav-compositeLink.is-selected .ms-Nav-chevronButton::after {
        border-left: 2px solid var(--palette-ThemePrimary);
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        pointer-events: none;
    }

::deep .ms-Nav-chevron {
    position: absolute;
    left: 8px;
    height: 36px;
    line-height: 36px;
    font-size: var(--fontSize-Medium);
    transition: transform .1s linear;
}
::deep .ms-Nav-compositeLink.is-expanded > * > .ms-Nav-chevron {
    transform: rotate(-180deg);
}

::deep .ms-Nav-compositeLink:not(.is-button) > * > .ms-Nav-chevron {
    top: 0;
}

::deep .ms-Nav-group.is-expanded > * > .ms-Nav-chevron {
    transform: rotate(90deg);
}
::deep .ms-Nav-group:not(.is-button) > * > .ms-Nav-chevron {
    top: 5px;
}


::deep .ms-Nav-navItem {
    padding: 0;
}
::deep .ms-Nav-navItems {
    padding: 0;
    list-style-type: none;
}

::deep .ms-Nav-group {
    position: relative;
}
::deep .ms-Nav-groupContent {
    display: none;
    margin-bottom: 0px;
}

::deep .ms-Nav-group.is-expanded .ms-Nav-groupContent {
    display: block;
}