.gui-toast-group {
	position: fixed;
	z-index: 999999;
	inset-block-end: 0;
	inset-inline: 0; 
	padding-block-end: 7vh;

	display: grid;
	justify-items: center;
	justify-content: center;
	gap: 1vh;

	/* optimizations */
	pointer-events: none;
}

.gui-toast {
	--_duration: 3s;
	--_bg-lightness: 90%;
	--_travel-distance: 0;

	font-family: system-ui, sans-serif;
	font-size: 14px;
	color: white;
	background: #181818;
	opacity: 0.75;

	/*max-inline-size: min(25ch, 90vw);*/
	padding-block: .5ch;
	padding-inline: 1ch;
	border-radius: 3px;
	font-size: 1rem;

	will-change: transform;
	animation: 
		fade-in .3s ease,
		slide-in .3s ease,
		fade-out .3s ease var(--_duration);
}

@media (prefers-color-scheme: dark) {
	.toast .gui-toast {
		color: white;
		--_bg-lightness: 20%;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.toast .gui-toast {
		--_travel-distance: 5vh;
	}
}

@keyframes fade-in {
	from { opacity: 0 }
}
@keyframes fade-out {
	to { opacity: 0 }
}
@keyframes slide-in {
	from { transform: translateY(var(--_travel-distance, 10px)) }
}