/** Globals styles, regardless of mode */

/* Resizes the glance tab indicator on essential tabs */
#navigator-toolbox
	#tabbrowser-tabs[orient='vertical']
	.tabbrowser-tab[zen-essential='true']
	.tabbrowser-tab[zen-glance-tab='true'] {
	--tab-collapsed-width: 24px !important;
	--tab-min-width: 16px !important;

	& .tab-icon-stack {
		align-content: center;
	}
}

/* Centers & resizes the glance tab indicator, to be more cohesive across essential & pinned tabs */
#navigator-toolbox
	#tabbrowser-tabs[orient='vertical']
	.tabbrowser-tab[zen-glance-tab='true'] {
	& .tab-content {
		padding: 0px !important;
	}

	& .tab-icon-stack {
		height: var(--tab-min-height, 24px) !important;
		width: var(--tab-min-width, 24px) !important;

		& .tab-icon-image,
		.tab-throbber {
			place-self: center;
		}
	}
}

/* Centers the tab icon on essential tabs */
#navigator-toolbox
	#tabbrowser-tabs[orient='vertical']
	.tabbrowser-tab[zen-essential='true'] {
	& .tab-icon-image,
	.tab-throbber {
		justify-self: center;
	}
}

/** Legacy Mode - Round circle */
@media not (-moz-bool-pref: 'zen.mods.AudioIndicatorEnhanced.audioWave.enabled') {
	#tabbrowser-tabs[orient='vertical']
		.tabbrowser-tab
		.tab-icon-overlay:not([crashed]) {
		&:is([soundplaying], [muted], [activemedia-blocked]) {
			background-color: #161717 !important;
			border: 1px solid #ffffff29 !important;
			transition: transform 100ms ease-in-out,
				background-color 100ms ease-in-out;

			@media (-moz-bool-pref: 'zen.mods.AudioIndicatorEnhanced.hoverScaleAnimationEnabled') {
				&:hover {
					transition: transform 100ms ease-in-out,
						background-color 100ms ease-in-out !important;
					transform: scale(1.3) translate(-8%, 14%);
					transform-origin: center !important;
				}
			}
		}

		&[muted] {
			/* Different background color when muted */
			background-color: rgb(122, 31, 31) !important;

			/* Revert old icon */
			@media (-moz-bool-pref: 'zen.mods.AudioIndicatorEnhanced.returnOldIcons') {
				background-image: url('chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg') !important;
			}
		}

		&[soundplaying] {
			/* Revert old icon */
			@media (-moz-bool-pref: 'zen.mods.AudioIndicatorEnhanced.returnOldIcons') {
				background-image: url('chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg') !important;
			}
		}

		&[activemedia-blocked] {
			/* Revert old icon */
			@media (-moz-bool-pref: 'zen.mods.AudioIndicatorEnhanced.returnOldIcons') {
				background-image: url('chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg') !important;
			}
		}

		/* Revert new, zen's audio indicator */
		@media (-moz-bool-pref: 'zen.mods.AudioIndicatorEnhanced.returnOldIcons') {
			&[muted],
			&[soundplaying],
			&[activemedia-blocked] {
				list-style-image: none !important;
			}
		}
	}

	/* Patches for essential tabs indicator */
	#navigator-toolbox[zen-sidebar-expanded='true']
		#tabbrowser-tabs[orient='vertical']
		.tabbrowser-tab[zen-essential='true']
		.tab-icon-stack {
		width: 100% !important;
		height: 100% !important;

		& .tab-icon-image,
		.tab-throbber {
			place-self: center;
		}

		/* Some stylistic changes for essential tabs indicator */
		& .tab-icon-overlay:not([crashed]) {
			width: 24px !important;
			height: 24px !important;
			margin: 5px !important;

			background-color: hsl(180, 2%, 9%, 50%) !important;
			border: 1px solid hsla(0, 0%, 100%, 10%) !important;
			background-size: 75% !important;
			border-radius: 7px !important;
			transform-origin: top right !important;

			&[muted] {
				background-color: hsl(0, 59%, 30%, 50%) !important;
			}

			@media (-moz-bool-pref: 'zen.mods.AudioIndicatorEnhanced.hoverScaleAnimationEnabled') {
				&:hover {
					transform: scale(1.2);
				}
			}
		}
	}

	/* Change positioning of indicator on essential tabs */
	#navigator-toolbox[zen-sidebar-expanded='true']
		#tabbrowser-tabs[orient='vertical']
		.tabbrowser-tab[zen-essential='true'] {
		--tab-inline-padding: 0px !important;

		& .tab-icon-overlay:not([crashed]) {
			/* position: absolute !important; */
			top: 0px !important;
			right: 0px !important;
			margin: 4px !important;
			place-self: start end;
		}
	}
}

