/* Tabs bar  */

@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";

/* Override vars */
:root {
	--space-above-tabbar: 0 !important;
	--tab-inner-inline-margin: var(--gnome-toolbar-padding) !important;
	--tab-pinned-margin-inline-expanded: calc(var(--gnome-toolbar-padding)  / 2) !important;
	--tab-min-height: var(--gnome-button-size) !important;
	--tab-border-radius: var(--gnome-button-radius) !important;	
	--tab-hover-background-color: var(--gnome-hover-color) !important;
	--tab-selected-bgcolor: var(--gnome-selected-color) !important;
	--tab-pinned-container-margin-inline-expanded: calc(var(--gnome-toolbar-padding) / 2) !important;
	--tabstrip-inner-border: 1px solid var(--gnome-border-color) !important;
	--tab-height-with-margin-padding: calc(var(--tab-min-height) + 5px) !important;
	
	--gnome-tabbar-tab-close-overlay-bg: var(--gnome-tabbar-tab-hover-background);

	@media not -moz-pref("sidebar.verticalTabs") {
		/* We need the hardcoded tab colors in horizontal tabs, beacuse of the close button overlay */
		--tab-hover-background-color: var(--gnome-tabbar-tab-hover-background) !important;
		--tab-selected-bgcolor: var(--gnome-tabbar-tab-active-background) !important;
	}
	
	@media -moz-pref("sidebar.verticalTabs") {
		--tab-block-margin: calc(var(--gnome-toolbar-padding)  / 2) !important;
	}
	
}

/* Tabsbar */
#TabsToolbar {
	background-color: var(--gnome-tabbar-background) !important;
	border-bottom: 0 !important;
	padding: 0 calc(var(--gnome-toolbar-padding) / 2) !important;
	position: relative;
	z-index: 1;

	--toolbarbutton-inner-padding: var(--toolbarbutton-inner-padding) !important;
	/* Remove hover effects on tab bar buttons */
	--toolbarbutton-active-background: transparent !important;
	--toolbarbutton-hover-background: transparent !important;
	/* Tabs scroll fade */
	--gnome-tabbar-fade-background: var(--gnome-tabbar-background);
	
	/* Remove tabbar's window controls */
	.titlebar-buttonbox-container {
		display: none !important;
	}

	/* Remove blank spaces on tabs start and end */
	.titlebar-spacer {
		display: none !important;
	}

	/* Tabsbar buttons */
	.toolbarbutton-1 {
		border-radius: var(--gnome-button-radius) !important;
		margin: 0px calc(var(--gnome-toolbar-spacing) / 2) var(--gnome-toolbar-padding) !important;
		min-height: var(--gnome-button-size) !important;
		min-width: var(--gnome-button-size) !important;
		transition: background var(--gnome-animation-time);
		
		&:not([disabled]):not(:active):not([open]):hover {
			background-color: var(--gnome-tabbar-tab-hover-background) !important;
		}
		&:active, &[open] {
			background-color: var(--gnome-tabbar-tab-active-background) !important;
		}
	}
}

/* Tabs container */
#tabbrowser-tabs {
	/* Horizontal */
	&[orient="horizontal"] {
		&, arrowscrollbox {
			height: auto !important;
			min-height: auto !important;
			--tab-min-height: var(--gnome-button-size) !important;
		}
	}

	/* Vertical */
	&[orient="vertical"] {
		--icon-size: 16px !important;
		grid-gap: 0 !important;
		
		#vertical-tabs-newtab-button {
			margin-block: calc(var(--gnome-toolbar-spacing) / 2) var(--gnome-toolbar-spacing) !important;
		}		
	}
}

