// Default Appmenu Colors ("Firefox")
:root {
    --appmenu-button-border-color: rgba(83, 42, 6, 0.9) !important;
    --appmenu-button-hover-border-color: rgba(83, 42, 6, 0.9) !important;
    --appmenu-button-active-border-color: rgba(83, 42, 6, 0.9) !important;
    
    --appmenu-button-normal-background: linear-gradient(to bottom, rgb(247, 182, 82), rgb(215, 98, 10) 95%) !important;
    --appmenu-button-hover-background: -moz-radial-gradient(center bottom, farthest-side, rgba(252, 240, 89, .5) 10%, rgba(252, 240, 89, 0) 70%),
                                       -moz-radial-gradient(center bottom, farthest-side, rgb(236, 133, 0), rgba(255, 229, 172, 0)),
                                       linear-gradient(rgb(246, 170, 69), rgb(209, 74, 0) 95%) !important;
    --appmenu-button-active-background: linear-gradient(to bottom, rgb(246, 170, 69), rgb(209, 74, 0) 95%) !important;
    
    --appmenu-button-normal-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 0 2px 1px rgba(255,255,255,.25) inset !important;
    --appmenu-button-hover-shadow: 0 1px 0 rgba(255,255,255,.1) inset,
                                   0 0 2px 1px rgba(250,234,169,.7) inset,
                                   0 -1px 0 rgba(250,234,169,.5) inset !important;
    --appmenu-button-active-shadow: 0 2px 3px rgba(0, 0, 0, .4) inset,
                                    0 1px 1px rgba(0, 0, 0, .2) inset !important;
}

// Private Browsing Colors
:root[privatebrowsingmode="temporary"] {
    --appmenu-button-border-color: rgba(43, 8, 65, .9) !important;
    --appmenu-button-hover-border-color: rgba(43, 8, 65, .9) !important;
    --appmenu-button-active-border-color: rgba(43, 8, 65, .9) !important;
    
    --appmenu-button-normal-background: linear-gradient(to bottom, rgb(153, 38, 211), rgb(105, 19, 163) 95%) !important;
    --appmenu-button-hover-background: -moz-radial-gradient(center bottom, farthest-side, rgba(240, 193, 255, .5) 10%, rgba(240, 193, 255, 0) 70%),
                                       -moz-radial-gradient(center bottom, farthest-side, rgb(192, 81, 247), rgba(236, 172, 255, 0)),
                                       linear-gradient(rgb(144, 20, 207), rgb(95, 0, 158) 95%) !important;
    --appmenu-button-active-background: linear-gradient(to bottom, rgb(144, 20, 207), rgb(95, 0, 158) 95%) !important;
    
    --appmenu-button-normal-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 0 0 1px rgba(255, 255, 255, 0.25) inset !important;
    --appmenu-button-hover-shadow: 0 1px 0 rgba(255, 255, 255, .1) inset,
                                   0 0 2px 1px rgba(240, 193, 255, .7) inset,
                                   0 -1px 0 rgba(240, 193, 255, .5) inset !important;
    --appmenu-button-active-shadow: 0 2px 3px rgba(0, 0, 0, .4) inset,
                                    0 1px 1px rgba(0, 0, 0, .2) inset !important;
}

:root:not([echelon-system-style="winxp"]) {
    #appmenu-button-container {
        height: min-content !important;
        border-inline: 1px solid hsla(0, 0%, 100%, 0.5) !important;
        border-block-end: 1px solid hsla(0, 0%, 100%, 0.5) !important;

        #appmenu-button {
            height: calc(100% - 1px) !important;
            border-bottom-left-radius: 3px !important;
            border-bottom-right-radius: 3px !important;
        }
    }

    &:not([lwtheme])[sizemode="normal"] {
        #appmenu-button-container {
            margin-block-start: 1px !important;
        }
    }

    &[lwtheme][sizemode="normal"] {
        #appmenu-button-container {
            margin-block-start: -1px !important;
        }

        .titlebar-buttonbox-container {
            margin-block-start: -2px !important;
        }
    }

    &[sizemode="maximized"] {
        #appmenu-button {
            height: calc(100% - 8px) !important;
        }
    }
}

:root[echelon-system-style="winxp"] {
    #appmenu-button-container {
        height: calc(100% - 6px) !important;
        
        #appmenu-button {
            border-bottom-left-radius: 4px !important;
            border-bottom-right-radius: 4px !important;
        }
    }
}


@media not (-moz-windows-compositor) {
    :root:not([echelon-system-style="winxp"]) {
        #appmenu-button-container {
            height: calc(100% - 3px) !important;

            #appmenu-button {
                height: 100% !important;
            }
        }
    }
}

#appmenu-button-container {
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    margin: 0 0 2px !important;

    @media all and (-moz-windows-classic) { 
        margin-block-start: 4px !important;
    }

    #appmenu-button {
        -moz-user-focus: ignore !important;
        min-height: 0 !important;
        appearance: none !important;
        background-image: var(--appmenu-button-normal-background) !important;
        padding: 0 1.5em 0.15em !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border: 1px solid var(--appmenu-button-border-color) !important;
        border-block-start: 0 !important;
        box-shadow: var(--appmenu-button-normal-shadow) !important;
        color: white !important;
        text-shadow: 0 0 1px rgba(0, 0, 0, 0.7), 0 1px 1.5px rgba(0, 0, 0, 0.5) !important;
        font-weight: bold !important;
        background-clip: padding-box !important;

        &:hover {
            background-image: var(--appmenu-button-hover-background) !important;
            box-shadow: var(--appmenu-button-hover-shadow) !important;
            border-color: var(--appmenu-button-hover-border-color) !important;
        }

        &:active,
        &[open="true"] {
            background-image: var(--appmenu-button-active-background) !important;
            box-shadow: var(--appmenu-button-active-shadow) !important;
            border-color: var(--appmenu-button-active-border-color) !important;
        }

        .button-menu-dropmarker {
            width: 9px !important;
            height: 7px !important;
            list-style-image: none !important;
            content: url("chrome://echelon/content/firefox-4/appmenu/appmenu-dropmarker.png") !important;
            margin-inline-start: .5em !important;
        }
    }
}

