/* Standardize appearance of menu buttons and menu popups */

.menus {
    display: flex !important;  /* override inline style */
    flex: 0 0 auto;
    padding: 2px;
    font-size: 12px;
    background: var(--Menu);
    color: var(--MenuText);
    height: 20px;
}

.menu-button {
    box-sizing: border-box;
    height: 18px;
    line-height: 14px;
    padding: 2px 6px;
    margin: 0 1px;
    outline: 0;
    font-family: 'Segoe UI', sans-serif;
    font-size: 12px;
    background: transparent;
    position: relative;
}

.menu-button.highlight {
    box-shadow: 1px 1px 0 var(--ButtonHilight) inset, -1px -1px 0 var(--ButtonShadow) inset;
}

.menu-button.highlight.active {
    box-shadow: 1px 1px 0 var(--ButtonShadow) inset, -1px -1px 0 var(--ButtonHilight) inset;
}

.menu-button.highlight.active > span {
    position: relative;
    top: 1px;
    left: 1px;
}

.menu-popup {
    display: block;
    padding: 2px;
    background: var(--Menu);
    border-top: 1px solid var(--ButtonFace);
    border-left: 1px solid var(--ButtonFace);
    border-right: 1px solid var(--ButtonDkShadow);
    border-bottom: 1px solid var(--ButtonDkShadow);
    box-shadow: 1px 1px 0 var(--ButtonHilight) inset, -1px -1px 0 var(--ButtonShadow) inset;
    color: var(--MenuText);
    font-family: 'Segoe UI', sans-serif;
    font-size: 12px;
    position: absolute;
    z-index: 50;
}

/* Menu Items */
.menu-item {
    padding: 1px 3px;
    margin: 2px;
    height: 17px;
    line-height: 17px;
}

.menu-item[disabled] {
    color: var(--GrayText);
    text-shadow: 0.8px 0.8px 0px var(--ButtonHilight);
}

.menu-item.highlight:not([disabled]),
.menu-item.active:not([disabled]) {
    color: var(--HilightText);
    background: var(--Hilight);
    text-shadow: none;
    outline: 0;
}

.menu-item .menu-item-shortcut {
    padding-left: 10px;
}

/* Menu Item Table Layout */
.menu-popup td {
    padding: 0 1px;
}

.menu-popup-table {
    border-collapse: collapse;
    width: 100%;
}

/* Menu Separator */
.menu-hr {
    border: 0;
    border-top: 1px solid var(--ButtonShadow);
    border-bottom: 1px solid var(--ButtonHilight);
    margin: 3px 0 4px 0;
}

/* Menu Hotkey */
.menu-hotkey {
    text-decoration: underline;
}

/* Fix submenu arrows */
.menu-item-submenu-area {
    width: 20px;
    text-align: right;
}

/* Fix checkbox/radio areas */
.menu-item-checkbox-area {
    width: 16px;
}