.public-notif-overlay {
	--public-notif-wrapper-height: 70px;
	--public-notif-wrapper-margin: 20px;
	--public-notif-toggle-span-size: 33px;
	--public-notif-toggle-span-margin: calc((var(--public-notif-wrapper-height) - var(--public-notif-toggle-span-size)) / 2);
	--public-notif-toggle-span-font-size: 21px;
	--100vh: 100vh;

	z-index: 10000;
	position: fixed;
	top: 0px;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.public-notif-overlay[data-hidden="true"] {
	z-index: -10000;
	opacity: 0;
}

.public-notif-wrapper {
	position: absolute;
	max-width: 100vw;
	width: calc(100% - (var(--public-notif-wrapper-margin) * 2));
	height: var(--public-notif-wrapper-height);
	margin: var(--public-notif-wrapper-margin);

	transition: max-width .3s, transform .3s;
}

@supports not selector(:has(*)) {
	.public-notif-wrapper {
		max-width: 0;
		left: 50%;
		transform: translateX(-50%);
	}
}

.public-notif-wrapper:has(.public-notif-container:not([open])) {
	max-width: var(--public-notif-wrapper-height);
	height: var(--public-notif-wrapper-height);
	background: transparent;
	transform: translateY(calc(var(--100vh) - var(--public-notif-wrapper-height) - (var(--public-notif-wrapper-margin) * 2)));
}

@supports selector(:has(*)) {
	.public-notif-wrapper-bg {
		position: fixed;
		width: 105%;
		min-width: 1400px;
		height: 120px;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.05) 90%, rgba(0,0,0,0) 100%),
			radial-gradient(farthest-side at 45% -10px, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.10) 90%, rgba(0, 0, 0, 0) 100%);
		opacity: 1;
		pointer-events: all;
		transition: all .2s .3s;
	}

	.public-notif-wrapper-bg:has(+.public-notif-wrapper .public-notif-container:not([open])) {
		opacity: 0;
		pointer-events: none;
		transition-delay: 0s;
		transition-duration: .2s;
	}
}

.public-notif-container {
	position: relative;
	display: block;
	max-width: 1400px;
	height: var(--public-notif-wrapper-height);
	margin: 0 auto;
	background-color: #c40707;
	border-radius: 6px;
	overflow: visible;
	pointer-events: all;
}

@supports not selector(:has(*)) {
	.public-notif-container {
		position: absolute;
		margin: 0;
		width: min(1400px, calc(100vw - (var(--public-notif-wrapper-margin) * 2)));
		left: max(-700px, -50vw);
		transition: all .3s;
	}
}

.public-notif-container summary::marker,
.public-notif-container summary::-webkit-details-marker {
	display: none;
}

.public-notif-container:not([open]):has(.public-notif-expansion[open]) {
	max-height: var(--public-notif-wrapper-height);
}

.public-notif-container[open]:has(.public-notif-expansion[open]) {
	height: auto;
	max-height: calc(var(--100vh) * 2);
	transition: max-height 0.1s 1s;
}

.public-notif-container:not([open]) {
	box-shadow: 0px 0px 5px #868686d1;
}

@supports not selector(:has(*)) {
	.public-notif-container[open] {
		height: auto;
		max-height: calc(var(--100vh) * 2);
		transition: all .3s;
	}

	.public-notif-container:before {
		content: '';
		position: fixed;
		width: 105%;
		min-width: 1400px;
		height: 120px;
		top: calc(-1 * var(--public-notif-wrapper-margin));
		left: 50%;
		transform: translateX(-50%);
		z-index: -1;
		background: linear-gradient(180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.05) 90%, rgba(0,0,0,0) 100%),
		radial-gradient(farthest-side at 45% -10px, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.10) 90%, rgba(0, 0, 0, 0) 100%);
		opacity: 1;
		pointer-events: all;
		transition: opacity .2s .3s;
	}

	.public-notif-container:not([open]) {
		max-width: var(--public-notif-wrapper-height);
		height: var(--public-notif-wrapper-height);
		transform: translateY(calc(var(--100vh) - var(--public-notif-wrapper-height) - (var(--public-notif-wrapper-margin) * 2)));
	}

	.public-notif-container:not([open]):before {
		opacity: 0;
		pointer-events: none;
		transition-delay: 0s;
		transition-duration: .2s;
	}
}

.public-notif-container:not([open]) .public-notif-toggle {
	cursor: pointer;
}

.public-notif-text {
	position: relative;
	margin: 0 clamp(5px, 2%, 15px);
	padding: clamp(5px, 2%, 15px) 0;
	color: white;
	font-size: 26px;
	display: flex;
	align-items: center;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
}

.public-notif-text.expanded {
	height: auto;
	white-space: unset;
	cursor: default;
}

.public-notif-toggle {
	position: absolute;
	top: 0;
	right: 0;
	width: var(--public-notif-wrapper-height);
	height: var(--public-notif-wrapper-height);
	display: flex;
	justify-content: flex-end;
	z-index: 1;
}

.public-notif-toggle span {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--public-notif-toggle-span-size);
	height: var(--public-notif-toggle-span-size);
	top: var(--public-notif-toggle-span-margin);
	right: var(--public-notif-toggle-span-margin);
	color: white;
	font-size: var(--public-notif-toggle-span-font-size);
	font-weight: 500;
	border: 1px solid #ffffff75;
	border-radius: 50%;
	text-align: center;
	cursor: pointer;
}

.public-notif-toggle span:hover {
	background: #9f0000;
	box-shadow: 0px 0px 5px #00000057;
}

.public-notif-toggle:focus span,
.public-notif-toggle:focus-within span,
.public-notif-toggle:focus-visible span {
	background: #b30000;
}

.public-notif-container[open] .public-notif-toggle .public-notif-open,
.public-notif-container:not([open]) .public-notif-toggle .public-notif-close {
	display: none;
}

.public-notif-expansion {
	height: 100%;
}

.public-notif-expansion:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 150px;
	height: var(--public-notif-wrapper-height);
	background: linear-gradient(270deg, #c40707 0%, #c40707 30%, rgba(0,0,0,0) 100%);
	pointer-events: none;
	border-radius: 6px;
}

.public-notif-expansion summary {
	height: var(--public-notif-wrapper-height);
	display: flex;
}

.public-notif-expansion summary:hover,
.public-notif-expansion summary:focus-visible {
	box-shadow: inset 0px 0px 5px #00000057;
}

.public-notif-expansion {
	opacity: 0;
	transition: opacity .2s 0s;
}

.public-notif-overlay[data-hidden="false"] .public-notif-container[open] .public-notif-expansion {
	opacity: 1;
	transition-delay: 1s;
}

@supports (height: 100dvh) {
	.public-notif-overlay {
		--100vh: 100dvh;
	}
}

@media (max-width: 928px) {
	.public-notif-overlay {
		--public-notif-wrapper-height: 46px;
		--public-notif-wrapper-margin: 10px;
		--public-notif-toggle-span-size: 27px;
		--public-notif-toggle-font-size: 16px;
	}

	.public-notif-container {
		max-width: 100%;
	}

	.public-notif-text {
		font-size: 22px;
	}
}