/**
 * WLRE Theme — Shared toast primitive.
 *
 * Figma canonical: 6081-83301 (success), 6081-83401 (with Undo action),
 * 6118-227756 (two-line with description).
 *
 * Contract:
 *   - Pastel tint background (`--wlre-color-green-50` / `--wlre-color-error-50`)
 *   - 1px border all sides, 4px leading-edge accent, 12px radius
 *   - Title (Bold 14) above optional description (Regular 12), same color
 *   - Action (Undo / Edit) renders as an outline button STACKED below the
 *     title inside the body column (not a right-aligned link)
 *
 * JS contract: window.wlreToast.show(message, opts?) — see assets/js/toasts.js.
 */

.wlre-toast {
	position: fixed;
	top: calc(var(--wlre-header-height) + 16px);
	right: var(--wlre-space-24);
	transform: translateY(-12px);
	min-width: 280px;
	max-width: 380px;
	width: calc(100% - 32px);
	background: var(--wlre-color-text-900);
	color: var(--wlre-color-white);
	font-family: var(--wlre-font-body);
	font-size: var(--wlre-font-size-m);
	line-height: var(--wlre-line-height-body);
	padding: var(--wlre-space-12) var(--wlre-space-16) var(--wlre-space-12) var(--wlre-space-24);
	border-radius: var(--wlre-radius-md);
	display: inline-flex;
	align-items: flex-start;
	gap: var(--wlre-space-8);
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 9999;
	box-shadow: 0 8px 24px rgba(8, 56, 25, 0.18);
}

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

/* Icon (success + error only). */
.wlre-toast__icon {
	flex: 0 0 auto;
	width: var(--wlre-space-20);
	height: var(--wlre-space-20);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: currentColor;
	margin-top: 2px;
}

.wlre-toast__icon svg {
	width: 100%;
	height: 100%;
}

.wlre-toast__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: var(--wlre-space-8);
	min-width: 0;
}

.wlre-toast__title {
	font-weight: 700;
	font-size: var(--wlre-font-size-m);
	line-height: var(--wlre-line-height-body);
}

.wlre-toast__description {
	font-weight: 400;
	font-size: var(--wlre-font-size-s);
	line-height: var(--wlre-line-height-body);
	color: inherit; /* Figma — description matches title color, no opacity dim. */
}

/* Action (Undo / Edit) — outline button stacked below title per Figma
 * 6081-83401. 32px tall, navy-outline, 8px radius, 12px Lato Bold. */
.wlre-toast__action {
	align-self: flex-start;
	height: 32px;
	padding: 0 var(--wlre-space-12);
	background: transparent;
	color: inherit;
	font-family: var(--wlre-font-body);
	font-weight: 700;
	font-size: var(--wlre-font-size-s);
	line-height: 1;
	border: 1px solid currentColor;
	border-radius: var(--wlre-radius-sm);
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	margin-top: var(--wlre-space-4);
	transition: background-color 0.15s ease;
}

.wlre-toast__action:hover,
.wlre-toast__action:focus-visible {
	background: rgba(255, 255, 255, 0.08);
}

.wlre-toast--success .wlre-toast__action:hover,
.wlre-toast--error .wlre-toast__action:hover {
	background: rgba(0, 0, 0, 0.05);
}

/* Success: pastel green bg + dark green accent + text. */
.wlre-toast--success {
	background: var(--wlre-color-green-50);
	color: var(--wlre-color-success-700);
	border: 1px solid var(--wlre-color-success-700);
	border-inline-start-width: 4px;
	box-shadow: 0 8px 24px rgba(42, 81, 51, 0.15);
}

/* Error: pastel red bg + dark red accent + text. */
.wlre-toast--error {
	background: var(--wlre-color-error-50);
	color: var(--wlre-color-error-700);
	border: 1px solid var(--wlre-color-error-700);
	border-inline-start-width: 4px;
	box-shadow: 0 8px 24px rgba(139, 31, 31, 0.15);
}