#appmenu-button-container[open="true"],
#appmenu-button[open="true"] {
    border-radius: 0 !important;
}

/* Container properties */
#echelon-appmenu-button-menu {
	appearance: none !important;
}

.splitmenu-menuitem {
	flex: 1;
	appearance: menuitem;
    align-items: center;
	font: menu;
	list-style-image: none;
	margin-right: 1px;
	
	&[disabled="true"] {
		color: GrayText;
		text-shadow: none;
		
		@media all and (-moz-windows-classic) {
			& {
				color: ThreeDShadow;
				text-shadow: 1px 1px ThreeDHighlight;
			}
		}
	}
}

echelon-splitmenu {
	display: flex;

	&[active="true"] {
		& .splitmenu-menuitem,
		& .splitmenu-menu {
			background-color: highlight;
			color: -moz-menuhovertext;
		}
	}
}

// Thin expander buttons
// The labels must be hidden, but in such a way to prevent the glyph
// from being uncentred.
echelon-splitmenu .splitmenu-menu > label,
#appmenu-editmenu > label {
	appearance: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

echelon-splitmenu .splitmenu-menu > .menu-accel-container,
#appmenu-editmenu > .menu-accel-container {
	display: none !important;
}

// Hide keybind displays on main appmenu menu items.
#appmenuPrimaryPane, #appmenuSecondaryPane {
	& > menuitem > .menu-accel-container {
		display: none;
	}
}

#appmenuSecondaryPane-spacer {
	min-height: 1em;
}

#echelon-appmenu-button-menu .menu-iconic-left {
	appearance: auto !important;
	-moz-default-appearance: menuimage !important;

    :root[echelon-system-style="winxp"] & {
        width: unset !important;
    }
}

#echelon-appmenu-button-menu :is([type="checkbox"], [checked="true"]) .menu-iconic-left {
	-moz-default-appearance: menucheckbox !important;
}

#appmenuSecondaryPane .menu-iconic-text {
	margin-inline-end: 6px !important;
}

@media not (-moz-windows-classic)
{

    #appmenuPrimaryPane {
        border-inline-end: 1px solid ThreeDShadow;
    }

    @media all and not (-moz-windows-classic) { 
        :root[echelon-appearance-blue]:not([echelon-system-style="winxp"]) {
            #appmenuPrimaryPane {
                background-color: rgba(255, 255, 255, 0.5);
                padding: 2px;
                border-inline-end: none;
            }
            
            #appmenuSecondaryPane {
                background-color: #f1f5fb;
                box-shadow: 1px 0 2px rgb(204, 214, 234) inset;
                padding-top: 2px;
                padding-bottom: 2px;
                border-inline-start: 3px;
                border-inline-end: 2px;
            }
            
            #appmenuSecondaryPane:-moz-locale-dir(rtl) {
                box-shadow: -1px 0 2px rgb(204, 214, 234) inset;
            }
        }
    }
	
	#appmenuSecondaryPane menupopup {
		appearance: none !important;
		background-color: #f1f5fb !important;
		border: 1px solid ThreeDShadow !important;
		padding: 2px !important;
	}
	
	#appmenuPrimaryPane menuitem:where([disabled="true"]) {
		font-style: italic !important;
	}
}

#appmenuPrimaryPane toolbarbutton .toolbarbutton-icon {
	width: 16px !important;
	height: 16px !important;
	background-image: url("chrome://echelon/content/firefox-4/appmenu/appmenu-icons.png") !important;
}

/* Disable hover effect on "Edit" menu. */
#appmenu-edit-label {
	pointer-events: none !important;
}

/* Container Icons */

#appmenu_privateBrowsing,
#appmenu_print,
#appmenu-quit,
#appmenu_bookmarks,
#appmenu_addons,
#appmenu-editmenu-cut,
#appmenu-editmenu-copy,
#appmenu-editmenu-paste {
	.menu-iconic-icon {
		background-image: url("chrome://echelon/content/firefox-4/appmenu/appmenu-icons.png") !important;
	}
}

#appmenu_privateBrowsing .menu-iconic-icon {
	background-position-x: 0 !important;
}

#appmenu-cut .toolbarbutton-icon,
#appmenu-editmenu-cut .menu-iconic-icon {
	background-position-x: -16px !important;
}

#appmenu-copy .toolbarbutton-icon,
#appmenu-editmenu-copy .menu-iconic-icon {
	background-position-x: -32px !important;
}

#appmenu-paste .toolbarbutton-icon,
#appmenu-editmenu-paste .menu-iconic-icon {
	background-position-x: -48px !important;
}

#appmenu_print .menu-iconic-icon {
	background-position-x: -64px !important;
}

#appmenu-quit .menu-iconic-icon {
	background-position-x: -80px !important;
}

#appmenu_addons .menu-iconic-icon {
	background-position-x: -96px !important;
}

#appmenu_bookmarks .menu-iconic-icon {
	background-position-x: -112px !important;
}