toast {
	position: fixed;
	z-index: 1;

	display: none;

	padding: 16px;
	border: 1px solid var(--theme-scrollbar);
	border-radius: 8px;

	transform: scale(0);
	/* ----- ----- ----- */
	&.theme {
		background: var(--theme-backdrop);
		color: var(--theme-text);
	}
	&.dark {
		background: rgb(16, 16, 16);
		color: white;
	}
	&.light {
		background: rgb(240, 240, 240);
		color: black;
	}
	/* ----- ----- ----- */
	&.show {
		display: flex;
		/* ----- ----- ----- */
		&.top {
			--q-low: toast-top 4s forwards;
			--q-high: var(--q-low);
			--q-ultra: var(--q-low);
		}
		&.bottom {
			--q-low: toast-bottom 4s forwards;
			--q-high: var(--q-low);
			--q-ultra: var(--q-low);
		}
		&.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;
		}
	}
}
/* ----- ----- ----- */
@keyframes toast-top {
	0%, 100% {
		top: -64px;
		transform: scale(0);
	}
	15%, 85% {
		top: 64px;
		transform: scale(1);
	}
}
@keyframes toast-bottom {
	0%, 100% {
		bottom: -64px;
		transform: scale(0);
	}
	15%, 85% {
		bottom: 64px;
		transform: scale(1);
	}
}
@keyframes toast-center {
	0%, 100% {
		transform: scale(0);
	}
	15%, 85% {
		transform: scale(1);
	}
}