/** * cz-toast — transient notifications. The .cz-toast-stack container is * appended to on demand by cz-toast.js. Variants: --success, * --error, --info. Auto-dismiss after 3s by default. * * @package ClimaZona */ .cz-toast-stack { position: fixed; bottom: var(--spacing-lg); right: var(--spacing-lg); z-index: 10000; display: flex; flex-direction: column; gap: var(--spacing-sm); pointer-events: none; max-width: calc(100vw - 2 * var(--spacing-lg)); } .cz-toast { display: flex; align-items: flex-start; gap: var(--spacing-sm); min-width: 240px; max-width: 360px; padding: var(--spacing-sm) var(--spacing-md); background: var(--card); color: var(--card-foreground); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); box-shadow: var(--shadow-md); font-size: var(--font-size-sm); line-height: var(--line-height-snug); pointer-events: auto; transform: translateY(8px); opacity: 0; transition: transform var(--transition-base), opacity var(--transition-base); } .cz-toast.is-visible { transform: translateY(0); opacity: 1; } .cz-toast.is-leaving { transform: translateY(8px); opacity: 0; } .cz-toast__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; margin-top: 1px; } .cz-toast__message { flex: 1; margin: 0; } .cz-toast__close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; padding: 0; background: transparent; border: none; color: var(--muted-foreground); cursor: pointer; border-radius: var(--border-radius-sm); transition: color var(--transition-fast), background var(--transition-fast); } .cz-toast__close:hover { color: var(--foreground); background: var(--muted); } .cz-toast--success { border-color: var(--color-success); background: var(--color-success-light); color: var(--color-success-foreground); } .cz-toast--error { border-color: var(--color-error); background: var(--color-error-light); color: var(--color-error-foreground); } .cz-toast--info { border-color: var(--color-info); background: var(--color-info-light); color: var(--foreground); } @media (max-width: 640px) { .cz-toast-stack { left: var(--spacing-md); right: var(--spacing-md); bottom: var(--spacing-md); max-width: none; } .cz-toast { max-width: none; min-width: 0; } } @media (prefers-reduced-motion: reduce) { .cz-toast { transition: opacity var(--transition-fast); transform: none; } }