/* REAL TABS IN FIREFOX
	Revision 11
	Intended to be used with the Firefox Colors plugin (https://addons.mozilla.org/en-US/firefox/addon/firefox-color/)
	and this theme (https://color.firefox.com/?theme=XQAAAAIPAQAAAAAAAABBKYhm849SCia2CaaEGccwS-xMDPsquqWmWr6U_-J9Sk2zluBv0zSwMyKaAShHBfVaSjHe4S-QTZGGSWTDW3GJBaw52IuYFpk7GR12YCt7svbegS0W-lRKiZhfzG14OaRI3_gMy_gA0MF_nsUePY6mp_9pQVs8-Tr3k8GTtrj4zQB4czyVQlUKovwZ9JwdJMhwgAZzwiY6Y1j9h6cFOtjG8ahrCjP7213g)
	But of course the colors can be modified.
	If you find bugs or want to suggest improvements, open an issue at https://github.com/charwick/ff-realtabs

	1. Navigate to about:config
	2. Search for the toolkit.legacyUserProfileCustomizations.stylesheets preference and set it to True
	3. Create a folder called Chrome in your Firefox user profile folder and add these two files
	4. Restart Firefox
*/

:root {
	--inactive-titlebar-opacity: 1 !important;
	--tab-border-radius: 6px !important;
} 
:-moz-window-inactive .tab-content { opacity: 0.7; }
#titlebar {
	background-image: linear-gradient(rgb(255 255 255 / 7.5%),transparent);
	z-index: 999;
}
#nav-bar {
	background-image: linear-gradient(transparent,rgb(0 0 0 / 10%)) !important;
	--toolbarbutton-hover-background: rgb(0 0 0 / 10%) !important;
	--toolbarbutton-active-background: rgb(0 0 0 / 20%) !important;
	border-top: none !important;
	box-shadow: 0 -1px 0 rgb(0 0 0 / 20%);
}
#navigator-toolbox { border-bottom: 1px solid #889 !important; }

.tab-background, #firefox-view-button[open] image {
	border-radius: var(--tab-border-radius) var(--tab-border-radius) 0 0 !important; /* Connected */
	margin: 5px 0 0 !important; /* Connected */
	outline: none !important;
	background-clip: padding-box;
}
[selected] .tab-content, [multiselected] .tab-content {
	text-shadow: 0 1px 0 rgb(255 255 255 / 50%);
}
.tab-content:not([selected], [multiselected]) {
	text-shadow: 0 -1px 0 rgb(0 0 0 / 50%);
}
#scrollbutton-up, #scrollbutton-down { /* 6/10/2021 */
	border-top-width: 1px !important;
	border-bottom-width: 0 !important;
}
tabbrowser-tab {
	padding: 0 !important;
}

.tab-background:is([selected], [multiselected]), #firefox-view-button[open] image {
	--lwt-tabs-border-color: rgb(0 0 0 / 50%) !important;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 50%) !important; /* , 0 3px 3px rgb(0 0 0 / 30%) */
	background-image: linear-gradient(rgb(255 255 255 / 50%),transparent);
	z-index: 100;
	border: 1px solid rgb(0 0 0 / 25%);
	border-bottom: none;
}
.tab-content { z-index: 101; }
.tab-content[pinned] { padding: 7.25px 10px !important; }
.tab-background:not([selected], [multiselected]) {
	border-radius: 0 !important;
	border-left: 1px solid rgb(255 255 255 / 10%);
}
[brighttext="true"] .tab-background:is([selected], [multiselected]) {
	--lwt-tabs-border-color: rgb(255 255 255 / 50%) !important;
	border-bottom-color: transparent !important;
}
tab[selected] + tab .tab-background {
	border-left: none !important;
}
.tabbrowser-tab {
	padding: 0 !important;
	overflow: visible !important;
}

/* Bottom rounded corners adapted from @bmFtZQ/edge-frfox */
.tab-background:is([selected], [multiselected]) {
	&::before, &::after {
		content: '';
		position: absolute !important;
		width: var(--tab-border-radius) !important;
		aspect-ratio: 1 / 1;
		bottom: 0 !important;
		pointer-events: none !important;
		clip-path: inset(0);
		box-shadow: 0px -1px rgb(0 0 0 / 25%) inset, 0 0 0 var(--tab-border-radius) var(--tab-selected-bgcolor) !important;
	}
	&::before {
		border-bottom-right-radius: var(--tab-border-radius) !important;
		left: calc(-1 * var(--tab-border-radius) + 1px) !important;
	}
	&::after {
		border-bottom-left-radius: var(--tab-border-radius) !important;
		right: calc(1px - var(--tab-border-radius)) !important;
	}
}

