:root {
	--white: #fff;
	--green: #4caf50;
	--blue: #2896f3;
	--yellow: #fbc107;
	--red: #f55153;
	--transition-duration: 0.25s;
}

.toasts-container {
	position: fixed;
	top: 3rem;
	right: 0;
	padding: 2.4rem;
	z-index: 100;
}

.toasts-container .toast {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-width: fit-content;
	background-color: #121212;
	border-radius: 1.2rem;
	padding: 1.3rem 2rem;
	margin-bottom: 1.5rem;
	opacity: 0;
	transform: translateX(100%);
	animation: toast-opening var(--transition-duration) ease-in-out forwards;
	overflow-x: hidden;
}

.toasts-container .toast:not(.active) {
	animation-name: toast-closing;
	animation-duration: 0.35s;
}

.toasts-container .toast .t-icon {
	margin-right: 1rem;
}

.toasts-container .toast .t-icon svg {
	fill: var(--white);
	width: 1.2rem;
	height: 1.2rem;
}

.toasts-container .toast .t-message {
	margin-right: 2rem;
	color: var(--white);
	line-height: 1.2;
	font-size: .85rem;
}

.toasts-container .toast .t-close svg {
	fill: var(--white);
	opacity: 1;
	width: 1.2rem;
	height: 1.2rem;
	transition: opacity var(--transition-duration);
	cursor: pointer;
}

@media (hover: hover) {
	.toasts-container .toast .t-close svg {
		opacity: 0.5;
	}
}

.toasts-container .toast .t-close:hover svg {
	opacity: 1;
}

.toasts-container .toast .t-progress-bar {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 6px;
	width: 100%;
	border-radius: 0 0 0 0.5rem;
	background-color: rgba(255, 255, 255, 0.5);
	animation: progress-bar-animation linear forwards var(--toast-duration, 3000ms);
	transform-origin: left;
}

.toasts-container .toast.success {
	background-color: var(--green);
}

.toasts-container .toast.system {
	background-color: var(--blue);
}

.toasts-container .toast.warning {
	background-color: var(--yellow);
}

.toasts-container .toast.error {
	background-color: var(--red);
}

@keyframes toast-opening {
	from {
		opacity: 0;
		transform: translateX(100%);
	}

	to {
		opacity: 1;
		transform: translateX(0%);
	}
}

@keyframes toast-closing {
	0% {
		opacity: 1;
		transform: translateX(0%);
	}

	75% {
		max-height: 15rem;
		padding: 2.4rem;
		opacity: 0;
		transform: translateX(100%);
	}

	100% {
		max-height: 0;
		padding: 0;
		transform: translateX(100%);
	}
}

@keyframes progress-bar-animation {
	to {
		transform: scaleX(0);
	}
}