.toast-modern-container {
	z-index: 5000;
}

.toast-modern {

	backdrop-filter: blur(14px);
	background: rgba(30, 30, 30, 0.75);

	border-radius: 14px;

	min-width: 320px;
	max-width: 420px;

	box-shadow:
		0 10px 25px rgba(0, 0, 0, 0.35),
		0 4px 8px rgba(0, 0, 0, 0.2);

	overflow: hidden;

	animation: toastIn .35s ease;
}

.toast-content {

	display: flex;
	align-items: center;
	gap: 14px;

	padding: 14px 18px;

	font-size: 0.95rem;
}

.toast-icon {

	font-size: 1.3rem;
	display: flex;
	align-items: center;
}

.toast-text {
	flex: 1;
}

.toast-progress {

	height: 3px;
	width: 100%;

	background: rgba(255, 255, 255, 0.2);

	position: relative;
}

.toast-progress::after {

	content: "";

	position: absolute;
	left: 0;
	top: 0;
	height: 100%;

	width: 100%;

	background: currentColor;

	animation: toastProgress 12s linear forwards;
}

.toast-success {
	color: #22c55e;
}

.toast-danger {
	color: #ef4444;
}

.toast-info {
	color: #38bdf8;
}

.toast-warning {
	color: #f59e0b;
}

@keyframes toastIn {

	from {
		transform: translateX(40px);
		opacity: 0;
	}

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

@keyframes toastProgress {

	from {
		width: 100%;
	}

	to {
		width: 0;
	}
}