#toolbar-menubar {
	// Need this to force show the menubar
	display: initial;
	// Allow right-click context menu on menubar
	visibility: visible;
	flex: 1;
}

#menubar-items {
	pointer-events: all;
	-moz-window-dragging: drag;
}

.titlebar-buttonbox {
	height: 100%;
	pointer-events: all;
}

#titlebar,
.menubar-container {
	appearance: none;
	flex-direction: row;
	height :var(--tab-min-height);
	-moz-box-pack: center;
	border-bottom: var(--material-border);
	background: var(--material-tabbar);
	toolbar {
		appearance: none;
	}
	menubar {
		height :var(--tab-min-height);
		padding: 5px 1px 5px 1px !important;
	}
	menu {
		border-radius: 4px;
	}
	#main-menubar {
		align-self: flex-start;
		gap: 5px;
	}
	#main-menubar > menu {
		height: 100%;
		padding: 0px 11px 0px 11px;
	}
	#main-menubar > menu > menupopup {
        // Align with menu bar bottom
        margin-top: 0px;
    }
}

.titlebar-icon {
	background-image: url(chrome://zotero/skin/z.svg);
	width: 16px;
	height: 16px;
	z-index: 2;
	-moz-window-dragging: no-drag;
	pointer-events: all;
	// to make the icon W40*H36
	margin-block: 10px;
	margin-inline: 12px;
}


// Following rules from https://searchfox.org/mozilla-central/source/browser/themes/windows/browser.css
:root {
	--sidebar-border-color: ThreeDLightShadow;
}

#menubar-items {
	flex-direction: column; /* for flex hack */
	justify-content: normal; /* align the menubar to the top also in customize mode */
}

#main-menubar > menu {
	appearance: none;
	color: inherit;

	&[_moz-menuactive] {
	// background-color: light-dark(hsla(0,0%,0%,.12), hsla(0,0%,100%,.22));
	@include light-dark(background-color, hsla(0,0%,0%,.12), hsla(0,0%,100%,.22));
	color: inherit;

	@media (prefers-contrast) {
		background-color: -moz-menuhover;
		color: -moz-menuhovertext;
	}
	}
}

@media (-moz-windows-accent-color-in-titlebar) {
	:root[tabsintitlebar] {
	/* stylelint-disable-next-line media-query-no-invalid */
	@media (-moz-bool-pref: "browser.theme.windows.accent-color-in-tabs.enabled") {
		--toolbox-non-lwt-bgcolor: ActiveCaption;
		--toolbox-non-lwt-textcolor: CaptionText;
		--toolbox-non-lwt-bgcolor-inactive: InactiveCaption;
		--toolbox-non-lwt-textcolor-inactive: InactiveCaptionText;

		#TabsToolbar:not(:-moz-lwtheme) {
		/* These colors match the Linux/HCM default button colors. We need to
		 * override these on the tabs toolbar because the accent color is
		 * arbitrary, so the hardcoded colors from browser-custom-colors might
		 * not provide sufficient contrast. */
		--toolbarbutton-icon-fill: currentColor;
		--toolbarbutton-hover-background: color-mix(in srgb, currentColor 17%, transparent);
		--toolbarbutton-active-background: color-mix(in srgb, currentColor 30%, transparent);
		}
	}

	&[sizemode="normal"] #titlebar {
		border-top: .5px solid ActiveBorder;
		&:-moz-window-inactive {
		border-top-color: InactiveBorder;
		}
	}
	}
}

/* Titlebar */

.titlebar-buttonbox {
	inset-inline-end: 0px;
	position: absolute;
	height: var(--tab-min-height);
	appearance: none;
	/* The button box must appear on top of the navigator-toolbox in order for
	 * click and hover mouse events to work properly for the button in the restored
	 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
	 * can swallow those events. It will also place the buttons above the fog on
	 * Windows 7 with Aero Glass.
	 */
	z-index: 1;
}

/* Window control buttons */

.titlebar-button {
	appearance: none;
	border: none;
	margin: 0;
	padding: 8px 18px;
	color: inherit;

	/* Segoe Fluent Icons is the preferred font for Windows 11, and
	 * Segoe MDL2 Assets is there for windows 10. Luckily, the relevant glyphs
	 * are the same, so we can just fall back.
	 * See: https://learn.microsoft.com/en-us/windows/apps/design/style/segoe-fluent-icons-font */
	font-family: "Segoe Fluent Icons", "Segoe MDL2 Assets";
	font-size: round(10px, env(hairline));
	line-height: 1;

	:root[tabletmode] & {
	display: none;
	}

	> .toolbarbutton-icon {
	display: none;
	}

	&::before {
	display: inline-block;
	content: inherit;

	&:-moz-locale-dir(rtl) {
		transform: scaleX(-1);
	}
	}
}

.titlebar-min {
	/* Even though we use appearance: none, -moz-default-appearance is necessary
	 * for Windows 11's "snap layouts" feature, see
	 * DealWithWindowsAppearanceHacks */
	-moz-default-appearance: -moz-window-button-minimize;
	content: "\e921"; /* ChromeMinimize */
	@media (prefers-contrast) {
		content: "\ef2d"; /* ChromeMinimizeContrast */
	}
}

.titlebar-max {
	-moz-default-appearance: -moz-window-button-maximize;
	content: "\e922"; /* ChromeMaximize */
	@media (prefers-contrast) {
		content: "\ef2e"; /* ChromeMaximizeContrast */
	}
}

.titlebar-restore {
	-moz-default-appearance: -moz-window-button-restore;
	content: "\e923"; /* ChromeRestore */
	@media (prefers-contrast) {
		content: "\ef2f"; /* ChromeRestoreContrast */
	}
}

.titlebar-close {
	-moz-default-appearance: -moz-window-button-close;
	content: "\e8bb"; /* ChromeClose */
	@media (prefers-contrast) {
		content: "\ef2c"; /* ChromeCloseContrast */
	}
}

// End of browser.css

#main-menubar > menu[_moz-menuactive="true"],
	.titlebar-button:hover {
		@include light-dark(background-color, hsla(0,0%,0%,.12), hsla(0,0%,100%,.22));
	}
	.titlebar-button:hover:active {
		@include light-dark(background-color, hsla(0,0%,0%,.22), hsla(0,0%,100%,.32));
}

.titlebar-close:hover {
	color: white;
	background-color: hsl(355,86%,49%);
}
.titlebar-close:hover:active {
	background-color: hsl(355,82%,69%);
}

.titlebar-button:not(:hover):-moz-window-inactive::before {
	opacity: 0.5;
}
