/**
 * Component — Toast
 *
 * Expected HTML: one region, present once per page —
 *   <div class="ec-toast-region" data-ec-component="toast-region" aria-live="polite" aria-atomic="true"></div>
 *
 * Individual toasts are created at runtime by toast.js via
 * EC.Toast.show(message, variant) — there is no static per-toast
 * markup to author by hand.
 *
 * Semantic variants map to the same feedback tokens Badge and
 * form-control error states already use, not the material system —
 * a toast's meaning is status, not Water/Fire's emotional register.
 */

.ec-toast-region {
	position: fixed;
	z-index: var(--ec-z-toast);
	top: var(--ec-space-5);
	right: var(--ec-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--ec-space-3);
	max-width: 24rem;
	width: calc(100% - var(--ec-space-8));
}

.ec-toast {
	display: flex;
	align-items: flex-start;
	gap: var(--ec-space-3);
	padding: var(--ec-space-4);
	border-radius: var(--ec-radius-md);
	background-color: var(--ec-color-surface);
	color: var(--ec-color-text-primary);
	box-shadow: var(--ec-elevation-2);
	border-left: 3px solid var(--ec-color-info);
	font-family: var(--ec-font-family-base);
	font-size: var(--ec-font-size-body-sm);
	line-height: var(--ec-line-height-base);
	opacity: 0;
	transform: translateX(var(--ec-space-6));
	transition:
		opacity var(--ec-duration-base) var(--ec-ease-standard),
		transform var(--ec-duration-base) var(--ec-ease-standard);
}

.ec-toast--visible {
	opacity: 1;
	transform: translateX(0);
}

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

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

.ec-toast--danger {
	border-left-color: var(--ec-color-danger);
}

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

.ec-toast__message {
	flex: 1;
}

.ec-toast__close {
	background: none;
	border: none;
	padding: var(--ec-space-1);
	color: var(--ec-color-text-secondary);
	cursor: pointer;
	border-radius: var(--ec-radius-sm);
	flex-shrink: 0;
}

.ec-toast__close:hover {
	background-color: var(--ec-color-surface-elevated);
}

.ec-toast__close:focus-visible {
	outline: 2px solid var(--ec-material-color);
	outline-offset: 2px;
}