/** 
 *  bruni: This is the animation responsible for hiding the tab when
 *		   the background reaches min-width.
 */
@keyframes hide-tab {
	59%  { opacity: 1 }
	60%  { opacity: 0 }
	100% { opacity: 0 }
}

@keyframes progress-throbber {
	0%	 { transform: translateX(0) }
	100% { transform: translateX(-576px) }
}
@keyframes waiting-throbber {
	0%	 { transform: translateX(0) }
	100% { transform: translateX(-2864px) }
}

@keyframes audio-animation {
	0%	 { background-position: 0 }
	100% { background-position: calc(var(--tab-audio-animation-spritesheet-width) * -1) }
}

:root {
	--tab-drop-indicator-pos-from-top-normal: 		-2px;
	--tab-drop-indicator-icon-normal: 				url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab-drag-indicator.svg");
	--tab-drop-indicator-pos-from-top-maximized: 	-1px;
	--tab-drop-indicator-icon-maximized: 			url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab-drag-indicator-maximized.svg");

	--tab-transition-time: 220ms;

	--tab-normal-width:			194px;
	--tab-pinned-width:			39px;
	--tab-selected-min-width:	31px;
	--tab-height:				27px;
	--tab-sides-width:			15px;
	--tab-inner-margin-start:	15px;
	--tab-inner-margin-end:		0;
	--tab-content-y-from-top:	0;
	--tab-gap-between:			-16px;

	--tab-glare-opacity: 1;
	--tab-glare: var(--default-tab-glare);
	--tab-glare-hover-timer: 0.1s; // 0.5s

	--tab-inline-start-mask: 				url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_alpha_left.png");
	--tab-inline-start-inactive-texture: 	url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_inactive_left.png");
	--tab-inline-start-inactive2-mask: 		url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_inactive2_alpha_left.png");
	--tab-inline-start-inactive2-texture: 	url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_inactive2_left.png");
	--tab-inline-start-active-texture: 		url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_active_left.png");
	--tab-inline-center-mask: 				url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_alpha_center.svg");
	--tab-inline-center-inactive-texture: 	url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_inactive_center.png");
	--tab-inline-center-active-texture: 	url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_active_center.png");
	--tab-inline-end-mask: 					url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_alpha_right.png");
	--tab-inline-end-inactive-texture: 		url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_inactive_right.png");
	--tab-inline-end-active-texture: 		url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_active_right.png");

	--tab-container-left:	url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_container_left.svg");
	--tab-container2-left:	url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_container2_left.svg");
	--tab-container-center:	url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_container_center.svg");
	--tab-container-right:	url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_container_right.svg");

	--tab-gap-between-favicon-and-title: 5px;
	--tab-pinned-icon-offset-x: 0;

	// Added in Chromium 27
	--tab-sharing-icon-animation:	2s linear tab-sharing-icon-pulse infinite !important;
	--tab-recording:				url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_recording_100.png");
	--tab-recording-size:			10px;
	--tab-capture:					url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_capture.svg");
	--tab-capture-size:				16px;

	// Added in Chromium 27
	--tab-audio-animation-spritesheet-image:	url("chrome://userchrome/content/assets/img/chrome-1/tabbar/audio_animation.svg");
	--tab-audio-animation-spritesheet-width:	90px;
	--tab-audio-animation-spritesheet-height:	15px;
	--tab-audio-animation-frames:				6;
	--tab-audio-animation-duration:				2000ms;

	--tab-close-button-normal: 				url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_close_mask.svg");
	--tab-close-button-hot: 				url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_close_h.svg");
	--tab-close-button-pressed: 			url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_close_p.svg");
	--tab-close-button-margin-block-start:	1px;
	--tab-close-button-margin-inline-end:	-2px;

	--newtab-distance-from-tabs:	11px;
	--newtab-distance-from-bottom:	4px;
	--newtab-width:					28px;
	--newtab-height:				18px;

	--default-theme-newtab: transparent;

	--newtab-button-mask:				url("chrome://userchrome/content/assets/img/chrome-1/tabbar/newtab_button_mask.png");
	--newtab-button-texture-normal:		url("chrome://userchrome/content/assets/img/chrome-1/tabbar/newtab.png");
	--newtab-button-texture-hot:		url("chrome://userchrome/content/assets/img/chrome-1/tabbar/newtab_h.png");
	--newtab-button-texture-pressed:	url("chrome://userchrome/content/assets/img/chrome-1/tabbar/newtab_p.png");

	@media not (resolution: 96dpi) {
		--tab-inline-start-mask: 				url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_alpha_left.svg");
		--tab-inline-start-inactive-texture: 	url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_inactive_left.svg");
		--tab-inline-start-inactive2-mask: 		url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_inactive2_alpha_left.svg");
		--tab-inline-start-inactive2-texture: 	url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_inactive2_left.svg");
		--tab-inline-start-active-texture: 		url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_active_left.svg");
		--tab-inline-center-inactive-texture: 	url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_inactive_center.svg");
		--tab-inline-center-active-texture: 	url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_active_center.svg");
		--tab-inline-end-mask: 					url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_alpha_right.svg");
		--tab-inline-end-inactive-texture: 		url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_inactive_right.svg");
		--tab-inline-end-active-texture: 		url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_active_right.svg");

		&:not([geckium-thirtyseven]) {
			--tab-recording: url("chrome://userchrome/content/assets/img/chrome-1/tabbar/tab_recording_200.png");
		}

		--newtab-button-mask:				url("chrome://userchrome/content/assets/img/chrome-1/tabbar/newtab_button_mask.svg");
		--newtab-button-texture-normal:		url("chrome://userchrome/content/assets/img/chrome-1/tabbar/newtab.svg");
		--newtab-button-texture-hot:		url("chrome://userchrome/content/assets/img/chrome-1/tabbar/newtab_h.svg");
		--newtab-button-texture-pressed:	url("chrome://userchrome/content/assets/img/chrome-1/tabbar/newtab_p.svg");
	}

	&[geckium-choice="one"],
	&[geckium-choice="three"],
	&[geckium-choice="four"],
	&[geckium-choice="five"],
	&[geckium-choice="six"] {
		.tab-glare-container > .tab-glare {
			left: 0 !important;
			transform: unset;
		}
	}

	&[sizemode="maximized"],
	&[sizemode="fullscreen"] {
		.tab-drop-indicator {
			background: var(--tab-drop-indicator-icon-maximized) !important;
		}
	}

	&[gktitnative="true"] { // Use native tab background when in native
		--default-inactive-tab-background: var(--default-inactive-tab-background-native) !important;

		&:-moz-window-inactive {
			.tabbrowser-tab:not([visuallyselected]) .tab-content > *:not(.tab-mute-button, .tab-close-button) {
				opacity: .6;
			}
		}
		&:not(:-moz-window-inactive) {
			.tabbrowser-tab:not([visuallyselected]) .tab-content > *:not(.tab-mute-button, .tab-close-button) {
				opacity: .7;
			}
		}
	}

	/* bruni: This entire code takes care of custom themes support for tabs */
	// if lwtheme
	&[gkthemed]:not([gkchrthemed]):not([customthememode="none"]) {
		// --selected-tab-background: var(--toolbar-bgcolor, var(--lwt-accent-color)) !important;
		--tabbrowser-tab-color: var(--lwt-tab-text, var(--toolbar-color, var(--lwt-text-color)));
		--tabbrowser-tab-color-inactive: var(--lwt-text-color, var(--toolbar-color, var(--lwt-text-color))) !important;

		&[style*="--gktoolbar-bgcolor: rgb(255, 255, 255)"][style*="--toolbar-color: rgb(255, 255, 255)"]:not([style*="--gktoolbar-bgcolor-opacity-percentage: 0%;"]) {
			--tabbrowser-tab-color: black;
		}

		// if Geckium
		&[customthememode="geckium"] {
			--selected-tab-background-opacity-percentage-additive: 20%;
			--inactive-tab-background: color-mix(
				in srgb,
				color-mix(
					in srgb,
					var(--toolbar-bgcolor, var(--lwt-accent-color)) 35%,
					var(--lwt-accent-color)
				) 80%,
				transparent
			) !important;

			&:not([style*="--tab-selected-bgcolor"], [style*="--lwt-tab-line-color"]) {
				--selected-tab-background: var(--toolbar-bgcolor) !important;
			}
			&[style*="--lwt-tab-line-color"]:not([style*="--tab-selected-bgcolor"]) {
				--selected-tab-background: linear-gradient(
					to bottom,
					var(--lwt-tab-line-color) 3px,
					var(--toolbar-bgcolor) 3px
				) !important;
			}
			&[style*="--tab-selected-bgcolor"]:not([style*="--lwt-tab-line-color"])  {
				--selected-tab-background: linear-gradient(
					to bottom,
					var(--tab-selected-bgcolor) 3px,
					var(--toolbar-bgcolor)
				) !important;
			}
			&[style*="--lwt-tab-line-color"][style*="--tab-selected-bgcolor"] {
				--selected-tab-background: linear-gradient(
					to bottom,
					var(--lwt-tab-line-color) 3px,
					var(--tab-selected-bgcolor) 3px,
					var(--toolbar-bgcolor)
				) !important;
			}

			&[tab-selected-bgcolor-transparent="true"] {
				&[style*="--gktab-selected-bgcolor"]:not([style*="--lwt-tab-line-color"]) {
					--selected-tab-background: linear-gradient(
						to bottom,
						color-mix(
							in srgb,
							var(--gktab-selected-bgcolor) calc(var(--gktab-selected-bgcolor-opacity-percentage) + var(--selected-tab-background-opacity-percentage-additive)),
							var(--toolbar-bgcolor)
						) 3px,
						var(--toolbar-bgcolor)
					) !important;
				}
				&[style*="--lwt-tab-line-color"][style*="--gktab-selected-bgcolor"] {
					--selected-tab-background: linear-gradient(
						to bottom,
						var(--lwt-tab-line-color) 3px,
						color-mix(
							in srgb,
							var(--gktab-selected-bgcolor) calc(var(--gktab-selected-bgcolor-opacity-percentage) + var(--selected-tab-background-opacity-percentage-additive)),
							var(--toolbar-bgcolor)
						) 3px,
						var(--toolbar-bgcolor)
					) !important;
				}
			}

			&[toolbar-bgcolor-transparent="true"] {
				&:not([style*="--tab-selected-bgcolor"], [style*="--lwt-tab-line-color"]) {
					--selected-tab-background: var(--gktoolbar-bgcolor) !important;
				}
				&[style*="--lwt-tab-line-color"]:not([style*="--tab-selected-bgcolor"]) {
					--selected-tab-background: linear-gradient(
						to bottom,
						var(--lwt-tab-line-color) 3px,
						var(--gktoolbar-bgcolor) 3px
					) !important;
				}
				&[style*="--tab-selected-bgcolor"]:not([style*="--lwt-tab-line-color"])  {
					--selected-tab-background: linear-gradient(
						to bottom,
						var(--tab-selected-bgcolor) 3px,
						var(--gktoolbar-bgcolor)
					) !important;

					&[style*="--gktoolbar-bgcolor-opacity-percentage: 0%"] {
						--selected-tab-background: linear-gradient(
							to bottom,
							var(--tab-selected-bgcolor) 3px,
							var(--lwt-accent-color)
						) !important;
					}
				}
				&[style*="--lwt-tab-line-color"][style*="--tab-selected-bgcolor"] {
					--selected-tab-background: linear-gradient(
						to bottom,
						var(--lwt-tab-line-color) 3px,
						var(--tab-selected-bgcolor) 3px,
						var(--gktoolbar-bgcolor)
					) !important;

					&[style*="--gktoolbar-bgcolor-opacity-percentage: 0%"] {
						--selected-tab-background: linear-gradient(
							to bottom,
							var(--lwt-tab-line-color) 3px,
							var(--tab-selected-bgcolor) 3px,
							var(--lwt-accent-color)
						) !important;
					}
				}

				&[tab-selected-bgcolor-transparent="true"] {
					&[style*="--gktab-selected-bgcolor"]:not([style*="--lwt-tab-line-color"]) {
						--selected-tab-background: linear-gradient(
							to bottom,
							color-mix(
								in srgb,
								var(--gktab-selected-bgcolor) calc(var(--gktab-selected-bgcolor-opacity-percentage) + var(--selected-tab-background-opacity-percentage-additive)),
								var(--gktoolbar-bgcolor)
							) 3px,
							var(--gktoolbar-bgcolor)
						) !important;

						&[style*="--gktoolbar-bgcolor-opacity-percentage: 0%"] {
							--selected-tab-background: linear-gradient(
								to bottom,
								color-mix(
									in srgb,
									var(--gktab-selected-bgcolor) calc(var(--gktab-selected-bgcolor-opacity-percentage) + var(--selected-tab-background-opacity-percentage-additive)),
									var(--lwt-accent-color)
								) 3px,
								var(--lwt-accent-color)
							) !important;
						}
					}
					&[style*="--lwt-tab-line-color"][style*="--gktab-selected-bgcolor"] {
						--selected-tab-background: linear-gradient(
							to bottom,
							var(--lwt-tab-line-color) 3px,
							color-mix(
								in srgb,
								var(--gktab-selected-bgcolor) calc(var(--gktab-selected-bgcolor-opacity-percentage) + var(--selected-tab-background-opacity-percentage-additive)),
								var(--gktoolbar-bgcolor)
							) 3px,
							var(--gktoolbar-bgcolor)
						) !important;

						&[style*="--gktoolbar-bgcolor-opacity-percentage: 0%"] {
							--selected-tab-background: linear-gradient(
								to bottom,
								var(--lwt-tab-line-color) 3px,
								color-mix(
									in srgb,
									var(--gktab-selected-bgcolor) calc(var(--gktab-selected-bgcolor-opacity-percentage) + var(--selected-tab-background-opacity-percentage-additive)),
									var(--lwt-accent-color)
								) 3px,
								var(--lwt-accent-color)
							) !important;
						}
					}
				}
				
			}
		}
		// if FXChrome-like
		&[customthememode="fxchrome"] {
			--selected-tab-background: var(--toolbar-bgcolor) !important;
			--inactive-tab-background: color-mix(
				in srgb,
				color-mix(
					in srgb,
					var(--toolbar-bgcolor, var(--lwt-accent-color)) 90%,
					black
				) 80%,
				transparent
			) !important;

			&[toolbar-bgcolor-transparent="true"] {
				--selected-tab-background: var(--gktoolbar-bgcolor) !important;
				--inactive-tab-background: color-mix(
				in srgb,
				color-mix(
					in srgb,
					var(--gktoolbar-bgcolor, var(--lwt-accent-color)) 90%,
					black
				) 80%,
				transparent
			) !important;
			}
		}
		// if Silverfox
		&[customthememode="silverfox"] {
			--selected-tab-background: linear-gradient(
				to bottom,
				transparent -50%,
				var(--toolbar-bgcolor) 70%
			) !important;

			--inactive-tab-background: linear-gradient(
				to bottom,
				transparent -10%,
				color-mix(
					in srgb,
					var(--toolbar-bgcolor) 70%,
					transparent
				) 60%
			) !important;

			&[toolbar-bgcolor-transparent="true"] {
				--selected-tab-background: linear-gradient(
					to bottom,
					transparent -50%,
					var(--gktoolbar-bgcolor) 70%
				) !important;
	
				--inactive-tab-background: linear-gradient(
					to bottom,
					transparent -10%,
					color-mix(
						in srgb,
						var(--gktoolbar-bgcolor) 70%,
						transparent
					) 60%
				) !important;
			}
		}
	}
	// else if chrtheme
	&[gkthemed][gkchrthemed] {
		--tab-glare-opacity: .5 !important;
		&:not([geckium-eleven]) {
			--tab-glare: var(--selected-tab-background, var(--default-selected-tab-background)) !important;
		}
		--inactive-tab-background: var(--chrtheme-theme-tab-background, var(--chrtheme-frame, var(--default-inactive-tab-background))) !important;
		
		&[gktitnative="true"] { // Use different inactive tab background when in System
			--inactive-tab-background: var(--chrtheme-theme-tab-background-v, var(--chrtheme-frame, var(--default-inactive-tab-background))) !important;
		}
		
		--tabbrowser-tab-color-inactive: var(--chrtheme-tab-background-text, var(--default-tabbrowser-tab-color-inactive, var(--default-tabbrowser-tab-color))) !important;
		--theme-newtab: var(--chrtheme-control-background, var(--default-theme-newtab)) !important;
		&[gkchrthemehastoolbar] {
			--selected-tab-background: var(--chrtheme-theme-toolbar, var(--chrtheme-toolbar)) !important;
			--tabbrowser-tab-color: var(--chrtheme-tab-text, var(--default-tabbrowser-tab-color)) !important;

			// Fix textures being offset in Chromium Themes
			.tab-background-container::before {
				background-attachment: fixed !important;
			}
			.tabbrowser-tab:not([style*="transform: "]) .tab-background-container::before {
				background-position-y: calc(var(--tab-distance-from-top) + var(--toolbar-background-y-pos) + var(--gktabbar-y, 0px)) !important;
			}
		}

		&[privatebrowsingmode="temporary"] {
			--inactive-tab-background: var(--chrtheme-theme-tab-background-incognito, var(--chrtheme-frame-incognito, var(--default-inactive-tab-background))) !important;

			&[gktitnative="true"] { // Use different inactive tab background when in System
				--inactive-tab-background: var(--chrtheme-theme-tab-background-v, var(--chrtheme-frame-incognito, var(--default-inactive-tab-background))) !important;
			}
		}
	}

	&:not([geckium-thirtyseven]) [soundplaying] .tab-icon-image {
		display: flex !important;
	}

	#TabsToolbar-customization-target {
		/** 
		*	bruni: This makes every element in the tabs toolbar align to the
		*		   bottom, fixing for example the people button position.
		*/
		align-items: end;
	}

	.tab-drop-indicator {
		position: absolute !important;
		z-index: 101 !important;
		bottom: 0 !important;
		background: var(--tab-drop-indicator-icon-normal) !important;
		height: 41px;
	}

	#tabbrowser-tabs,
	#tabbrowser-arrowscrollbox,
	#tabbrowser-tabs[positionpinnedtabs]
		> #tabbrowser-arrowscrollbox
		> .tabbrowser-tab[pinned] {
		min-height: var(--tab-height) !important;
	}

	#tabbrowser-tabs {
		// Disable tab scrolling
		--tab-min-width: 0 !important;

		/**
		*  bruni: Remove border and spacings before tabs (spacing is taken
		*		   care by `.titlebar-spacer` already)
		*/
		border-inline-start: 0 !important;
		padding: 0 !important;
		margin: 0 !important;

		// Create the illusion that tabs is part of the main toolbar
		margin-block-end: -1px !important;

		// Counteract the spacing in the tab textures to ensure there is no gap
		margin-top: -1px !important;
	}

	#tabbrowser-arrowscrollbox {
		align-items: end;
	}

	// Tab container
	.tabbrowser-tab {
		--tab-label-mask-size: 1em !important;

		overflow: visible !important;
		min-height: var(--tab-height) !important;
		height: var(--tab-height) !important;
		max-height: var(--tab-height) !important;
		margin-inline-start: 0 !important;
		padding: 0 !important;
		color: var(--tabbrowser-tab-color-inactive, var(--default-tabbrowser-tab-color-inactive, var(--default-tabbrowser-tab-color))) !important;

		pointer-events: none !important;

		&:hover .tab-glare-container {
			opacity: var(--tab-glare-opacity);

			/* bruni: In Chrome, the glare shows up faster when hovering. */
			transition-property: opacity;
			transition-duration: var(--tab-glare-hover-timer);
			transition-timing-function: linear;
		}

		&[sharing] .tab-sharing-icon-overlay {
			display: revert !important;
		}

		.tab-content > .tab-sharing-icon-overlay {
			display: none !important;
		}
		
		.tab-icon-stack .tab-sharing-icon-overlay {
			align-self: end;
			justify-self: end;
	
			&[sharing="microphone"] {
				list-style-image: var(--tab-recording) !important;
				width: var(--tab-recording-size) !important;
				height: var(--tab-recording-size) !important;
			}

			&[sharing="screen"] {
				list-style-image: var(--tab-capture) !important;
				width: var(--tab-capture-size) !important;
				height: var(--tab-capture-size) !important;
			}
		}

		// Hide NEW tab mute button for now.
		.tab-audio-button {
			display: none !important;
		}

		&:not([soundplaying]),
		&[muted] {
			.tab-mute-button {
				animation: unset;
			}
		}

		&[soundplaying],
		&[muted] {
			&[pinned] .tab-mute-button {
				pointer-events: none;
			}
		}

		&:not([soundplaying], [muted]) .tab-mute-button {
			display: none;
		}
		&[muted] .tab-mute-button {
			opacity: 0;
		}

		&[visuallyselected] {
			// Bring selected tab to front
			z-index: 100 !important;

			min-width: var(--tab-selected-min-width) !important;

			color: var(--tabbrowser-tab-color, var(--default-tabbrowser-tab-color)) !important;

			&[minwidthreached="true"] .tab-icon-stack {
				visibility: hidden !important;
				position: absolute !important;
			}

			.tab-background-container {
				&::before {
					background: var(--selected-tab-background, var(--default-selected-tab-background));
				}

				&::after {
					background-image: var(--tab-inline-start-active-texture), var(--tab-inline-center-active-texture), var(--tab-inline-end-active-texture);
				}
			}

			.tab-glare-container {
				opacity: 0 !important;
				transition: opacity 0s !important;
			}
		}
		&:not([visuallyselected]) .tab-background-container > *::before {
			background: var(--inactive-tab-background, var(--default-inactive-tab-background));
		}
		.tab-content:is([selected], [multiselected]) { // Necessary addition for post-128 Firefox
			color: var(--tabbrowser-tab-color, var(--default-tabbrowser-tab-color)) !important;
		}

		/** 
		*  This was changed to a sibling comparator (`+`) instead of a
		*  `:not([:first-child)]` so we can be more specific with the
		*  masking if needed in the future.
		*
		*  This way of masking has caused problems, such as the illusion
		*  breaking when tabs are being moved, however, there aren't any
		*  other good alternatives besides using **JavaScript**,
		*	unfortunately.
		*  What was already tried (**SCSS only**):
		*
		*  ## Disabling this mask when any tab is being moved
		*  Issue: this actually broke the illusion even more by showing
		*		   the user how all tabs look when this mask is disabled.
		*
		*  ## Not applying this mask to the sibling of a tab that is being
		*     moved
		*  Issue: while it solves the issue, when another tab goes in the
		*  	   position of the current moving tab's place before
		*		   translation was applied, the other tabs will still
		*		   overlap eachother, breaking the illusion.
		*
		*  ## Blurring the tab behind and changing the `z-index` of tabs so
		*     new tabs are always behind others
		*  Issue: you can't blur ONLY THE TAB BEHIND
		*		   (`backdrop-filter: blur(Xpx)`), this means that the
		*		   titlebar background in custom themes gets blurred.
		* 
		*  - Love, Bruni
		*/
		&:not([pinned]) + .tabbrowser-tab:not([visuallyselected]),
		&[pinned] + .tabbrowser-tab:not([visuallyselected]) {
			/**
			*  bruni: `:nth-child(2)[style*="transform: translateX(-192px);"]`:
			*  	   The mask will not apply to the second tab when it is
			*  	   moved to the position of the first tab.
			*/
			&:not(:nth-child(2)	[style*="transform: translateX(-192px);"]) {
				.tab-background-container {
					&::before {
						mask-image: var(--tab-inline-start-inactive2-mask), var(--tab-inline-center-mask), var(--tab-inline-end-mask);
					}

					&::after {
						background-image: var(--tab-inline-start-inactive2-texture), var(--tab-inline-center-inactive-texture), var(--tab-inline-end-inactive-texture);
					}
				}

				.tab-context-line {
					mask-image:	var(--tab-container2-left),	var(--tab-container-center), var(--tab-container-right);
				}
		
				.tab-glare-container {
					mask-image: var(--tab-inline-start-inactive2-mask), var(--tab-inline-center-mask), var(--tab-inline-end-mask);
				}
			}
		}

		&[fadein]:not([style*="max-width"]) {
			&[pinned] {
				max-width: var(--tab-pinned-width) !important;
			}
			&:not([pinned]) {
				max-width: var(--tab-normal-width) !important;
			}
		}

		/* bruni: This controls the tab "open"/"close" transition. */
		&:not([pinned]) {
			transition: min-width var(--tab-transition-time) ease,
						max-width var(--tab-transition-time) ease !important;
		}

		/**
		*  bruni: This makes it so the tab does not disappear when it
		*  	   starts the "close" transition and it also makes the tab
		*		   disappear when the background reaches min-width just
		*		   like real Chrome.
		*/
		&:not([pinned], [fadein]) {
			visibility: unset !important;
			pointer-events: none !important;
			animation: hide-tab var(--tab-transition-time) ease;
		}

		&[pinned] {
			.tab-stack {
				width: 100px !important; // Force pinned tab size.
			}

			.tab-content {
				justify-content: center !important;
			}

			.tab-icon-stack {
				margin-inline-start: var(--tab-pinned-icon-offset-x);
			}
			
			.tab-label-container {
				display: none !important;
			}
		}
	}

	/**
	*	bruni: This controls the transition of the tabs moving around while
	*  	   a tab is being dragged, keep this here so the tab
	* 		   "open"/"close" transition doesn't overwrite it.
	*/
	@media (prefers-reduced-motion: no-preference) {
		#tabbrowser-tabs[movingtab]
			> #tabbrowser-arrowscrollbox
			> .tabbrowser-tab[fadein]:not([selected]):not([multiselected]),
		.tabbrowser-tab[tab-grouping],
		.tabbrowser-tab[tabdrop-samewindow] {
			transition: transform 200ms var(--animation-easing-function) !important;
		}

		.tab-throbber[progress]::before,
		.tabbrowser-tab[busy] .tab-throbber:not([progress])::before {
			opacity: 1 !important;
		}

		.tab-throbber[progress]::before {
			background-image: url(chrome://userchrome/content/assets/img/tabbar/throbber.png) !important;
			width: 576px !important;
			background-size: 576px 16px !important;
			animation: progress-throbber 1s steps(36) infinite !important;
		}

		.tabbrowser-tab[busy] .tab-throbber:not([progress])::before {
			background-image: url(chrome://userchrome/content/assets/img/tabbar/throbber_waiting.png) !important;
			width: 2864px !important;
			background-size: 2864px 16px !important;
			animation: waiting-throbber 5s steps(179) infinite !important;
		}
	}

	.tab-stack {
		align-items: start;
	}

	.tab-background {
		/**
		*	bruni: Remove all styles from `.tab-background`, we are gonna use
		*		   a Geckium-only element:
		*  	   - `.tab-background-container`;
		*/
		all: unset !important;

		position: absolute !important;
		width: 100% !important;
		height: 100% !important;

		pointer-events: none !important;
	}

	
	.tab-background-container,
	.tab-context-line {
		position: absolute;
		height: 100% !important;
	}

	.tab-background-container {
		width: 100% !important;

		/* Tab texturing */
		&::before,
		&::after {
			content: "";
			position: absolute;
			height: 100%;
			width: calc(100% + var(--tab-gap-between) * -1);
		}

		&::before {
			background: var(--inactive-tab-background, var(--default-inactive-tab-background));

			mask-image:	   var(--tab-inline-start-mask),  var(--tab-inline-center-mask),				  var(--tab-inline-end-mask);
			mask-size:	   var(--tab-sides-width) 100%,   calc(100% - (var(--tab-sides-width) * 2)) 100%, var(--tab-sides-width) 100%;
			mask-position: left 0,						  var(--tab-sides-width) 0,						  right 0;
			mask-repeat:   no-repeat;
		}

		&::after {
			background-image:	 var(--tab-inline-start-inactive-texture), var(--tab-inline-center-inactive-texture),	   var(--tab-inline-end-inactive-texture);
			background-size:	 var(--tab-sides-width) 100%,			   calc(100% - (var(--tab-sides-width) * 2)) 100%, var(--tab-sides-width) 100%;
			background-position: left 0,								   var(--tab-sides-width) 0,					   right 0;
			background-repeat:	 no-repeat;
		}
	}

	.tab-context-line {
		margin: 0 !important;
		width: calc(100% + var(--tab-gap-between) * -1) !important;

		mask-image:		var(--tab-container-left),		var(--tab-container-center),					var(--tab-container-right);
		mask-size:		var(--tab-sides-width) 100%,	calc(100% - (var(--tab-sides-width) * 2)) 100%,	var(--tab-sides-width) 100%;
		mask-position:	left 0,							var(--tab-sides-width) 0,						right 0;
		mask-repeat:	no-repeat;
	}

	.tab-glare-container {
		position: absolute;
		width: calc(100% + var(--tab-gap-between) * -1);
		height: 100%;
		opacity: 0;
		pointer-events: none;

		/**
		*  bruni: In Chrome, the glare hides in a slower pace when the
		*		   mouse leaves.
		*/
		transition: opacity var(--tab-glare-unhover-timer) linear;

		mask-image:	   var(--tab-inline-start-mask),  var(--tab-inline-center-mask),				  var(--tab-inline-end-mask);
		mask-size:	   var(--tab-sides-width) 100%,   calc(100% - (var(--tab-sides-width) * 2)) 100%, var(--tab-sides-width) 100%;
		mask-position: left 0,						  var(--tab-sides-width) 0,						  right 0;
		mask-repeat:   no-repeat;

		> .tab-glare {
			position: absolute;
			height: 100%;
			width: 400px;
			transform: translateX(-50%);
		
			/**
			*  bruni: We are using the glare as background hover for
			*		   Chrome 5-6, if we transition the background of the tab
			*		   instead, it will try to transition from gradient
			*		   (active) to colour (inactive) and since gradients are
			*		   not animatable (in Gecko), you will see a transition
			*		   from transparent to inactive tab colour, and we don't
			*		   want that.
			*/
			background: var(--tab-glare);
		
			/**
			*	bruni: Firefox gradient rendering has some issues, in this case,
			*		   sometimes in the middle it produces transparent Y pixels,
			*		   so we are blurring it to make it unnoticeable.
			*/
			filter: blur(2px);
		}
	}

	.tab-hitbox,
	.tab-content {
		height: calc(var(--tab-height) - 1px);
		pointer-events: auto !important;
	}

	.tab-hitbox {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		margin-inline-start: calc(var(--tab-inner-margin-start) / 2);
	}

	.tab-content {
		position: relative;
		padding: 0 !important;
		margin-block-start: var(--tab-content-y-from-top) !important;
		margin-inline-start: var(--tab-inner-margin-start) !important;
		padding-inline-end: var(--tab-inner-margin-end) !important;
	}

	.tab-icon-stack {
		margin-block-start: 1px;

		&::before {
			content: '';
			max-width: 16px;
			max-height: 16px;
		}
	}

	.tab-label-container {
		height: auto !important;
		margin-inline-start: var(--tab-gap-between-favicon-and-title);
	}

	.tab-label {
		display: flex !important;
	}

	.tab-throbber,
	.tab-icon-pending,
	.tab-icon-image,
	.tab-sharing-icon-overlay {
		&:not([pinned]) {
			margin-inline-end: unset !important;
		}

		visibility: unset !important;
	}

	.tab-icon-image {
		opacity: unset !important;
	}

	// We are using a custom Geckium element called `.tab-mute-button` instead.
	// Hide "Playing"/etc... label below tab title.
	.tab-icon-overlay,
	.tab-secondary-label {
		display: none;
	}

	.tab-mute-button {
		position: absolute;
		width: var(--tab-audio-animation-spritesheet-height);
		height: var(--tab-audio-animation-spritesheet-height);
		background-image: var(--tab-audio-animation-spritesheet-image);
		background-position: 0px;
		animation: audio-animation var(--tab-audio-animation-duration) steps(var(--tab-audio-animation-frames)) infinite;
	}

	.tab-close-button {
		list-style-image: var(--tab-close-button-normal) !important;
		fill: currentColor !important;
		margin: 0 !important;
		margin-block-start: var(--tab-close-button-margin-block-start) !important;
		margin-inline-end: var(--tab-close-button-margin-inline-end) !important;
		padding: 0 !important;
		width: auto !important;
		height: auto !important;

		// Fix close button not working sometimes in Windows
		-moz-window-dragging: no-drag;

		&:hover {
			list-style-image: var(--tab-close-button-hot) !important;
		}

		&:active {
			list-style-image: var(--tab-close-button-pressed) !important;
		}
	}
	.close-icon:hover {
		background-color: transparent !important;
	}

	#tabbrowser-arrowscrollbox-periphery {
		// Align new tab button to the bottom
		align-items: end;
		margin-block-end: var(--newtab-distance-from-bottom);

		// Add margin between new tab button and tabs container
		margin-inline-start: var(--newtab-distance-from-tabs);
	}

	// New tab button
	#tabs-newtab-button,
	#TabsToolbar #new-tab-button {
		position: relative;
		padding: 0 !important;
		list-style-image: none !important;
		height: var(--newtab-height) !important;
		width: var(--newtab-width) !important;

		&::before { // pseudo is used here as the required mask weakens the texture's border otherwise
			content: "";
			position: absolute;
			height: 100%;
			width: 100%;

			// Custom theme new tab button background texture.
			mask-image: var(--newtab-button-mask);
			mask-position: center;
			mask-size: var(--newtab-width) var(--newtab-height);
			background: var(--theme-newtab, var(--default-theme-newtab));
		}

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

		.toolbarbutton-icon {
			z-index: 1; // Keep it above pseudos
			height: 100% !important;
			width: 100% !important;
			background-color: transparent !important;
			
			box-shadow: none !important;
			border-radius: 0 !important;
			background-image: var(--newtab-button-texture-normal);
			background-position: center;
			background-repeat: no-repeat;
			background-size: var(--newtab-width) var(--newtab-height);
		}
		&:hover .toolbarbutton-icon {
			background-image: var(--newtab-button-texture-hot);
		}
		&:hover:active .toolbarbutton-icon {
			background-image: var(--newtab-button-texture-pressed);
		}
	}

	//Tab styles
	// Windows is the baseline styled above
	// Linux
	&[gktabstyle="1"] {
		@import "tabs/linux";
	}
	// Mac OS X / macOS
	&[gktabstyle="2"] {
		@import "tabs/mac";
	}
}