/* Tabs scroll */
#tabbrowser-arrowscrollbox {
	&[orient="horizontal"] {
		position: relative !important;
	}

	&[orient="vertical"] {
		--gnome-undershoot-top: inset 0 1px color-mix(in srgb, var(--gnome-shade-color) 75%, transparent);
		--gnome-undershoot-bottom: inset 0 -1px color-mix(in srgb, var(--gnome-shade-color) 75%, transparent);

		&[overflowing] {
			&:not([scrolledtostart]) {
				box-shadow: var(--gnome-undershoot-top);
			}
			&:not([scrolledtoend]) {
				box-shadow: var(--gnome-undershoot-bottom);
			}
			&:not([scrolledtostart], [scrolledtoend]) {
				box-shadow: var(--gnome-undershoot-top),  var(--gnome-undershoot-bottom);
			}
		}
	}
}

/* Horizontal tabs scroll fade */
#scrollbutton-up:has(~ scrollbox[orient="horizontal"]),
scrollbox[orient="horizontal"] ~ #scrollbutton-down {
	border-top: 0 !important;
	position: absolute !important;
	z-index: 5 !important;
	top: 0;
	bottom: 0;
}
#scrollbutton-up:has(~ scrollbox[orient="horizontal"])[disabled],
scrollbox[orient="horizontal"] ~ #scrollbutton-down[disabled] {
	display: none;
}
#scrollbutton-up:has(~ scrollbox[orient="horizontal"]) > .toolbarbutton-icon,
scrollbox[orient="horizontal"] ~ #scrollbutton-down > .toolbarbutton-icon{
	visibility: hidden;
}
scrollbox[orient="horizontal"] ~ #scrollbutton-down {
	right: 0;
	margin-inline-end: -5px !important;
}
#scrollbutton-up:has(~ scrollbox[orient="horizontal"]) {
	left: 0;
	margin-inline-start: -5px !important;
}
#scrollbutton-up:has(~ scrollbox[orient="horizontal"]):not([disabled])::after,
scrollbox[orient="horizontal"] ~ #scrollbutton-down:not([disabled])::after {
	content: "";
	height: 39px;
	position: absolute;
	top: -3px;
	z-index: -1;
	width: 50px;
	pointer-events: none;
}
#scrollbutton-up:has(~ scrollbox[orient="horizontal"]):not([disabled])::after {
	background: linear-gradient(to right, var(--gnome-tabbar-fade-background) 10px, transparent);
	left: 0;
}
scrollbox[orient="horizontal"] ~ #scrollbutton-down:not([disabled])::after {
	background: linear-gradient(to left, var(--gnome-tabbar-fade-background) 10px, transparent);
	right: 0;
}
spacer[part=overflow-start-indicator], spacer[part=overflow-end-indicator] {
	width: 0 !important;
	border: 0 !important;
	margin-inline: 0 !important;
}

/* Tabs */
.tabbrowser-tab {
	&[selected="true"] {
		--gnome-tabbar-tab-close-overlay-bg: var(--gnome-tabbar-tab-active-background);
		&:hover {
			--gnome-tabbar-tab-close-overlay-bg: var(--gnome-tabbar-tab-active-hover-background) !important;
		}
	}
	@media -moz-pref("gnomeTheme.closeOnlySelectedTabs") {
		--gnome-tabbar-tab-close-overlay-bg: unset;
	}

	/* OPTIONAL: Add more contrast to the active tab */
	@media -moz-pref("gnomeTheme.activeTabContrast") {
		&[selected="true"], &:hover {
			--tab-hover-background-color: var(--gnome-tabbar-tab-active-background-contrast) !important;
			--tab-selected-bgcolor: var(--gnome-tabbar-tab-active-background-contrast) !important;
			--gnome-tabbar-tab-close-overlay-bg: var(--gnome-tabbar-tab-active-background-contrast) !important;
		}
	}	

	/* Horizontal tabs only */
	#tabbrowser-tabs[orient="horizontal"] & {
		position: relative;

		> stack {
			height: var(--tab-min-height) !important;
			width: var(--tab-min-height) !important;
			min-height: var(--tab-min-height) !important;
		}

		/* Not in collapsed tab-group */
		:not([collapsed]) > & {
			padding: 0px calc(var(--gnome-toolbar-spacing) / 2 - 1px) var(--gnome-toolbar-padding) !important;
			&:not([hidden=true]):last-of-type {
				padding-right: calc(var(--gnome-toolbar-spacing) / 2) !important;
			}

			/* Full width tabs */
			@media not -moz-pref("gnomeTheme.normalWidthTabs") {
				&:not([style^="max-width"]):not([pinned]),
				&[style^="max-width: 100px !important;"]:not([pinned]) {
					max-width: 100% !important;
					--tab-min-width-pref: 131px !important;
				}
				&:not([style^="max-width"]):not([pinned]):not([fadein]),
				&[style^="max-width: 100px !important;"]:not([pinned]):not([fadein]) {
					max-width: .1px !important;
				}
			}
		}
	}
	
	/* Vertical tabs only */
	#tabbrowser-tabs[orient="vertical"] & {
		padding-block: calc(var(--gnome-toolbar-spacing) / 2) !important;
	}
}

