/* Toast stack for WooCommerce notices (assets/woo/notices.js). Re-theme through the :root block. */

:root {
	--nomon-toast-z-index: 2000010;
	--nomon-toast-bg: var(--wp--preset--color--background, #ffffff);
	--nomon-toast-border: var(--wp--preset--color--border, #dbdbdb);
	--nomon-toast-text: var(--wp--preset--color--foreground, #000000);
	--nomon-toast-text-light: var(--wp--preset--color--muted, #6c6c6c);
	--nomon-toast-accent: var(--wp--preset--color--accent, #0032cc);
	--nomon-toast-danger: var(--wp--preset--color--danger, #cc3300);
	--nomon-toast-success: var(--wp--preset--color--success, #189e28);
	--nomon-toast-radius: 0;
	--nomon-toast-transition: 0.3s ease;
	--nomon-toast-gap-sm: 6px;
	--nomon-toast-gap-md: 12px;
	--nomon-toast-gap-lg: 16px;
}

.nomon-toasts {
	position: fixed;
	left: 50%;
	bottom: var(--nomon-toast-gap-lg);
	transform: translateX(-50%);
	z-index: var(--nomon-toast-z-index);
	display: flex;
	flex-direction: column;
	gap: var(--nomon-toast-gap-sm);
	width: min(420px, calc(100vw - 2 * var(--nomon-toast-gap-lg)));
	pointer-events: none;
}

.nomon-toast {
	display: flex;
	align-items: flex-start;
	gap: var(--nomon-toast-gap-md);
	padding: var(--nomon-toast-gap-md) var(--nomon-toast-gap-lg);
	background: var(--nomon-toast-bg);
	border: 1px solid var(--nomon-toast-border);
	border-left: 4px solid var(--nomon-toast-danger);
	border-radius: var(--nomon-toast-radius);
	color: var(--nomon-toast-text);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
	pointer-events: auto;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--nomon-toast-transition), transform var(--nomon-toast-transition);
}

.nomon-toast--success {
	border-left-color: var(--nomon-toast-success);
}

.nomon-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.nomon-toast.is-leaving {
	opacity: 0;
	transform: translateY(12px);
}

.nomon-toast__message {
	flex: 1 1 auto;
	min-width: 0;
}

.nomon-toast__close {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: -2px -4px 0 0;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	color: var(--nomon-toast-text-light);
	transition: color var(--nomon-toast-transition);
}

.nomon-toast__close svg {
	width: 16px;
	height: 16px;
}

.nomon-toast__close:hover {
	color: var(--nomon-toast-text);
}

.nomon-toast__close:focus-visible {
	outline: 2px solid var(--nomon-toast-accent);
	outline-offset: 2px;
	border-radius: var(--nomon-toast-radius);
}

@media (prefers-reduced-motion: reduce) {
	.nomon-toast {
		transition: none;
	}
}