/* Container color bar visibility */
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
	margin: 0 max(calc(var(--tab-border-radius) - 3px), 0) !important;
}

#urlbar-background, #searchbar, .findbar-textbox {
	border: 1px solid rgb(0 0 0 / 20%) !important;
	border-bottom-color: rgb(0 0 0 / 10%) !important;
	border-top-color: rgb(0 0 0 / 30%) !important;
	background-clip: padding-box !important;
	box-shadow: inset 0 1px 1px rgb(0 0 0 / 10%), 0 1px 0 rgb(255 255 255 / 50%) !important;
}

.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]),
#firefox-view-button[attention], .webextension-browser-action[attention="true"] {
	background-position-y: bottom 5px !important;
}
/* Facebook Container Indicator */
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
	position: absolute;
	width: 100%;
	left: 0; bottom: 5px;
	bottom: 12px;
	background: none !important;
}
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line::after {
	content: '~';
	display: block;
	margin: 0 auto;
	color: rgb(0 0 0 / 75%);
}

#TabsToolbar { z-index: 999; }
#TabsToolbar .toolbarbutton-icon, .tab-close-button:not([selected]) {
	filter: drop-shadow(0 -1px 0 rgb(0 0 0 / 50%));
}
#nav-bar toolbarbutton, [selected] .tab-close-button {
	filter: drop-shadow(0 1px 0 rgb(255 255 255 / 50%));
}
#nav-bar .toolbarbutton-1 {
	&:not([disabled]) {
		&:is([open], [checked], :hover:active) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack) {
			fill: #07D;
			box-shadow: 0 1px 3px inset rgb(0 0 0 / 20%);
			background-image: radial-gradient(rgb(255 255 255 / 20%),transparent);
		}
	}
}
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected], [multiselected]) {
	background: linear-gradient(transparent,rgb(255 255 255 / 25%)) !important;
}
:root:not([inFullscreen], [tabsintitlebar]) #nav-bar:not([tabs-hidden="true"]), #nav-bar:not([tabs-hidden="true"]) {
	/* box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--lwt-tabs-border-color, rgb(0 0 0 / 30%)), inset 0 1px 0 rgb(255 255 255 / 20%) !important; */
}
.browser-toolbar:not(.titlebar-color) { background-clip: border-box !important; } /* Fix bookmarks bar border on Windows */
#TabsToolbar .toolbarbutton-1 { margin: 0 !important; } /* Fix Firefox View tab */
:root:not([privatebrowsingmode], [firefoxviewhidden]) :is(toolbarbutton, toolbarpaletteitem) + #tabbrowser-tabs { border-inline-start: none !important; } /* Don't need extra border */

/* Bookmarks toolbar */
#PersonalToolbar {
	background-image: linear-gradient(rgb(0 0 0 / 10%), rgb(0 0 0 / 20%)) !important;
	border-top: 1px solid rgb(255 255 255 / 50%);
	text-shadow: 0 1px 0 rgb(255 255 255 / 40%);
}
#nav-bar:has(+ #PersonalToolbar[collapsed="false"]) {
	border-bottom: 1px solid rgb(0 0 0 / 25%);
}
#PersonalToolbar .toolbarbutton-icon {
	filter: drop-shadow(0 1px 0 rgb(255 255 255 / 40%));
}

/* Menus */

:is(menupopup, panel)[type="arrow"], .toolbar-menupopup { --panel-border-color: none !important; }
:is(panelview .toolbarbutton-1, toolbarbutton.subviewbutton, .widget-overflow-list .toolbarbutton-1, .toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]), [overflowedItem="true"]) > toolbarbutton):not([disabled]):hover, [_moz-menuactive] {
	background: #649AF8 !important;
	color: #FFF !important;
}
toolbarbutton:hover #fxa-menu-header-title {
	color: #FFF !important;
}

/* Find Bar */

findbar {
	border-top-color: rgb(255 255 255 / 60%) !important;
	background: var(--toolbar-bgcolor) linear-gradient(rgb(255 255 255 / 20%),transparent, rgb(0 0 0 / 10%)) !important;
	box-shadow: 0 -1px 0 rgb(0 0 0 / 30%);
	contain: content;
}