/* Tab background */
.tab-background {
	box-shadow: none !important;
	transition: background var(--gnome-tab-animation-time) linear !important;
	margin-block: 0 !important;

	/* Selected hover */
	tab[selected]:hover & {
		background-color: var(--gnome-selected-hover-color) !important;
		@media not -moz-pref("sidebar.verticalTabs") {
			background-color: var(--gnome-tabbar-tab-active-hover-background) !important;
		}
	}

	/* Use raised button colors for pinned tabs in vertical */
	#tabbrowser-tabs[orient="vertical"] tab[pinned] & {
		background-color: var(--gnome-button-background) !important;
		&[selected] {
			background-color: var(--gnome-button-checked-background) !important;
		}
		
		tab:hover & {
			background-color: var(--gnome-button-hover-background) !important;
			&[selected] {
				background-color: var(--gnome-button-checked-hover-background) !important;
			}
		}
	}
	
	/* Add solid bg on tabs dnd */
	#tabbrowser-tabs[movingtab] tab:is([multiselected], [selected]) & {
		background-color: var(--gnome-tabbar-background) !important;
		background-image: linear-gradient(var(--tab-selected-bgcolor), var(--tab-selected-bgcolor)) !important;
	}
}

/* Tab content */
.tab-content {	
	#tabbrowser-tabs[orient="horizontal"] & {
		justify-content: center !important; /* Center content on horizontal tabs */
		align-items: center !important;
		justify-content: center !important;
		margin-top: -1px;
		position: relative !important;
		&:not([pinned]) {
			padding: 0 4px !important;
		}
		&[pinned] {
			padding: 0 5px !important;
		}

		/* Rearrange contents */
		.tab-audio-button {
			order: 0;
		}
		.tab-icon-stack {
			order: 1;
		}
		.tab-label-container {
			order: 2;
		}
		.tab-close-button {
			order: 3;
		}

		/* Prevent tab icons size breaking */
		.tab-icon-image, .tab-icon-sound, .tab-throbber, .tab-throbber-fallback, .tab-close-button {
			min-width: 16px;
		}

		/* Tab close button etc. positioning */
		.tab-throbber, .tab-icon-image, .tab-sharing-icon-overlay, .tab-icon-sound, .tab-close-button {
			margin-top: 0 !important;
		}

		/* Close button overlay */
		&:not([pinned])::before {
			background: linear-gradient(to left, var(--gnome-tabbar-tab-close-overlay-bg) 50%, transparent);
			border-radius: 0 4px 4px 0;
			bottom: 2px;
			content: "";
			height: calc(100% - 5px);
			opacity: 0;
			position: absolute;
			right: 2px;
			transition: all var(--gnome-tab-animation-time) linear;
			width: 55px;
			z-index: 99;
		}
		&:not([pinned])[selected]::before,
		tab:hover &::before {
			opacity: 1;
		}
		:root[dir="rtl"] &:not([pinned])::before {
			display: none;
		}
		
		/* Left close button */
		@media (-moz-gtk-csd-reversed-placement) and (not -moz-pref("gnomeTheme.swapTabClose")),
			(-moz-pref("gnomeTheme.swapTabClose")) and (not (-moz-gtk-csd-reversed-placement)) {
				/* Rearrange and fix alignment */
				.tab-audio-button {
					order: 3 !important;
				}
				.tab-icon-stack {
					margin-inline-start: 0 !important;
				}
				.tab-label-container {
					margin-inline-end: auto !important;
				}
				.tab-close-button {
					margin-inline-start: 0 !important;
					order: 0 !important;
				}

				/* Overlay is not longer needed */
				:root[dir="ltr"] &:not([pinned])::before {
					display: none !important;
				}
		}
	}
}

