@import '../../_widgetsCommon.scss';
.bolt-contextual-menu {
    border-radius: 4px;
    max-width: 320px;
    overflow-x: hidden;
    overflow-y: auto;

    @media screen and (-ms-high-contrast: active) {
        border: 1px solid;
    }
}

// @@FIREFOX, @@SAFARI: Needed to make sure FireFox & Safari leave room for the vertical scrollbar.
.overflow .bolt-contextual-menu {
    overflow-y: scroll;
}

.bolt-menu-container {
    outline: none;
}

.bolt-menu {
    border-collapse: separate;
    color: $primary-text;
    display: table;
    table-layout: auto;

    // @@OLD-PLATFORM: Default font size in the product is 12 px, so we can't have inherit here.
    font-size: $fontSizeM;
}

.bolt-menuitem-row {
    background-color: transparent;
    border-radius: 3px;
    color: inherit;
    display: table-row;
    outline: none;
    overflow: hidden;
    text-decoration: none;
    white-space: nowrap;

    @media screen and (-ms-high-contrast: active) {
        border: 1px solid transparent;
    }

    &.focused {
        background-color: transparent;
        outline: none;

        @media screen and (-ms-high-contrast: active) {
            border-color: windowtext;
        }
    }

    &:hover,
    &.expanded {
        background-color: $transblack-4;
    }

    @media screen and (-ms-high-contrast: active) {
        &.expanded {
            border-color: windowtext;
        }

        &:hover {
            border-color: highlight;
        }
    }

    &.disabled {
        color: $disabled-text;

        &:hover {
            background-color: transparent;
        }
    }
}

.bolt-focus-visible .bolt-menuitem-row.focused {
    animation: focus-shadow-pulse-inset $focus-pulse-duration ease-in-out infinite;
    background-color: $transblack-4;
    outline: none;
}

// Work around for old platform styles
a.bolt-menuitem-row:not(.ms-Button),
a.bolt-menuitem-row:not(.ms-Button):visited,
a.bolt-menuitem-row:not(.ms-Button):hover {
    color: $primary-text;
    text-decoration: none;
}

.bolt-menuitem-header {
    font-weight: $fontWeightSemiBold;
}

.bolt-menuitem-divider:hover,
.bolt-menuitem-header:hover {
    background-color: transparent;

    @media screen and (-ms-high-contrast: active) {
        border: 1px solid transparent;
    }
}

.bolt-menuitem-cell {
    padding: 0;
    vertical-align: middle;

    &:first-child .bolt-menuitem-cell-content {
        padding-right: 0px;
    }

    &:last-child .bolt-menuitem-cell-content {
        padding-left: 0px;
    }
}

.bolt-menuitem-cell-content {
    justify-content: center;
    padding: 6px;
}

.bolt-menuitem-cell-text {
    justify-content: flex-start;
    max-width: 225px;
    min-width: 180px;
}

.bolt-menuitem-cell-secondary {
    color: $secondary-text;
}

.bolt-menuitem-cell-submenu {
    font-size: $fontSize;
}

.bolt-menuitem-divider-content {
    background-color: $transblack-20;
    height: 1px;
    margin: 6px 6px;
    padding: 0px;
}

.bolt-menu-spacer {
    padding: 4px;
}