:root {
	--infobar-close-button-normal:	url("chrome://userchrome/content/assets/img/chrome-1/infobar/infobar_close_off.svg");
	--infobar-close-button-hot:		url("chrome://userchrome/content/assets/img/chrome-1/infobar/infobar_close_off_h.svg");
	--infobar-close-button-pressed:	url("chrome://userchrome/content/assets/img/chrome-1/infobar/infobar_close_off_p.svg");
}

.notificationbox-stack {
	overflow: visible !important;

	&::before,
	&::after {
		top: 0px;
		height: calc(100% - 1px);
	}
}

notification-message {
	border: 0 !important;
	margin-block-end: 0px !important;
	margin-inline: 0px !important;

	&:not(:first-of-type):not([style*="margin-top"]) {
		margin-block-start: 4px !important;
	}

	&[type="warning"] .notification-button {
		border-color: rgb(151,141,95) !important;
		background: linear-gradient(
			to bottom,
			rgb(255,251,234),
			rgb(251,237,177)
		) !important;

	
		&:hover,
		&:active {
			border-color: rgb(75,70,48) !important;
		}
	
		&:active {
			background: linear-gradient(
				to bottom,
				rgb(253,242,192), 
				rgb(254,254,227)
			) !important;
		}
	}
}

.container.infobar,
notification-message /* Fix for Firefox ~120+ */ {
	&::before {
		content: unset !important;
	}

	&[style*="margin-top: -37px;"] {
		pointer-events: none !important;
	}
}

.container.infobar,
link[href*="infobar"] ~ div.container /* Fix for Firefox ~120+ */ {
	margin-block-start: -5px !important /* bruni:	We need to fight the forced margin-top here
													otherwise closing an infobar won't work as
													it depends on modifying the margin with an
													inline-style. */;
	min-height: 36px !important;
	border-block: 1px solid rgb(182,186,192) !important;
	background: linear-gradient(to bottom, rgb(229,229,229), rgb(217,217,217)) !important;
	border-radius: 0 !important;
	padding-block: 0 !important;
	padding-inline: 8px !important;
	color: black !important;
	font-size: 11pt !important;

	align-items: center !important /* Fix for Firefox 115 */;

	> .content /* Fix for Firefox ~120+ */ {
		gap: 0 !important;
		margin-inline-start: 0 !important;
		
		> .text-container {
			gap: 0 !important;
			align-items: center;
		}
	}

	> .icon,
	.icon-container > .icon /* Fix for Firefox ~120+ */ {
		width: 28px !important;
		height: 28px !important;
		margin: 0 !important;
		margin-inline-end: 6px !important;

		&::after {
			display: flex;
			height: 28px;
			width: 28px;
		}
	}

	.icon-container {
		margin: 0 !important;
	}

	.notification-content {
		display: flex !important;
		margin-inline-start: 0 !important;
	}

	.notification-message {
		padding: 0 !important;
		margin: 0 !important;
	}

	.notification-button-container {
		display: flex !important;
		gap: 10px;
		margin-inline: 10px !important;
	}

	.notification-close,
	.close /* Fix for Firefox ~120+ */ {
		overflow: hidden !important;

		margin-inline: 0 !important;
		margin-block: auto !important;

		background-color: transparent !important;
		border-radius: 0 !important;

		width: 21px !important;
		height: 21px !important;
		flex-shrink: 0;

		background-image: var(--infobar-close-button-normal) !important;
		background-position: center;
		background-repeat: no-repeat;
		background-size: unset !important;
	
		&:hover,
		&:focus {
			background-image: var(--infobar-close-button-hot) !important;
		}

		&:active {
			background-image: var(--infobar-close-button-pressed) !important;
		}

		> * {
			display: none !important;
		}
	}
}
/* Yellow infobar for Firefox 121+ only */
link[href*="infobar"] ~ div.container:has(
	.icon[src*="error.svg"],
	.icon[src*="warning.svg"]
) {
	background: linear-gradient(
		to bottom,
		rgb(255,242,183),
		rgb(250,231,147)
	) !important;

	.icon-container {
		display: none !important;
	}
}

.notification-button {
	padding: 0 !important;
	padding-inline: 5px !important;
	margin: 0 !important;
	height: 30px !important;
	border-width: 1px !important;
	border-style: solid !important;
	border-color: rgb(137,137,137) !important;
	border-radius: 4px !important;
	background: linear-gradient(
		to bottom,
		rgb(248,248,248),
		rgb(227,227,227)
	) !important;
	font-size: 11pt !important;
	font-weight: normal !important;
	color: black !important;

	&:hover,
	&:active {
		border-color: rgb(68,68,68) !important;
	}

	&:active {
		background: linear-gradient(
			to bottom,
			rgb(234,234,234),
			rgb(245,245,245)
		) !important;
	}
}

/* Close button of infobar */
link[href*="moz-button"] + button,
link[href*="moz-button"] + button > .button-background[size="small"] {
	background: unset !important;
}
// FIXME: Higher priority banners should be yellow

//Banner to show users of non-JavaScript-capable Firefox installations
#navigator-toolbox::after {
	min-height: unset !important;
	padding-block: unset !important;
	padding: calc((36px - 11pt)/2) 0 !important;
	padding-inline: 14px !important;
	content: "Yikes, Geckium is unable to start! Please ensure the Firefox Folder files have been copied to your installed Firefox's program folder.";

	background: linear-gradient(
		to bottom,
		rgb(255,242,183),
		rgb(250,231,147)
	) !important;
	color: black !important;
	font-size: 11pt !important;
}
:root[geckium-one] #navigator-toolbox::after {
	content: unset !important;
}