toast {
	position: fixed;
	bottom: -64px;
	z-index: 1;

	padding: 8px 12px;
	border-radius: 3px;

	background: var(--g-rose);
	box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05);
	transform: scale(0.5);
	/* ----- ----- ----- */
	& section {
		color: white;
		/* ----- ----- ----- */
		& svg {
			width: auto !important;
			height: 14px !important;
		}
	}
	/* ----- ----- ----- */
	&.show.top {
		--q-low: toast-top 4s forwards;
		--q-high: var(--q-low);
		--q-ultra: var(--q-low);

		bottom: auto;
	}
	&.show.bottom {
		--q-low: toast-bottom 4s forwards;
		--q-high: var(--q-low);
		--q-ultra: var(--q-low);

		top: auto;
	}
	&.show.center {
		--q-low: toast-center 4s forwards;
		--q-high: var(--q-low);
		--q-ultra: var(--q-low);

		top: 50%;
		transform: translate(-50%, -50%);
		flex-direction: column;
		padding: 8px;
		/* ----- ----- ----- */
		& svg {
			margin-top: 8px;
			width: 40px;
			height: 40px;
		}
	}
}
/* ----- ----- ----- */
@keyframes toast-top {
	0%, 100% {
		top: -64px;
		transform: scale(0.5);
	}
	15%, 85% {
		top: 32px;
		transform: scale(1);
	}
}
@keyframes toast-bottom {
	0%, 100% {
		bottom: -64px;
		transform: scale(0.5);
	}
	15%, 85% {
		bottom: 32px;
		transform: scale(1);
	}
}
@keyframes toast-center {
	0%, 100% {
		transform: scale(0.5);
	}
	15%, 85% {
		transform: scale(1);
	}
}