/* Tab label */
.tab-label-container {
	#tabbrowser-tabs[orient="horizontal"] & {
		min-width: 0 !important;
		max-width: min-content !important;
		:root[dir="ltr"] &:not([pinned]) {
			margin-inline-end: -16px;
		}
		
		/* Fix alignment when audio button is prestent */
		tab:is([muted], [soundplaying]) & {
			@media (not (-moz-gtk-csd-reversed-placement)) and (not -moz-pref("gnomeTheme.swapTabClose")) {
				margin-inline-end: 0 !important;
			}
		}
	}

	/* Hide secondary label, muted, playing, etc */
	.tab-secondary-label  {
		display: none;
	}
}

/* Tab buttons */
.tab-icon-overlay,
.tab-close-button {
	border: 0 !important;
	box-sizing: content-box !important; /* Avoid deformation on flexbox */
	border-radius: 50% !important;
	padding: 4px !important;
	background-image: none !important;
	background-color: transparent !important;
	background-size: 24px;
	transition: all var(--gnome-animation-time) ease-out !important;

	&:hover {
		background-color: var(--gnome-hover-color) !important;
	}
	&:active {
		background-color: var(--gnome-active-color) !important;
	}
	
	/* Set solid bg when in no expanded vertical tabs */
	#tabbrowser-tabs[orient="vertical"]:not([expanded]) & {
		background-color: var(--gnome-window-background) !important;
	}
}

/* Audio button */
.tab-audio-button {
	--button-border-radius: 50% !important;
	--button-size-icon-small: 24px !important;
	
	#tabbrowser-tabs[orient="horizontal"] & {
		margin-inline: 0 !important;
	}
}

/* Tab close button */
.tab-close-button {
	fill: var(--gnome-window-color) !important;
	fill-opacity: 1 !important;
	height: 16px !important;
	list-style-image: var(--gnome-icon-window-close-symbolic) !important;
	width: 16px !important;
	-moz-context-properties: fill, fill-opacity !important;
	
	#tabbrowser-tabs[orient="horizontal"] & {
		margin-inline-start: auto;
		margin-inline-end: 0 !important;
		opacity: 1 !important;
		z-index: 100 !important;

		/* Autohide */
		&:not([selected]) {
			visibility: hidden !important;
			opacity: 0 !important;
		}
		/* Show close button on tab hover */
		tab:hover & {
			@media not -moz-pref("gnomeTheme.closeOnlySelectedTabs") {
				visibility: visible !important;
				opacity: 1 !important;
			}
		}
	}
	
	#tabbrowser-tabs[orient="vertical"]:not([expanded]) & {
		padding: 2px !important;
		top: -5px !important;
		inset-inline-start: 0px !important;
	}
}

/* Icon overlay */
.tab-icon-overlay {
	height: 12px !important;
	left: 11px !important;
	top: -3px !important;
	width: 12px !important;

	&:not([crashed]) {
		padding: 2px !important;
		background: var(--gnome-button-background) !important;
		&:hover {
			background: var(--gnome-button-hover-background) !important;
		}
	}

	&[busy] {
		display: none !important;
	}
}