/* Standardize tab icon size, to prevent size flexing */
#navigator-toolbox[zen-sidebar-expanded='true']
	#tabbrowser-tabs[orient='vertical']
	.tabbrowser-tab
	.tab-icon-stack {
	height: 16px;
	width: 28.5px;
}

/** Audio Wave version */
@media (-moz-bool-pref: 'zen.mods.AudioIndicatorEnhanced.audioWave.enabled') {
	/** Variables section */
	/* Normal tab bar */
	#tabbrowser-tabs[orient='vertical'] {
		/* Normal tab */
		& .tabbrowser-tab {
			--audio-button-top: -4px;
			--audio-button-left: -3px;
			--audio-wave-top: 0px;
			--audio-wave-left: 0px;
			--audio-wave-height: 17px;
		}

		/* Essential tab */
		& .tabbrowser-tab[zen-essential='true'] {
			--audio-button-top: -4px;
			--audio-button-left: 0px;
			--audio-wave-top: -4px;
			--audio-wave-left: 0px;
		}
	}

	/* Collapsed tab bar */
	#navigator-toolbox:not([zen-sidebar-expanded='true'])
		#tabbrowser-tabs[orient='vertical'] {
		/* Normal tab */
		& .tabbrowser-tab:not([zen-essential='true']) {
			--audio-button-top: 0px;
			--audio-button-left: 0px;
			--audio-wave-top: 4px;
		}

		/* Essential tab */
		& .tabbrowser-tab[zen-essential='true'] {
			/* These 2 could be deleted, as are inherited */
			--audio-button-top: 0px;
			--audio-button-left: 0px;
			--audio-wave-top: 4px;
			--audio-wave-left: -6px;
		}
	}

	/* Some styling for mute/unmute audio button */
	#tabbrowser-tabs[orient='vertical']
		.tabbrowser-tab
		.tab-icon-overlay:not([crashed]) {
		top: var(--audio-button-top, 0px) !important;
		left: var(--audio-button-left, 0px) !important;
		width: 24px !important;
		height: 24px !important;

		padding: 4px !important;
		border-radius: 6px !important;
		display: initial !important;

		opacity: 0;
		visibility: hidden;
	}

	/* Centers the tab icon, when collapsed tab bar */
	#navigator-toolbox:not([zen-sidebar-expanded='true'])
		#tabbrowser-tabs[orient='vertical']
		.tabbrowser-tab {
		& .tab-icon-image,
		.tab-throbber {
			place-self: center;
		}
	}

	/* Tab Icon to mute playing audio */
	#tabbrowser-tabs[orient='vertical']
		.tabbrowser-tab[soundplaying]:not([zen-glance-tab]):hover
		> .tab-stack
		> .tab-content
		> .tab-icon-stack
		> .tab-icon-overlay:not([crashed]) {
		list-style-image: url('chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg') !important;
	}

	/* Tab Icon to unmute muted audio */
	#tabbrowser-tabs[orient='vertical']
		.tabbrowser-tab[muted]:not([zen-glance-tab]):hover
		> .tab-stack
		> .tab-content
		> .tab-icon-stack
		> .tab-icon-overlay:not([crashed]) {
		list-style-image: url('chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg') !important;
	}

	/* Show button to mute/unmute audio, on hover, in place of tab icon */
	#tabbrowser-tabs[orient='vertical']
		.tabbrowser-tab:has([soundplaying], [muted]):not([zen-glance-tab]):hover {
		&
			> .tab-stack
			> .tab-content
			> .tab-icon-stack
			> .tab-icon-overlay:not([crashed]) {
			display: flex !important;
			opacity: 1;
			visibility: visible;

			background-color: transparent !important;

			&:hover {
				background-color: color-mix(
					in srgb,
					currentColor 10%,
					transparent
				) !important;
			}
		}

		& > .tab-stack > .tab-content > .tab-icon-stack > .tab-icon-image {
			opacity: 0 !important;
		}
	}

	/* Patch for essential tabs */
	#tabbrowser-tabs[orient='vertical']
		.tabbrowser-tab[zen-essential='true']
		.tab-icon-stack {
		width: 100% !important;
		justify-content: center;

		&::before {
			/* TODO: Take padding from variable */
			width: calc(100% + 10px) !important;
		}
	}

	/* Patch for collapsed essential tabs */
	#navigator-toolbox:not([zen-sidebar-expanded='true'])
		#tabbrowser-tabs[orient='vertical']
		.tabbrowser-tab[zen-essential='true']
		.tab-icon-stack {
		width: var(--tab-collapsed-background-width) !important;

		&::before {
			width: var(--tab-collapsed-background-width) !important;
		}
	}

	/* Code for audio wave */
	.tabbrowser-tab:not([zen-glance-tab])
		> .tab-stack
		> .tab-content
		> .tab-icon-stack::before {
		content: '' !important;
		z-index: -1 !important;
		position: absolute !important;
		bottom: 0;
		left: 0;
		width: calc(var(--zen-sidebar-width) - 9px) !important;
		height: var(--audio-wave-height) !important;
		transform: translate(
			calc(-6px - var(--audio-wave-left)),
			calc(10px - var(--audio-wave-top))
		) !important;
		transform-origin: bottom;
		border-radius: 20px !important;
		opacity: 0;

		-moz-context-properties: fill, fill-opacity;
		background-size: 492px 100% !important;
		background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='1000' height='120' viewBox='0 0 1000 120' preserveAspectRatio='none' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1000' height='120' /%3E%3Cg class='g' transform='translate(20 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.95;1 0.8;1 0.52;1 0.78;1 0.95;1 1.04;1 1.04;1 1.17;1 0.94;1 0.8;1 0.73;1 0.7;1 0.9;1 0.95' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(45 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 1.1;1 1.05;1 1.2;1 0.82;1 1.13;1 1.3;1 1.31;1 1.14;1 1.07;1 1.1;1 1.1' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(70 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 1.12;1 1.33;1 1.22;1 1.07;1 1.07;1 1.00;1 1.37;1 1.32;1 1.37;1 1.27;1 1.19;1 1.28;1 1.18;1 1.16;1 1.04;1 1.13;1 1.31;1 1.06;1 1.12' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(95 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 1.38;1 1.23;1 1.11;1 1.40;1 1.21;1 1.45;1 1.36;1 1.30;1 1.35;1 1.24;1 1.38;1 1.16;1 1.41;1 1.43;1 1.14;1 1.15;1 1.20;1 1.42;1 1.38' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(120 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.86;1 1.09;1 1.07;1 0.86;1 1.00;1 0.89;1 0.95;1 0.91;1 1.18;1 1.06;1 1.14;1 1.08;1 0.82;1 1.10;1 0.96;1 0.87;1 1.04;1 1.15;1 0.86' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(145 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 1.04;1 0.83;1 1.18;1 1.19;1 1.09;1 1.12;1 1.10;1 1.01;1 0.83;1 0.83;1 1.15;1 0.82;1 1.05;1 0.90;1 1.10;1 1.20;1 0.92;1 0.96;1 1.04' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(170 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.88;1 1.07;1 0.91;1 1.12;1 1.07;1 1.15;1 1.13;1 1.14;1 0.99;1 1.14;1 0.99;1 1.15;1 0.89;1 0.97;1 1.18;1 1.10;1 0.81;1 1.10;1 0.88' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(195 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.92;1 1.09;1 1.07;1 1.07;1 0.84;1 1.16;1 1.04;1 1.06;1 0.99;1 1.19;1 1.04;1 0.93;1 0.96;1 0.84;1 1.01;1 1.08;1 1.11;1 0.83;1 0.92' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(220 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.92;1 1.11;1 0.98;1 1.10;1 1.03;1 0.92;1 1.18;1 0.85;1 1.06;1 0.89;1 1.06;1 0.98;1 0.86;1 1.17;1 0.87;1 1.11;1 0.97;1 1.14;1 0.92' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(245 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.80;1 1.01;1 1.01;1 0.95;1 0.96;1 0.73;1 0.95;1 0.88;1 0.81;1 0.79;1 0.99;1 1.04;1 0.84;1 0.94;1 0.92;1 1.03;1 0.90;1 1.07;1 0.8' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(270 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.87;1 0.81;1 0.92;1 0.78;1 1.08;1 0.79;1 1.00;1 0.93;1 0.98;1 1.04;1 0.88;1 1.05;1 1.09;1 1.03;1 1.00;1 0.99;1 1.08;1 1.09;1 0.87' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(295 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.93;1 0.80;1 0.73;1 0.90;1 0.99;1 0.77;1 0.79;1 0.62;1 0.69;1 0.78;1 0.70;1 0.68;1 0.70;1 0.83;1 0.82;1 0.78;1 0.88;1 0.66;1 0.93' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(320 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.78;1 0.82;1 0.65;1 0.65;1 0.87;1 0.88;1 0.64;1 0.97;1 0.94;1 0.91;1 0.77;1 0.99;1 0.71;1 0.88;1 0.87;1 0.77;1 0.91;1 0.82;1 0.78' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(345 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.93;1 0.99;1 0.62;1 0.75;1 0.62;1 0.70;1 0.99;1 0.91;1 0.99;1 0.74;1 1.00;1 0.81;1 0.82;1 0.62;1 0.97;1 0.95;1 0.93;1 0.80;1 0.93' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(370 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.83;1 0.68;1 0.66;1 0.80;1 0.84;1 0.83;1 0.74;1 0.85;1 0.71;1 0.75;1 0.84;1 0.69;1 0.99;1 0.97;1 0.93;1 0.68;1 0.80;1 0.81;1 0.83' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(395 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.72;1 0.69;1 0.74;1 0.80;1 0.72;1 0.66;1 0.99;1 0.66;1 0.86;1 0.69;1 0.70;1 0.95;1 0.71;1 0.64;1 0.65;1 0.87;1 0.70;1 0.93;1 0.72' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(420 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.57;1 0.84;1 0.67;1 0.83;1 0.60;1 0.70;1 0.81;1 0.65;1 0.65;1 0.90;1 0.71;1 0.70;1 0.54;1 0.57;1 0.73;1 0.67;1 0.73;1 0.66;1 0.57' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(445 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.98;1 0.86;1 0.94;1 1.18;1 1.06;1 0.95;1 1.10;1 1.00;1 0.85;1 1.15;1 0.97;1 0.81;1 0.84;1 1.13;1 0.94;1 1.01;1 1.12;1 0.93;1 0.98' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(470 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.92;1 1.20;1 1.02;1 1.08;1 0.93;1 0.92;1 1.25;1 1.27;1 1.17;1 1.19;1 0.94;1 1.24;1 0.92;1 1.15;1 1.26;1 1.20;1 0.98;1 1.23;1 0.92' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(495 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 1.33;1 1.23;1 1.11;1 1.31;1 1.48;1 1.31;1 1.12;1 1.40;1 1.30;1 1.30;1 1.18;1 1.20;1 1.41;1 1.45;1 1.35;1 1.12;1 1.17;1 1.20;1 1.33' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(520 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 1.17;1 0.96;1 1.19;1 0.82;1 1.08;1 1.05;1 0.93;1 0.95;1 1.15;1 0.95;1 0.85;1 0.85;1 1.16;1 1.15;1 0.94;1 1.04;1 1.02;1 0.99;1 1.17' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(545 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 1.12;1 0.89;1 1.14;1 0.95;1 1.08;1 1.07;1 1.00;1 1.04;1 0.81;1 1.12;1 0.92;1 0.89;1 0.98;1 0.81;1 0.97;1 0.96;1 1.02;1 0.87;1 1.12' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(570 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.99;1 0.82;1 1.01;1 1.11;1 0.96;1 1.06;1 1.07;1 0.84;1 0.91;1 0.85;1 1.01;1 0.99;1 1.03;1 0.81;1 1.19;1 0.94;1 0.83;1 1.01;1 0.99' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(595 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.98;1 0.84;1 0.81;1 0.82;1 1.04;1 0.74;1 0.81;1 0.79;1 1.04;1 0.85;1 0.73;1 1.05;1 0.91;1 0.80;1 0.77;1 0.98;1 0.82;1 0.98;1 0.98' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(620 130) rotate(180)'%3E%3Crect class='test ' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.77;1 0.83;1 1.03;1 0.76;1 0.71;1 0.95;1 0.80;1 1.00;1 0.81;1 0.75;1 0.96;1 0.96;1 0.84;1 1.02;1 1.09;1 0.71;1 1.06;1 0.85;1 0.77' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(645 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.78;1 0.91;1 0.75;1 0.79;1 0.80;1 0.66;1 0.81;1 0.72;1 0.83;1 0.63;1 0.63;1 0.71;1 0.86;1 0.86;1 0.79;1 0.86;1 0.67;1 0.93;1 0.78' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(670 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.90;1 0.84;1 0.54;1 0.82;1 0.76;1 0.76;1 0.80;1 0.69;1 0.57;1 0.57;1 0.61;1 0.76;1 0.84;1 0.72;1 0.85;1 0.82;1 0.70;1 0.74;1 0.9' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(695 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.8;1 0.74;1 0.85;1 0.86;1 0.73;1 0.64;1 0.81;1 0.57;1 0.50;1 0.85;1 0.88;1 0.88;1 0.69;1 0.89;1 0.67;1 0.60;1 0.75;1 0.84;1 0.8' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(720 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.51;1 0.87;1 0.68;1 0.81;1 0.81;1 0.58;1 0.54;1 0.75;1 0.81;1 0.56;1 0.76;1 0.78;1 0.71;1 0.72;1 0.54;1 0.88;1 0.68;1 0.87;1 0.51' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(745 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.31;1 0.50;1 0.47;1 0.67;1 0.42;1 0.40;1 0.47;1 0.53;1 0.36;1 0.66;1 0.50;1 0.54;1 0.49;1 0.47;1 0.30;1 0.40;1 0.49;1 0.50;1 0.31' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(770 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.5;1 0.43;1 0.39;1 0.54;1 0.65;1 0.56;1 0.32;1 0.48;1 0.36;1 0.45;1 0.32;1 0.59;1 0.59;1 0.38;1 0.59;1 0.31;1 0.51;1 0.40;1 0.5' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(795 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.55;1 0.69;1 0.46;1 0.62;1 0.54;1 0.57;1 0.48;1 0.44;1 0.57;1 0.45;1 0.44;1 0.33;1 0.56;1 0.31;1 0.54;1 0.39;1 0.55;1 0.61;1 0.55' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(820 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.38;1 0.67;1 0.66;1 0.41;1 0.52;1 0.55;1 0.43;1 0.49;1 0.55;1 0.59;1 0.41;1 0.64;1 0.58;1 0.59;1 0.62;1 0.35;1 0.67;1 0.38;1 0.38' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(845 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.49;1 0.57;1 0.70;1 0.56;1 0.52;1 0.43;1 0.55;1 0.71;1 0.55;1 0.77;1 0.58;1 0.51;1 0.43;1 0.61;1 0.40;1 0.64;1 0.53;1 0.50;1 0.49' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(870 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.62;1 0.58;1 0.40;1 0.64;1 0.44;1 0.45;1 0.66;1 0.76;1 0.76;1 0.69;1 0.74;1 0.47;1 0.54;1 0.55;1 0.66;1 0.60;1 0.58;1 0.55;1 0.62' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(895 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.75;1 0.44;1 0.74;1 0.78;1 0.71;1 0.48;1 0.75;1 0.47;1 0.78;1 0.73;1 0.70;1 0.79;1 0.65;1 0.55;1 0.41;1 0.48;1 0.41;1 0.68;1 0.75' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(920 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.58;1 0.79;1 0.61;1 0.60;1 0.63;1 0.42;1 0.71;1 0.51;1 0.44;1 0.63;1 0.76;1 0.76;1 0.58;1 0.74;1 0.42;1 0.45;1 0.51;1 0.46;1 0.58' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(945 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.64;1 0.82;1 0.75;1 0.83;1 0.89;1 0.61;1 0.60;1 0.84;1 0.62;1 0.54;1 0.72;1 0.52;1 0.60;1 0.65;1 0.52;1 0.87;1 0.75;1 0.66;1 0.64' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(970 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.71;1 0.57;1 0.80;1 0.76;1 0.71;1 0.62;1 0.51;1 0.52;1 0.67;1 0.62;1 0.73;1 0.69;1 0.67;1 0.81;1 0.55;1 0.70;1 0.55;1 0.88;1 0.71' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(995 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.57;1 0.71;1 0.67;1 0.77;1 0.76;1 0.69;1 0.88;1 0.55;1 0.83;1 0.63;1 0.59;1 0.73;1 0.63;1 0.53;1 0.81;1 0.82;1 0.53;1 0.67;1 0.57' dur='7.5s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cstyle%3E .test %7B fill: context-fill; %7D %3C/style%3E%3C/svg%3E") !important;

		transition: fill 1000ms ease-in-out, opacity 1000ms ease-in-out;
	}

	/* Compatibility patch for hidden tab bar */
	#zen-main-app-wrapper[zen-compact-mode='true']
		.tabbrowser-tab
		.tab-icon-stack::before {
		width: calc(var(--zen-sidebar-width) - 30px) !important;
	}

	/* TODO: Attempt at different animation for subset of tabs, will need manual re-timing of each svg animation sadly */
	.tabbrowser-tab[soundplaying] {
		/* 4s delay */
		&:nth-of-type(2n) .tab-icon-stack::before {
			/* background-image: '' !important; */
		}

		/* 6s delay */
		&:nth-of-type(3n) .tab-icon-stack::before {
			/* background-image: '' !important; */
		}

		/* 2s delay */
		&:nth-of-type(4n) .tab-icon-stack::before {
			/* background-image: '' !important; */
		}

		/* 5s delay */
		&:nth-of-type(5n) .tab-icon-stack::before {
			/* background-image: '' !important; */
		}
	}

	.tabbrowser-tab[soundplaying]:not([zen-glance-tab])
		> .tab-stack
		> .tab-content
		.tab-icon-stack::before {
		fill: -moz-dialogtext;
		opacity: 0.2;
	}

	.tabbrowser-tab[muted]:not([zen-glance-tab])
		> .tab-stack
		> .tab-content
		.tab-icon-stack::before {
		fill: color-mix(in srgb, -moz-dialogtext 50%, rgb(129, 0, 0) 50%);
		opacity: 0.2;
		background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='1000' height='120' viewBox='0 0 1000 120' preserveAspectRatio='none' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1000' height='120' /%3E%3Cg class='g' transform='translate(20 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(45 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(70 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(95 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(120 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(145 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(170 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(195 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(220 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(245 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(270 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(295 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(320 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(345 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(370 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(395 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(420 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(445 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(470 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(495 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(520 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(545 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(570 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(595 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(620 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(645 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(670 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(695 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(720 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(745 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(770 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(795 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(820 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(845 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(870 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(895 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(920 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(945 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(970 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cg class='g' transform='translate(995 130) rotate(180)'%3E%3Crect class='test' width='20' height='60' rx='5'%3E%3CanimateTransform attributeName='transform' type='scale' values='1 0.85' dur='1s' repeatCount='indefinite' /%3E%3C/rect%3E%3C/g%3E%3Cstyle%3E .test %7B fill: context-fill; %7D %3C/style%3E%3C/svg%3E") !important;
	}
}
