x-toasts:not(:empty) {
	position: fixed;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	top: 1em;
	right: 1em;
	width: min(30em, calc(100% - 2em));
}

x-toasts:empty {
	pointer-events: none;
}

x-toasts .toast {
	position: relative;
	padding: 0.5em 1em 0.7em;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 1em;

	box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.3);
	background: var(--toast-background-color);
	color: var(--toast-foreground-color);
	border-radius: 0.2em;
	transition: transform 0.5s;
}

x-toasts .toast> :first-child {
	flex: 1;
}

x-toasts .toast button[value="dismiss"] {
	flex: none;
	padding: 0 0.5em;

	border: none;
	background: none;
	text-transform: uppercase;
	font-size: 0.875em;
	font-weight: bold;
	min-height: 3em;
}

x-toasts .toast:not([data-clear]) {
	animation: 0.3s ease-out fly-in;
}

x-toasts .toast[data-clear] {
	animation: 0.3s ease-out fly-out;
}

x-toasts .toast::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	height: 0.2em;
	width: 100%;

	/*
	This animation determines when the toast is dismissed.
	In this example, we are keeping the toast visible for 10s.
	In addition to keeping the toast alive, it also shows up
	as a progress bar.
	 */
	animation: 10s linear forwards expire;
}

x-toasts .toast[data-priority=info]::after {
	background: var(--toast-progress-color);
}

x-toasts .toast[data-priority=error]::after {
	background: var(--toast-progress-critical-color);
}

x-toasts .toast:hover::after {
	/* We use the hover state to disable the animation */
	animation-play-state: paused;
}

@keyframes expire {
	from {
		transform: scaleX(1);
	}

	to {
		transform: scaleX(0);
	}
}

@keyframes fly-in {
	from {
		transform: translateX(100%);
	}
}

@keyframes fly-out {
	to {
		transform: translateX(100%);
	}
}