/* Tab icon */
.tab-icon-stack {
	align-items: center;

	/* Avoid firefox hiding elements on indicator-replaces-favicon */				
	&[indicator-replaces-favicon] :not(&) {
		opacity: 1 !important;
	}

	#tabbrowser-tabs[orient="horizontal"] & {
		&:not([pinned]) {
			margin-inline-start: auto;
			margin-inline-end: 2px;

			@media -moz-pref("gnomeTheme.tabAlignLeft") {
				/* OPTIONAL: Align tab items left */
				margin-inline-start: 0 !important;
				padding: 0 5px !important;
			}

			.tab-throbber, .tab-icon-pending, .tab-icon-image, .tab-sharing-icon-overlay, .tab-icon-overlay {
				margin-inline-end: 0 !important;
			}
		}

		&[busy], &[sharing], .tab-icon-image:not([sharing]) {
			padding: 4px;
		}

		.tab-icon-image {
			transition: opacity var(--gnome-animation-time) ease-out !important;
		}	
		&::before {
			margin: 4px;
		}
	}
}

/* Tabs separators */
:root[dir="ltr"] #tabbrowser-tabs[orient="horizontal"] {
	:not([collapsed]) > tab {
		border-color: transparent !important;
		border-left-width: 1px !important;
		border-style: solid !important;
	}
	tab:not(:first-of-type, [selected], :hover) {
		--gnome-tabbar-tab-separator-hack0: var(--gnome-tabbar-background);
		--gnome-tabbar-tab-separator-hack1: linear-gradient(
			to bottom,
			var(--gnome-tabbar-tab-separator-hack0) 0,
			var(--gnome-tabbar-tab-separator-hack0) 3px,
			var(--gnome-tabbar-tab-separator-color) 3px,
			var(--gnome-tabbar-tab-separator-color) 31px,
			var(--gnome-tabbar-tab-separator-hack0) 31px,
			var(--gnome-tabbar-tab-separator-hack0) 40px
		) 1;
		border-image: var(--gnome-tabbar-tab-separator-hack1);
	}
	tab[selected] ~ tab:not([hidden="true"]) {
		border-image: none;
	}
	tab[selected] ~ tab:not([hidden="true"]) ~ tab:not([hidden="true"]) {
		border-image: var(--gnome-tabbar-tab-separator-hack1);
	}
	tab:hover ~ tab:not([hidden="true"]) {
		border-image: none !important;
	}
	tab:hover ~ tab:not([hidden="true"]) ~ tab:not([hidden="true"]) {
		border-image: var(--gnome-tabbar-tab-separator-hack1) !important;
	}
	tab:hover ~ tab[selected] ~ tab:not([hidden="true"]) {
		border-image: none !important;
	}
	tab:hover ~ tab[selected] ~ tab:not([hidden="true"]) ~ tab:not([hidden="true"]) {
		border-image: var(--gnome-tabbar-tab-separator-hack1) !important;
	}
	tab-group[collapsed] + tab {
		border-image: none !important;
	}
}

/* Tabs group */
tab-group {
	#tabbrowser-tabs[orient="horizontal"] & {
		.tab-group-line {
			margin-block-end: calc(var(--gnome-toolbar-padding) * -1) !important;
			margin-inline: calc((var(--gnome-toolbar-spacing) / 2) * -1) !important;
		}
	}
}

.tab-group-label-container {
	padding-bottom: 0 !important;
	
	#tabbrowser-tabs[orient="vertical"][expanded] & {
		margin-block: 0 !important;
		margin-inline-start: calc(var(--tab-group-line-thickness) * -1);
	}
	
	#tabbrowser-tabs[orient="vertical"]:not([expanded]) & {
		tab-group[collapsed] & {
			margin-block: var(--gnome-toolbar-padding) !important;
		}
	}
}

