/**
 * Toast notifications.
 */

.dc-toast-stack {
	position: fixed;
	left: 50%;
	bottom: max(var(--dc-space-6), env(safe-area-inset-bottom));
	transform: translateX(-50%);
	z-index: 1200;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--dc-space-2);
	width: min(100% - var(--dc-space-8), 360px);
	pointer-events: none;
}

.dc-toast {
	pointer-events: auto;
	width: 100%;
	padding: var(--dc-space-3) var(--dc-space-5);
	border-radius: var(--dc-radius-full);
	background: var(--dc-colour-surface);
	color: var(--dc-colour-text);
	border: 1px solid var(--dc-colour-border);
	box-shadow: var(--dc-shadow-md);
	font-size: var(--dc-font-size-sm);
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	animation: dc-toast-in 0.28s ease both;
}

.dc-toast--success {
	border-color: color-mix(in srgb, var(--dc-colour-brand) 35%, var(--dc-colour-border));
	box-shadow:
		var(--dc-shadow-md),
		inset 3px 0 0 var(--dc-colour-brand);
}

.dc-toast--error {
	border-color: color-mix(in srgb, var(--dc-colour-error) 35%, var(--dc-colour-border));
	box-shadow:
		var(--dc-shadow-md),
		inset 3px 0 0 var(--dc-colour-error);
	color: var(--dc-colour-error);
}

.dc-toast.is-leaving {
	animation: dc-toast-out 0.25s ease both;
}

@keyframes dc-toast-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes dc-toast-out {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(6px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dc-toast,
	.dc-toast.is-leaving {
		animation: none;
	}
}