body {
}
.gui-toast-group {
	position: fixed;
	z-index: 1;
	inset-block-end: 0;
	inset-inline: 0;
	padding-block-end: 5vh;
	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;
	color: black;
	background: hsl(0 0% var(--_bg-lightness) / 90%);
	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 (--dark) {
		color: white;
		--_bg-lightness: 20%;
	}

	@media (--motionOK) {
		--_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))
	}
}