/* .global-layer itself is generic (see HTMLInterface#mountGlobal) - not
   toast-specific - but toasts are its only user so far, hence living here. */
.global-layer {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 200; /* above popups (100/110): a global toast should stay visible even while one is open */
}

.element-toast-stack {
	position: fixed;
	right: 0;
	bottom: 1.25rem;
	pointer-events: none;
}

.element-toast {
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1.25rem;
	background: var(--surface);
	color: var(--surface-text);
	box-shadow: 0 0.25rem 1rem #00000033;
	pointer-events: auto;

	clip-path: var(--corner-path-small-left);

	transform: translate(0, calc(-1 * var(--toast-offset, 0px)));
	transition: transform 0.35s ease, opacity 0.3s ease;
}

.element-toast[data-dismissible] {
	cursor: pointer;
}

/* Slide in/out to the right, off-screen. --toast-offset is applied even in
   these states so a toast never jumps vertically when it finishes entering
   or starts exiting - only the horizontal slide animates. */
.element-toast.entering,
.element-toast.exiting {
	transform: translate(100%, calc(-1 * var(--toast-offset, 0px)));
	opacity: 0;
}

.element-toast .element-logo {
	width: 1.5rem;
	height: 1.5rem;
	flex: none;
	color: var(--surface-text);
}

.element-toast[data-status="active"] .element-logo {
	animation: toast-breathe 1s ease-in-out infinite;
}
@keyframes toast-breathe {
	0%, 100% { color: var(--surface-text); }
	50% { color: var(--surface-text-muted); }
}

.element-toast[data-status="success"] .element-logo svg,
.element-toast[data-status="error"] .element-logo svg {
	color: #ffffff;
	overflow: visible;
}
.element-toast[data-status="success"] .element-logo path {
	stroke: #00aa00;
	stroke-width: 1rem;
	stroke-linejoin: miter;
	stroke-linecap: butt;
	paint-order: stroke fill;
}
.element-toast[data-status="error"] .element-logo path {
	stroke: #ff0000;
	stroke-width: 1rem;
	stroke-linejoin: miter;
	stroke-linecap: butt;
	paint-order: stroke fill;
}

.element-toast .element-text {
	font-size: 0.9rem;
	white-space: nowrap;
}