@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;
			}
		}
	}
}

/* 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') {
	#navigator-toolbox[zen-sidebar-expanded='true'] .tab-icon-stack {
		--audio-button-top: -4px;
		--audio-button-left: -4px;
		--audio-wave-top: 31px;
	}

	/* Some styling formute/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;
	}

	#navigator-toolbox:not([zen-sidebar-expanded='true'])
		#tabbrowser-tabs[orient='vertical']
		.tabbrowser-tab
		.tab-icon-image {
		justify-self: center;
		align-self: center;
	}

	/* Tab Icon to mute playing audio */
	#tabbrowser-tabs[orient='vertical']
		.tabbrowser-tab[soundplaying]:hover
		.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]:hover
		.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]):hover {
		& .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-icon-image {
			opacity: 0 !important;
		}
	}

	/* Code for audio wave */
	.tabbrowser-tab .tab-icon-stack::before {
		/* --transformOffset: calc(var(--zen-sidebar-width) / 18);
		transform: translate(-6px, var(--transformOffset)) scaleY(0.4) !important; */

		content: '' !important;
		position: absolute !important;
		bottom: 0;
		left: 0;
		width: calc(var(--zen-sidebar-width) - 9px) !important;
		width: 492px !important;
		height: auto !important;
		aspect-ratio: 1000 / 120;
		position: absolute !important;
		z-index: -1 !important;
		transform: translate(-6px, var(--audio-wave-top, 27px)) scaleY(0.3) !important;
		border-radius: 15px !important;
		opacity: 0;

		-moz-context-properties: fill, fill-opacity;
		background-size: 100% 100% !important;
		background-image: url('AudioWave1.svg') !important;

		/* Clip audio wave to tab size */
		clip-path: xywh(0% 0% calc(var(--zen-sidebar-width) - 9px) 100% round 20px);

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

	/* Compability patch for hidden tab bar */
	#zen-main-app-wrapper[zen-compact-mode='true']
		.tabbrowser-tab
		.tab-icon-stack::before {
		clip-path: xywh(0% 0% calc(var(--zen-sidebar-width) - 29px) 100% round 20px);
	}

	/* Support for collapsed Tab Bar */
	.tabbrowser-tab .tab-icon-stack::before {
		/* color: red; */
	}

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

	.tabbrowser-tab[soundplaying]:nth-of-type(2n) .tab-icon-stack::before {
		background-image: url('AudioWave2.svg') !important;
	} */

	.tabbrowser-tab[soundplaying] .tab-icon-stack::before {
		fill: -moz-dialogtext;
		opacity: 0.2;
	}

	.tabbrowser-tab[muted] .tab-icon-stack::before {
		fill: color-mix(in srgb, -moz-dialogtext 50%, rgb(129, 0, 0) 50%);
		opacity: 0.2;
		background-image: url('AudioWave_Muted.svg') !important;
	}
}