:root {
	// Fix titlebar background in Firefox 133+
	#TabsToolbar {
		background-color: transparent !important;
	}

	// Make Firefox's Windows 10 CSDs white to be faithful to Windows 10+'s titlebar
	@media (not (prefers-contrast)) {
		&[gktitnative="true"][isWindows10] {
			&[windowtype="navigator:browser"] {
				background-color: rgb(255,255,254) !important; // Setting it to white BRICKS Firefox - amazing. 
				color: black !important;
				@media (prefers-color-scheme: dark) {
					background-color: black !important;
					color: white !important;
				}
			}
			// Decrease button height like Microsoft
			&[sizemode="maximized"],
			&[sizemode="fullscreen"] {
				.titlebar-button {
					height: 24px !important;
				}
			}
		}
	}

	// Variables for titlebar styles
	--tab-distance-from-toolbar-edge:		2px;
	--tab-distance-from-pfp:				3px;
	--tab-distance-from-top:				15px;
	--toolbar-background-y-pos:	-1px;
	&[sizemode="maximized"],
	&[sizemode="fullscreen"] {
		--tab-distance-from-top: 0px;
	}
	/* bruni: This entire code takes care of custom themes support for titlebar */
	// lwtheme Themes
	&[gkthemed]:not([gkchrthemed]) {
		&[captionbuttonbackground="true"] {
			--titlebar-buttonbox-background: var(--toolbar-bgcolor, var(--lwt-accent-color));

			&[customthememode="geckium"] {
				--titlebar-buttonbox-background: var(--inactive-tab-background);
			}
		}
		// Base colour
		--titlebar-active:						var(--lwt-accent-color) !important;
		--titlebar-inactive:					var(--titlebar-active) !important;
		--titlebar-foreground:					var(--lwt-text-color);
		--titlebar-foreground-inactive:			var(--titlebar-foreground);
		--titlebar-foreground-cros:				var(--lwt-text-color);
		--titlebar-foreground-cros-inactive:	var(--titlebar-foreground);
		// Additional titlebar background
		--titlebar-pseudo-texture:			var(--lwt-additional-images);
		--titlebar-pseudo-texture-pos:		var(--lwt-background-alignment);
		--titlebar-pseudo-texture-repeat:	var(--lwt-background-tiling);

		&[privatebrowsingmode="temporary"] {
			// Base colour
			--titlebar-active: color-mix(
				in srgb,
				var(--lwt-accent-color) 55%,
				black
			) !important;
			--titlebar-inactive: color-mix(
				in srgb,
				var(--lwt-accent-color) 70%,
				#6c6b6b
			) !important;
		}
		
		&[lwtheme-image] {
			--titlebar-pseudo-texture:			var(--lwt-header-image, linear-gradient(transparent, transparent)), var(--lwt-additional-images);
			--titlebar-pseudo-texture-pos:		right top, var(--lwt-background-alignment);
			--titlebar-pseudo-texture-repeat:	no-repeat, var(--lwt-background-tiling);
		}

		// Themes without image header/additional images
		&:not([style*="--lwt-additional-images"], [style*="--lwt-header-image"]) {
			--titlebar-active: linear-gradient(
				to bottom,
				color-mix(
					in srgb,
					var(--lwt-accent-color) 90%,
					white
				),
				var(--lwt-accent-color) 40px
			) !important;
			--titlebar-inactive: linear-gradient(
				to bottom,
				color-mix(
					in srgb,
					var(--lwt-accent-color) 70%,
					white
				),
				color-mix(
					in srgb,
					var(--lwt-accent-color) 80%,
					white
				)
			) !important;
			--titlebar-pseudo-texture: unset !important;

			&[privatebrowsingmode="temporary"] {
				--titlebar-active: linear-gradient(
					to bottom,
					color-mix(
						in srgb,
						var(--lwt-accent-color) 70%,
						black
					),
					color-mix(
						in srgb,
						var(--lwt-accent-color) 60%,
						black
					) 40px
				) !important;
				--titlebar-inactive: linear-gradient(
					to bottom,
					color-mix(
						in srgb,
						var(--lwt-accent-color) 60%,
						#313131
					),
					color-mix(
						in srgb,
						var(--lwt-accent-color) 50%,
						#313131
					)
				) !important;
			}
		}

		&[windowtype="navigator:browser"] > body::before {
			mask-image: linear-gradient(
				to bottom,
				white calc(var(--titlebar-pseudo-height) - 18px - 20px),
				transparent calc(100% - 20px)
			)
		}
	}
	// Chromium Themes
	&[gkthemed][gkchrthemed] {
		--titlebar-buttonbox-background:		var(--chrtheme-theme-window-control-background, var(--chrtheme-control-background, var(--chrtheme-button-background, transparent)));
		--titlebar-foreground:					var(--chrtheme-frame-color);
		--titlebar-foreground-inactive:			var(--chrtheme-frame-color);
		--titlebar-foreground-cros:				var(--chrtheme-frame-color-cros);
		--titlebar-foreground-cros-inactive:	var(--chrtheme-frame-color-cros);
		--titlebar-button-foreground:			var(--chrtheme-button-color, var(--chrtheme-frame-color));
		// TODO: inactive titlebutton foreground
		// Base colour
		--titlebar-active:		var(--chrtheme-frame) !important;
    	--titlebar-inactive:	var(--chrtheme-frame-inactive, var(--chrtheme-frame)) !important;
		// Additional titlebar background
		--titlebar-pseudo-texture:			var(--chrtheme-theme-frame-overlay), var(--chrtheme-theme-frame);
		&[style*="--chrtheme-theme-frame-inactive"] {
			--titlebar-pseudo-inactive-texture:	var(--chrtheme-theme-frame-overlay), var(--chrtheme-theme-frame-inactive);
		}
		--titlebar-pseudo-texture-repeat:	no-repeat, repeat no-repeat;
		--titlebar-pseudo-texture-pos:		-1px 0;
		--titlebar-pseudo-height:			100%;

		&[privatebrowsingmode="temporary"] {
			--titlebar-foreground:			var(--chrtheme-frame-incognito-color);
			--titlebar-foreground-inactive:	var(--chrtheme-frame-incognito-color);
			--titlebar-button-foreground:	var(--chrtheme-button-color, var(--chrtheme-frame-incognito-color));
			// Base colour
			--titlebar-active: var(--chrtheme-frame-incognito, color-mix(
				in srgb,
				var(--chrtheme-frame) 55%,
				black
			)) !important;
			--titlebar-inactive: var(--chrtheme-frame-incognito-inactive, var(--chrtheme-frame-incognito, color-mix(
				in srgb,
				var(--chrtheme-frame) 90%,
				black
			))) !important;
			// Additional titlebar background
			&[style*="--chrtheme-theme-frame-inactive"] {
				--titlebar-pseudo-texture: var(--chrtheme-theme-frame-overlay), var(--chrtheme-theme-frame-incognito);
			}
			&[style*="--chrtheme-theme-frame-incognito-inactive"] {
				--titlebar-pseudo-inactive-texture: var(--chrtheme-theme-frame-overlay), var(--chrtheme-theme-frame-incognito-inactive);
			}
		}
	}

	// Popup window titlebars
	&[chromehidden~="toolbar"][gktitnative="false"] {
		@media (-moz-platform: windows) {
			&[sizemode="maximized"] #titlebar {
				appearance: -moz-window-titlebar-maximized !important;
			}
		}
		#titlebar {
			height: 22px !important;
			// Prevent the Incognito indicator from appearing whatsoever
			#private-browsing-indicator-with-label,
			.private-browsing-indicator-with-label /* Fix for Firefox 133+ */ {
				display: none !important;
			}
			#TabsToolbar {
				visibility: visible !important;
				display: flex !important; // required for extension popups
				> .toolbar-items {
					pointer-events: none !important;
				}
				#tabbrowser-arrowscrollbox > * {
					display: none !important;
				}
				.titlebar-buttonbox {
					display: flex !important;
				}
			}
		}

		#gkpeople-button-container {
			display: none !important;
		}
	}

	// Standard titlebars
	&[gktitnative="false"] #navigator-toolbox {
		color: var(--titlebar-foreground, var(--default-titlebar-foreground)) !important;
		&:-moz-window-inactive {
			color: var(--titlebar-foreground-inactive, var(--titlebar-foreground, var(--default-titlebar-foreground-inactive))) !important;
		}
	}
	#tabbrowser-arrowscrollbox {
		padding-top: var(--tab-distance-from-top);
	}
	&[menubarvisible] { // Disable tab gap whenever the menubar is visible
		--tab-distance-from-top: 0px !important;
	}

	// Menu bar
	#toolbar-menubar {
		text-shadow: unset !important;
	}
	#main-menubar {
		z-index: 1; // Ensure it always overlaps vanillatitlebar
		appearance: none !important;
		background-color: unset !important;
		color: inherit !important;
		border-radius: unset !important;
		
		> menu {
			text-shadow: unset !important;
		}
	}
	// NOTE: Non-native menubar styling is in _menu.scss

	--inactive-titlebar-opacity: 1 !important; // Firefox's inactive titlebar opacity
	--chrtheme-theme-frame-overlay: 0; // Required value for chrThemes because Firefox logic

	// Fixes for various OS quirks
	// Windows quirks (both System and Compact)
	@media (-moz-platform: windows) {
		// Rid of the fog.
		#TabsToolbar {
			background: transparent !important;
		}
		// Remove margin in w/AERO
		#TabsToolbar > .toolbar-items {
			padding-top: 0 !important;
			margin-top: 0 !important;
		}
		// Windows 10 quirks
		&[isWindows10]:not([nativeControls="win10"]) #titlebar {
			// remove the top gap
			appearance: none !important;
		}
		// Temporary fix due to Mozilla's removal of the `#titlebar` element.
		&[is133Plus][isWindows10][nativeControls="win10"][sizemode="maximized"] #navigator-toolbox {
			appearance: -moz-window-titlebar-maximized !important;
		}
		// Windows 10 + Native Controls Patch quirks
		@media (-moz-ev-native-controls-patch) and (not (-moz-windows-compositor: 0)) and (not (-moz-windows-classic)) {
			&:not([isWindows10])#main-window {
				background: rgba(0,0,0,.002) !important;
			}
		}
	}
	&[gktitnative="true"] { // System Borders
		// Windows quirks
		@media (-moz-platform: windows) {
			&[nativeControls="win7"],
			&[nativeControls="patch"],
			&[nativeControls="win10"] {
				.titlebar-buttonbox-container {
					width: var(--helper-mask-width) !important;
				}
			}

			// Top-align the titlebar buttons, so the Win8- AERO cut-out aligns
			.titlebar-buttonbox-container {
				align-self: start;
			}
			// Prevent titlebar from ever being themed by dark mode
			#navigator-toolbox {
				background: unset !important;
			}
			// Fix the titlebar in unmaximised Windows Basic
			@media (-moz-windows-compositor: 0) and (not (-moz-windows-classic)) {
				&[sizemode="normal"] #titlebar {
					appearance: none !important; // this leaves behind the background colour
					// TODO: In Windows XP make the #titlebar appear as appearance toolbar?
					&::before {
						content: "";
						position: fixed;
						appearance: -moz-window-titlebar;
						// the following is to account for what I can only assume
						// to be the gaps in borders-gaps.scss.
						width: 102%;
						margin-left: -2px;
					}
				}
			}
		}
		// Linux quirks
		@media (-moz-platform: linux) {
			// Stop Light and Dark from getting custom Firefox titlebars
			&:not([gkthemed]:not([gkchrthemed])) {
				&:not([is117Plus]) #navigator-toolbox {
					background-color: transparent !important; // browser.css:37, 115
				}
				&[is117Plus]:not([is134Plus]) #navigator-toolbox {
					background-color: var(--toolbox-bgcolor) !important;
					color: var(--toolbox-textcolor) !important; // browser-shared.css:205, 128, browser-shared.css:176, 136
					&:-moz-window-inactive {
						background-color: var(--toolbox-bgcolor-inactive) !important;
						color: var(--toolbox-textcolor-inactive) !important; // browser-shared.css:192, 128, browser-shared.css:184, 136
					}
				}
				&:not([is117Plus]) .titlebar-button {
					list-style-image: unset !important; // browser.css:366, 115
					appearance: auto !important; // browser.css:357, 115
					border-radius: unset !important; // browser.css:357, 115
				}
				// New variables in Firefox 134
				--toolbox-bgcolor: ActiveCaption !important;
				--toolbox-textcolor: CaptionText !important;
				--toolbox-bgcolor-inactive: InactiveCaption !important;
				--toolbox-textcolor-inactive: InactiveCaptionText !important;
			}
		}
		// Linux and macOS quirks
		@media (-moz-platform: linux) or (-moz-platform: macos) {
			// Center the titlebar buttons, as Firefox offsets them
			.titlebar-buttonbox-container {
				align-self: center;
			}
		}
	}
	&[gktitnative="false"] { // Compact Borders
		// Disable window metrics border padding affecting titlebar height
		&[sizemode="normal"] #titlebar {
			appearance: none !important;
		}

		// Default to top-aligning the titlebar buttons
		.titlebar-buttonbox-container {
			align-self: start;
		}
		// Windows quirks
		@media (-moz-platform: windows) {
			// Firefox 135+ - butchered Compact Borders
			// See Geckium_titlebar.uc.js: getTitleBordersRemovable for more information
			&[gkcompactsquared] {
				--titlebar-border-radius: 0px !important;
				--titlebar-box-shadow: none !important;
				&[is117Plus][windowtype="navigator:browser"] > body {
					border-left: unset !important;
					border-right: unset !important;
					border-bottom: unset !important;
				}
			}
			// Prevent Basic's titlebar texture showing
			@media (-moz-windows-compositor: 0) {
				#titlebar {
					visibility: hidden !important;
				}
				&:not([chromehidden~="menubar"]) #toolbar-menubar,
				&:not([chromehidden~="toolbar"]) #TabsToolbar {
					// Making the titlebar invisible makes its children invisible - we therefore
					// need to make its children visible manually:
					visibility: visible !important;
				}
			}
			// Remove margin in Windows Classic
			@media (-moz-windows-classic) {
				#toolbar-menubar {
					margin-top: 0 !important;
				}
			}
			// Always use white background for unremovable window corners
			@media not (-moz-ev-native-controls-patch) {
				&[isWindows10]#main-window {
					background: white !important;
				}
			}
		}

		// Linux quirks
		@media (-moz-platform: linux) {
			/* In Linux, we don't have a surface spanning the entire browser window to draw our borders on.
			- GTK3's CSDs only cover the browser from top to bookmarks area
			- Shadows are out of the CSS's boundaries
			Therefore, to get the desired borders, we need to hijack body. */
			#navigator-toolbox-background {
				appearance: none !important; //FIXME: This causes the corner shadows to disappear
			}
			/* However, likely due to a Firefox bug, Firefox's underlying window surface
			uses the body's background itself, due to Mozilla setting its background
			to 'transparent', unless we use a minimum 0.002 alpha background on the window,
			so we need to override that. */
			&#main-window {
				background: rgba(0,0,0,.002) !important;
			}
			// Stop Light and Dark from getting custom Firefox titlebars
			&[is117Plus]#main-window {
				appearance: none !important;
			}
			// Counteract exclusive menubar padding
			#toolbar-menubar .titlebar-buttonbox-container {
				margin-block-start: calc(var(--titlebar-border-radius) - 3px); // top margin
			}
		}

		//macOS quirks
		@media (-moz-platform: macos) {
			&[windowtype="navigator:browser"] > body {
				// Corners on the bottom are rounded, as aforementioned, too
				border-radius: var(--titlebar-border-radius) !important;
			}
		}

		// Misc. quirk-workarounds
		#navigator-toolbox-background {
			position: relative; // Makes the background PROPERLY disappear
		}

		.titlebar-buttonbox {
			appearance: none !important;
			margin-left: 0 !important;
			margin-right: 0 !important;
		}

		.titlebar-button {
			appearance: none !important;
			position: relative; // Required for pseudo button-backgrounds
			padding: 0 !important;
			margin: 0 !important;
			margin-inline-end: 0 !important;

			// Pseudo titlebar button background
			&::before {
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: var(--titlebar-buttonbox-background) !important; // you can blame mac for this one
				z-index: -1;
			}

			.toolbarbutton-icon {
				height: auto !important;
				width: auto !important;

				// Fix for Firefox ~120+
				appearance: none !important;
				background: none !important;
				stroke: none !important;
				border-radius: unset !important;
				padding: unset !important;
			}
		}
	}

	// Google logo (native)
	&[gkbranding="chrome"] {
		&[gktitnative="true"][gktitbuttons="win"]:not([geckium-chrflag-linux-pre-alpha-titlebar="true"]),
		&[gktitnative="true"][gktitbuttons="win8"], &[gktitnative="true"][gktitbuttons="win10"],
		&[gktitnative="true"]:not([gktitbuttons="win"], [gktitbuttons="win8"], [gktitbuttons="win10"])[geckium-chrflag-other-platforms-watermark="true"] {
			@media (-moz-platform: windows) or ((-moz-platform: linux) and (not (-moz-gtk-csd-reversed-placement))) {
				&[privatebrowsingmode="temporary"],
				&:not([gkpeoplestyle="titlebutton"]) {
					.titlebar-buttonbox-container::before {
						content: url("chrome://userchrome/content/assets/img/chrome-1/titlebar/windows/google.png");
						margin-block-start: 3px;
						margin-inline-end: 7px;
					}
					&[sizemode="maximized"],
					&[sizemode="fullscreen"] {
						.titlebar-buttonbox-container::before {
							content: unset !important;
						}
					}
				}
				&:not([privatebrowsingmode="temporary"]),
				&[gkpeoplestyle="titlebutton"] {
					#gkpeople-button-container::before {
						content: url("chrome://userchrome/content/assets/img/chrome-1/titlebar/windows/google.png");
						margin-block-start: 3px;
						margin-inline-end: 7px;
					}
					&[sizemode="maximized"],
					&[sizemode="fullscreen"] {
						#gkpeople-button-container::before {
							content: unset !important;
						}
					}
				}
			}
			@media (-moz-platform: macos) or ((-moz-platform: linux) and (-moz-gtk-csd-reversed-placement)) {
				&[privatebrowsingmode="temporary"],
				&:not([gkpeoplestyle="titlebutton"])  {
					.titlebar-buttonbox-container::after {
						content: url("chrome://userchrome/content/assets/img/chrome-1/titlebar/windows/google.png");
						margin-block-start: 2px;
						margin-inline-start: 7px;
					}
					&[sizemode="maximized"],
					&[sizemode="fullscreen"] {
						.titlebar-buttonbox-container::after {
							content: unset !important;
						}
					}
				}
				&:not([privatebrowsingmode="temporary"]),
				&[gkpeoplestyle="titlebutton"] {
					#gkpeople-button-container::after {
						content: url("chrome://userchrome/content/assets/img/chrome-1/titlebar/windows/google.png");
						margin-block-start: 2px;
						margin-inline-start: 7px;
					}
					&[sizemode="maximized"],
					&[sizemode="fullscreen"] {
						#gkpeople-button-container::after {
							content: unset !important;
						}
					}
				}
			}
		}
	}


	// Titlebar styles
	&[chromemargin]:not([macOSNativeFullscreen]),
	&[customtitlebar]:not([macOSNativeFullscreen]) {
		// Windows
		&[gktitstyle="win"] {
			@import "titlebar/borders/win";
		}
		// Windows 10
		&[gktitstyle="win10"] {
			@import "titlebar/borders/win10";
		}
		// Mac OS X / macOS
		&[gktitstyle="macos"] {
			@import "titlebar/borders/macos";
		}
		// Chromium OS
		&[gktitstyle="chromiumos"] {
			@import "titlebar/borders/chromiumos";
		}
	}
	&:not([chromemargin], [customtitlebar]), // Native (titlebar enabled)
	&[macOSNativeFullscreen] { //Fullscreen (macOS)
		@import "titlebar/borders/native";
	}

	// Titlebutton styles
	// Windows
	&[gktitbuttons="win"] {
		@import "titlebar/buttons/win";
		@import "titlebar/people/win";
	}
	// Windows 8
	&[gktitbuttons="win8"] {
		@import "titlebar/buttons/win";
		@import "titlebar/people/win8";
	}
	// Windows 10
	&[gktitbuttons="win10"] {
		@import "titlebar/buttons/win10";
		@import "titlebar/people/win10";
	}
	// Linux (Alpha)
	&[gktitbuttons="linuxog"] {
		@import "titlebar/buttons/linuxog";
		@import "titlebar/people/linux";
	}
	// Linux
	&[gktitbuttons="linux"] {
		@import "titlebar/buttons/linux";
		@import "titlebar/people/linux";
	}
	// Mac OS X
	&[gktitbuttons="macosx"] {
		@import "titlebar/buttons/macosx";
		@import "titlebar/people/macos";
	}
	// macOS
	&[gktitbuttons="macos"] {
		@import "titlebar/buttons/macos";
		@import "titlebar/people/macos";
	}
	// Chromium OS (redirected by JS to linuxog)
}