﻿::deep .ms-ContextualMenu {
    font-size: var(--fontSize-Medium);
    font-weight: var(--fontWeight-Regular);
    background-color: var(--semanticColors-MenuBackground);
    min-width: 180px;
}


::deep .ms-ContextualMenu-container:focus {
    outline: 0;
}


::deep .ms-ContextualMenu-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}


::deep .ms-ContextualMenu-header {
    font-size: var(--fontSize-Small);
    font-weight: var(--fontWeight-SemiBold);
    color: var(--semanticColors-MenuHeader);
    background: none;
    background-color: transparent;
    border: none;
    height: 36px;
    line-height: 36px;
    cursor: default;
    padding: 0 6px;
    user-select: none;
    text-align: left;
}


::deep .ms-ContextualMenu-title {
    font-size: var(--fontSize-MediumPlus);
    padding-right: 14px;
    padding-left: 14px;
    padding-bottom: 5px;
    padding-top: 5px;
    background-color: var(--semanticColors-MenuItemBackgroundPressed);
}


::deep .ms-ContextualMenu .ms-Callout {
    box-shadow: var(--effects-Elevation8);
}

::deep .ms-ContextualMenu-item {
    outline: transparent;
    position: relative;
    color: var(--semanticTextColors-BodyText);
    position: relative;
    box-sizing: border-box;
}

    ::deep .ms-ContextualMenu-item::-moz-focus-inner {
        border: 0;
    }

.ms-Fabric--isFocusVisible .ms-ContextualMenu-list ::deep .ms-ContextualMenu-link:focus::after {
    content: '';
    position: absolute;
    left: 1px;
    top: 1px;
    bottom: 1px;
    right: 1px;
    border: 1px solid var(--palette-White);
    outline: 1px solid var(--palette-NeutralSecondary);
    z-index: var(--zIndex-FocusStyle);
}
/*
@media screen and (-ms-high-contrast: active) {
    .ms-Fabric--isFocusVisible ms-ContextualMenu-item:focus::after {
        left: -2px;
        top: -2px;
        bottom: -2px;
        right: -2px;
        border: none;
        outline-color: ButtonText;
    }
}*/



::deep .ms-ContextualMenu-divider {
    display: block;
    height: 1px;
    background-color: var(--semanticColors-BodyDivider);
    position: relative;
}

::deep .ms-ContextualMenu-link {
    outline: transparent;
    position: relative;
    color: var(--semanticTextColors-BodyText);
    background-color: transparent;
    border: none;
    width: 100%;
    height: 36px;
    line-height: 36px;
    display: block;
    cursor: pointer;
    padding: 0 8px 0 4px;
    text-align: left;
}

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

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


::deep .ms-ContextualMenu-item.is-disabled .ms-ContextualMenu-link {
    color: var(--semanticTextColors-DisabledBodyText);
    cursor: default;
    pointer-events: none;
}


::deep .ms-ContextualMenu-link:focus {
    outline: 0;
}


::deep .ms-ContextualMenu-link:hover {
    color: var(--semanticTextColors-MenuItemTextHovered);
    background-color: var(--semanticColors-MenuItemBackgroundHovered);
}

    ::deep .ms-ContextualMenu-link:hover .ms-ContextualMenu-icon {
        color: var(--palette-ThemeDarkAlt);
    }


    ::deep .ms-ContextualMenu-link:hover .ms-ContextualMenu-submenuIcon {
        color: var(--palette-NeutralPrimary);
    }

::deep .ms-ContextualMenu-item.is-checked .ms-ContextualMenu-checkmarkIcon {
    color: var(--palette-NeutralPrimary);
}


::deep .ms-ContextualMenu-link:active {
    background-color: var(--semanticColors-MenuItemBackgroundPressed);
}

    ::deep .ms-ContextualMenu-link:active .ms-ContextualMenu-icon {
        color: var(--palette-ThemeDark);
    }


    ::deep .ms-ContextualMenu-link:active .ms-ContextualMenu-submenuIcon {
        color: var(--palette-NeutralPrimary);
    }


::deep .ms-ContextualMenu-item.is-expanded .ms-ContextualMenu-link {
    background-color: var(--semanticColors-MenuItemBackgroundPressed);
    color: var(--semanticTextColors-BodyTextChecked);
}


::deep .ms-ContextualMenu-linkContent {
    white-space: nowrap;
    height: inherit;
    display: flex;
    align-items: center;
    max-width: 100%;
}


::deep .ms-ContextualMenu-anchorLink {
    padding: 0 8px 0 4px;
    text-rendering: auto;
    color: inherit;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    text-decoration: none;
    box-sizing: border-box;
}


::deep .ms-ContextualMenu-itemText {
    margin: 0 4px;
    vertical-align: middle;
    display: inline-block;
    flex-grow: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}


::deep .ms-ContextualMenu-secondaryText {
    color: var(--palette-NeutralSecondary);
    padding-left: 20px;
    text-align: right;
}


::deep .ms-ContextualMenu-icon {
    display: inline-block;
    min-height: 1px;
    max-height: 36px;
    font-size: var(--iconFontSize-Medium);
    width: var(--iconFontSize-Medium);
    margin: 0 4px;
    vertical-align: middle;
    flex-shrink: 0;
}

@media only screen and (min-width: 0px) and (max-width: 639px) {
    ::deep .ms-ContextualMenu-icon {
        font-size: var(--iconFontSize-Large);
        width: var(--iconFontSize-Large);
    }
}


::deep .ms-ContextualMenu-iconColor {
    color: var(--semanticColors-MenuIcon);
}

::deep .ms-ContextualMenu.is-disabled .ms-ContextualMenu-iconColor {
    color: var(--semanticTextColors-DisabledBodyText);
}


::deep .ms-ContextualMenu-checkmarkIcon {
    color: var(--semanticTextColors-BodySubtext);
    margin: 0 4px;
}


::deep .ms-ContextualMenu-submenuIcon {
    height: 36px;
    line-height: 36px;
    color: var(--palette-NeutralSecondary);
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    font-size: var(--iconFontSize-Small);
}


    ::deep .ms-ContextualMenu-submenuIcon:hover {
        color: var(--palette-NeutralPrimary);
    }

    ::deep .ms-ContextualMenu-submenuIcon:active {
        color: var(--palette-NeutralPrimary);
    }


::deep .ms-ContextualMenu-splitButtonFlexContainer {
    display: flex;
    height: 36px;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
}