/**
 * NH Toast — Phase 2 shared notification styles (tokens-ready).
 */

:root {
	--sia-toast-bg: var(--sia-surface, #ffffff);
	--sia-toast-text: var(--sia-text, #1a2b4b);
	--sia-toast-border: var(--sia-border, #e2e8f0);
	--sia-toast-radius: var(--sia-radius, 12px);
	--sia-toast-shadow: var(--sia-shadow, 0 4px 24px rgba(26, 43, 75, 0.06));
	--sia-toast-success: var(--sia-success, #2bb673);
	--sia-toast-error: var(--sia-danger, #e74c3c);
	--sia-toast-warning: var(--sia-warning, #f6a623);
	--sia-toast-info: var(--sia-primary, #18509c);
	--sia-toast-duration-enter: 180ms;
	--sia-toast-duration-exit: 220ms;
	--sia-toast-gap: 8px;
	--sia-toast-padding: 12px 16px;
	--sia-toast-font-size: 14px;
	--sia-toast-line-height: 1.45;
	--sia-toast-max-width: 360px;
	--sia-toast-z-index: 100100;
}

.sia-toast-container {
	position: fixed;
	top: 32px;
	right: 20px;
	z-index: var(--sia-toast-z-index);
	display: flex;
	flex-direction: column;
	gap: var(--sia-toast-gap);
	max-width: var(--sia-toast-max-width);
	pointer-events: none;
}

@media screen and (max-width: 782px) {
	.sia-toast-container {
		top: 46px;
		right: 12px;
		left: 12px;
		max-width: none;
	}
}

.sia-toast {
	background: var(--sia-toast-bg);
	color: var(--sia-toast-text);
	border: 1px solid var(--sia-toast-border);
	border-left-width: 4px;
	border-radius: var(--sia-toast-radius);
	box-shadow: var(--sia-toast-shadow);
	padding: var(--sia-toast-padding);
	font-size: var(--sia-toast-font-size);
	line-height: var(--sia-toast-line-height);
	opacity: 0;
	transform: translateY(-6px);
	transition:
		opacity var(--sia-toast-duration-enter) ease,
		transform var(--sia-toast-duration-enter) ease;
}

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

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

.sia-toast--error {
	border-left-color: var(--sia-toast-error);
}

.sia-toast--warning {
	border-left-color: var(--sia-toast-warning);
}

.sia-toast--info {
	border-left-color: var(--sia-toast-info);
}