.toastRegion {
	flex-direction: column;
	gap: 8px;
	display: flex;
	position: fixed;
	top: 55px;
	right: 10px;
	z-index: 10;
}

.toast {
	background: var(--color-info-low);
	border-radius: var(--rounded);
	padding: var(--s-1-5) var(--s-3);
	align-items: center;
	justify-content: center;
	font-size: var(--fonts-xsm);
	font-weight: var(--semi-bold);
	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(--fonts-xxsm);
	gap: var(--s-2);
	align-items: center;
	margin-block-end: var(--s-1-5);
}

.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;
	outline-color: var(--color-text) !important;
}

.closeButton svg {
	width: 1rem;
	fill: var(--color-text);
}

.alertIcon {
	width: 1.25rem;
}

.errorToast .alertIcon {
	fill: var(--color-error);
}

.infoToast .alertIcon {
	fill: var(--color-info);
}

.successToast .alertIcon {
	fill: var(--color-success);
}