src/static/scripts/components/misc/toast/_toast.scss
@use "../../../../style/vars";
@use "../../../../style/shadow";

@keyframes show {
	from { transform: translateY(calc(100% + 1rem)) translateX(-50%); }
	to { transform: translateY(0) translateX(-50%); }
}

@keyframes remove {
	from { transform: translateY(0) translateX(-50%); }
	to { transform: translateY(calc(100% + 1rem)) translateX(-50%); }
}
.toast {
	position: fixed;
	bottom: 0.5rem;
	z-index: 99999;
	margin-left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	background: var(--theme);
	padding: 0.7rem;
	width: min(27rem, calc(100vw - 2rem));
	background: var(--theme);
	border-radius: 1rem;
	@extend %shadow-diffuse;
	transition: transform 1s ease;
	animation: show .25s ease forwards;

	* {
		color: vars.$text-on-primary;
	}

	> .levelImg {
		width: 2rem;
		margin-right: .7rem;
	}

	> button:first-of-type {
		margin-left: auto;
	}

	> button {
		display: flex;
		align-items: center;
		transition: transform .25s ease;
		width: 2rem;
		height: 2rem;
		--dim: 2.5rem;

		> img {
			width: 2rem;
		}
	}

	.title {
		font-size: 1.1rem;
	}

	.text {
		font-size: .9rem;
	}

	&.remove {
		animation: remove .25s ease forwards;
	}

	&.timeoutAnimation {
		--timeout-duration: 2s;

		&::before, &::after {
			content: '';
			position: absolute;
			bottom: .35rem;
			left: 3.5rem;
			height: 2px;
		}

		&::before {
			width: calc(100% - 6rem);
			background: var(--theme-stronger);
		}

		&::after {
			width: 0;
			opacity: 0;
			background: rgba(255, 255, 255, 0.75);
			transition: width .25s ease, opacity .125s ease;
		}

		&.animate::after {
			opacity: 1;
			width: calc(100% - 6rem);
			transition: width var(--timeout-duration) linear, opacity .125s ease;
		}
	}
}