.tab-group-label-hover-highlight {
	tab-group[collapsed]:not([movingtabgroup]) &:hover, tab-group[previewpanelactive] {
		background: none !important;
		box-shadow: none !important;
	}
}

/* Tabs group label */
.tab-group-label {
	border-radius: 26px !important;

	tab-group[collapsed] & {
		@media (prefers-color-scheme: dark) {
			outline: 0 !important;
		}
	}

	#tabbrowser-tabs[orient="horizontal"] &,
	#tabbrowser-tabs[orient="vertical"][expanded] & {
		padding: 2px 9px !important;
	}

	#tabbrowser-tabs[orient="vertical"][expanded] & {
		align-items: center !important;
		display: flex;
		margin-block: var(--gnome-toolbar-padding) !important;

		&::before {
			-moz-context-properties: fill;
			fill: currentColor !important;
			background: var(--gnome-icon-pan-end-symbolic) no-repeat;
			background-size: contain;
			content: "";
			display: block;
			height: 16px;
			margin-inline-end: 3px;
			width: 16px;
		}
		tab-group:not([collapsed]) &::before {
			background-image: var(--gnome-icon-pan-down-symbolic);
		}
	}
}

/* Tabs group line */
.tab-group-line {
	#tabbrowser-tabs[orient="vertical"] & {
		inset-block: -3px !important;;
	}
}

/* Tabs group overflow */
.tab-group-overflow-count-container {
	#tabbrowser-tabs[orient="vertical"] & {
		padding-block-start: 0 !important;
	}
}

/* Remove spacing between pinned tabs and first tab */
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
	margin-inline-start: 0 !important;
}

/* Always display close icon (hidden) */
#tabbrowser-tabs[closebuttons="activetab"] .tab-close-button:not([pinned]) {
	display: block !important;
}

/* Always show the muted icon when present */
#tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:not(:hover) .tab-icon-overlay[indicator-replaces-favicon] {
	opacity: 1 !important;
}

/* Fix custom info tab icon */
.tabbrowser-tab[image="chrome://global/skin/icons/info.svg"]:not([pinned]):not([busy]):not([progress]) .tab-icon-stack::before {
	margin-inline-end: 5.5px;
}
.tabbrowser-tab[image="chrome://global/skin/icons/info.svg"] .tab-icon-image {
	display: none !important;
}

/* Tabs containers */
.tabbrowser-tab[usercontextid] {
	& > .tab-stack > .tab-background > .tab-context-line {
		display: none;
	}

	 .tab-label-container {
		color: var(--identity-tab-color) !important;
		font-weight: bold !important;
	}

	#tabbrowser-tabs[orient="vertical"]:not([expanded]) & {
		.tab-background {
			outline: 1px solid var(--identity-tab-color) !important;
		}	
	}
}
.identity-color-blue,
.identity-color-turquoise,
.identity-color-green,
.identity-color-yellow,
.identity-color-orange,
.identity-color-red,
.identity-color-pink,
.identity-color-purple {
	--identity-icon-color: var(--identity-tab-color) !important;
}
.identity-color-blue {
  --identity-tab-color: var(--gnome-tabbar-identity-color-blue)  !important;
}
.identity-color-turquoise {
	--identity-tab-color: var(--gnome-tabbar-identity-color-turquoise) !important;
}
.identity-color-green {
	--identity-tab-color: var(--gnome-tabbar-identity-color-green) !important;
}
.identity-color-yellow {
	--identity-tab-color: var(--gnome-tabbar-identity-color-yellow) !important;
}
.identity-color-orange {
	--identity-tab-color: var(--gnome-tabbar-identity-color-orange) !important;
}
.identity-color-red {
	--identity-tab-color: var(--gnome-tabbar-identity-color-red) !important;
}
.identity-color-pink {
	--identity-tab-color: var(--gnome-tabbar-identity-color-pink) !important;
}
.identity-color-purple {
	--identity-tab-color: var(--gnome-tabbar-identity-color-purple) !important;
}

