.toastRegion {
	flex-direction: column;
	gap: 8px;
	position: fixed;
	inset: unset;
	top: calc(var(--layout-nav-height) + var(--s-2));
	right: 10px;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--color-text);
	overflow: visible;
	outline: none;

	&:popover-open {
		display: flex;
	}
}

.toast {
	background: var(--color-info-low);
	border-radius: var(--radius-box);
	padding: var(--s-1-5) var(--s-3);
	align-items: center;
	justify-content: center;
	font-size: var(--font-sm);
	font-weight: var(--weight-semi);
	gap: var(--s-1);
	border: 2px solid var(--color-info);
	width: 250px;
	outline: none;
	view-transition-class: toast;
}

::view-transition-new(.toast):only-child {
	animation: appear 400ms;
}

::view-transition-old(.toast):only-child {
	animation: disappear 400ms;
}

@keyframes disappear {
	to {
		opacity: 0;
	}
}

@keyframes appear {
	from {
		opacity: 0;
	}
}

.topRow {
	display: flex;
	text-transform: uppercase;
	color: var(--color-info-high);
	font-size: var(--font-xs);
	gap: var(--s-2);
	align-items: center;
}

.errorToast {
	border-color: var(--color-error);
	background-color: var(--color-error-low);

	.topRow {
		color: var(--color-error-high);
	}
}

.successToast {
	border-color: var(--color-success);
	background-color: var(--color-success-low);

	.topRow {
		color: var(--color-success-high);
	}
}

.closeButton {
	margin-inline-start: auto;
	margin-inline-end: calc(var(--s-1) * -1);
	height: auto;
	padding: var(--s-1);
	border-radius: var(--radius-box);
	color: inherit;
	opacity: 0.75;

	&:hover {
		opacity: 1;
	}

	& svg {
		width: 1rem;
	}
}

.alertIcon {
	width: 1.25rem;
}