/* Needs attetion tab indicator */
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content,
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged] {
	background-size: 0px 0px !important;
	background-position: center bottom !important;
	transition-property: background-size;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: calc(var(--gnome-animation-time) / 2);
}
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
	background-image: radial-gradient(var(--gnome-tabbar-tab-needs-attetion), var(--gnome-tabbar-tab-needs-attetion) 10px) !important;
	background-size: clamp(20%, 50%, 7rem) 2px !important;
}
.tab-label[attention]:not([selected]) {
	font-weight: normal !important;
}

/* Tab spinner */
.tab-throbber::before {
	animation: none !important;
	background-image: url("../icons/spinner.png") !important;
	background-size: 16px;
	width: 16px !important;
	opacity: 1 !important;
	@media (prefers-color-scheme: dark) {
		background-image: url("../icons/spinner-dark.png") !important;
	}
}

/* Tabs manager menu */
#alltabs-button {
	@media not -moz-pref("gnomeTheme.allTabsButton") {
		visibility: collapse;
	}
	
	@media -moz-pref("browser.tabs.tabmanager.enabled"), -moz-pref("gnomeTheme.allTabsButtonOnOverflow") {
		#tabbrowser-tabs[overflow] ~ & {
			visibility: visible;
		}
	}
	
	#tabbrowser-tabs:not([overflow])[using-closing-tabs-spacer] ~ & {
		display: none !important;
	}
}

/* Firefox View */
#TabsToolbar #firefox-view-button .toolbarbutton-icon {
	box-shadow: none !important;
	fill: var(--gnome-toolbar-icon-fill) !important;
	height: 16px !important;
	opacity: 1 !important;
	width: 16px !important;
	overflow: visible !important;
	border-radius: initial !important;
}
:root:not([privatebrowsingmode="temporary"]):not([firefoxviewhidden]) :is(#firefox-view-button, #wrapper-firefox-view-button) + #tabbrowser-tabs {
	border-inline-start: 0 !important;
	padding-inline-start: var(--tab-overflow-pinned-tabs-width) !important;
	margin-inline-start: 0 !important;
}

/* OPTIONAL: Hide single tab */
@media -moz-pref("gnomeTheme.hideSingleTab") and (not -moz-pref("sidebar.verticalTabs")) {
	#tabbrowser-tabs:not(:has(tab[pinned]:not([hidden="true"]))):not(:has(tab:not([hidden="true"]) ~ tab:not([hidden="true"]))) {
		:is(tab, tab ~ toolbarbutton, tab ~ #tabbrowser-arrowscrollbox-periphery) {
			visibility: collapse;
		}
		~ #alltabs-button {
			visibility: collapse;
		}		
	}
}

/* OPTIONAL: Use tabs as headerbar */
@media -moz-pref("gnomeTheme.tabsAsHeaderbar") and (not -moz-pref("sidebar.verticalTabs")) {
	/* Rearrange bars */
	#navigator-toolbox #TabsToolbar {
		order: 0;
	}
	#navigator-toolbox #toolbar-menubar {
		order: 1;
	}
	#navigator-toolbox #nav-bar {
		order: 3;
	}
	#navigator-toolbox #PersonalToolbar {
		order: 4;
	}
	@media -moz-pref("gnomeTheme.bookmarksToolbarUnderTabs") {
		#navigator-toolbox #PersonalToolbar {
			order: 2 !important;
		}
	}

	#TabsToolbar {
		/* Spacing should be removed on the side touching the URL bar */
		.toolbarbutton-1,
		.titlebar-button {
			margin-bottom: 0 !important;
		}
		
		.toolbarbutton-1 {
			margin-top: var(--gnome-toolbar-padding) !important;
		}
	}
	

	#tabbrowser-tabs[orient="horizontal"] {
		/* Invert padding */
		:not([collapsed]) > .tabbrowser-tab, .tabbrowser-tab {
			padding-bottom: 0px !important;
			padding-top: var(--gnome-toolbar-padding) !important;
		}
		
		/* Move tab group line to top */
		.tab-group-label-container::after {
			inset: 0 !important;
		}
		tab-group {
			.tab-group-line {
				margin-block-end: 0 !important;
				margin-block-start: calc(var(--gnome-toolbar-padding) * -1) !important;
				top: 0 !important;
			}
		}

		/* Tabs separators */
		:root[dir="ltr"] & {
			tab:not(:first-of-type, [selected], :hover) {
				--gnome-tabbar-tab-separator-hack1: linear-gradient(
					to bottom,
					var(--gnome-tabbar-tab-separator-hack0) 0,
					var(--gnome-tabbar-tab-separator-hack0) 9px,
					var(--gnome-tabbar-tab-separator-color) 9px,
					var(--gnome-tabbar-tab-separator-color) 37px,
					var(--gnome-tabbar-tab-separator-hack0) 37px,
					var(--gnome-tabbar-tab-separator-hack0) 40px
				) 1;
				border-image: var(--gnome-tabbar-tab-separator-hack1);
			}
		}
		
	}

	/* Remove nav-bar rounding and padding */
	:root[customtitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) #nav-bar { 
		border-radius: 0 !important; 
	 } 
	
	/* Round and pad tab-bar */
	:root[customtitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) #TabsToolbar {
		border-radius: env(-moz-gtk-csd-titlebar-radius) env(-moz-gtk-csd-titlebar-radius) 0 0 !important
	}
	:root[customtitlebar]:not([inFullscreen], [sizemode="maximized"]) #TabsToolbar .toolbar-items {
		padding: 0 46px;
	}
	
	/* Hide duplicate window controls from navbar */
	:root[customtitlebar] #nav-bar .titlebar-buttonbox-container {
		display: none !important;
	}
	
	/* Force displaying controls in tab-bar */
	:root[customtitlebar]:not([inDOMFullscreen]) #TabsToolbar .titlebar-buttonbox-container {
		display: flex !important;
		padding-top: var(--gnome-toolbar-padding) !important;
		visibility: visible !important;
	}

	/* Blend single tab into whole bar */
	@media -moz-pref("gnomeTheme.hideSingleTab") {
		#tabbrowser-tabs:not(:has(tab[pinned]:not([hidden="true"]))):not(:has(tab:not([hidden="true"]) ~ tab:not([hidden="true"]))) :is(
			tab,
			tab ~ toolbarbutton,
			tab ~ #tabbrowser-arrowscrollbox-periphery
		) {
			visibility: visible;
		}
		#tabbrowser-tabs:not(:has(tab[pinned]:not([hidden="true"]))):not(:has(tab:not([hidden="true"]) ~ tab:not([hidden="true"]))) tab {
			-moz-window-dragging: drag !important;
		}
		#tabbrowser-tabs:not(:has(tab[pinned]:not([hidden="true"]))):not(:has(tab:not([hidden="true"]) ~ tab:not([hidden="true"]))) .tab-background {
			display: none !important
		}
		#tabbrowser-tabs:not(:has(tab[pinned]:not([hidden="true"]))):not(:has(tab:not([hidden="true"]) ~ tab:not([hidden="true"]))) .tab-close-button {
			visibility: hidden !important;
			opacity: 0 !important;
		}
		#tabbrowser-tabs:not(:has(tab[pinned]:not([hidden="true"]))):not(:has(tab:not([hidden="true"]) ~ tab:not([hidden="true"]))) .tab-content::before {
			--gnome-tabbar-tab-close-overlay-bg: unset !important;
		}
		:root[dir="ltr"] #tabbrowser-tabs:not(:has(tab[pinned]:not([hidden="true"]))):not(:has(tab:not([hidden="true"]) ~ tab:not([hidden="true"]))) .tab-label-container[textoverflow="true"] {
			margin-inline-end: -16px;
		}
	}
}
