.flash-toaster { position: fixed; top: 1rem; right: 1rem; z-index: 9999; font-family: sans-serif; } .toast { display: flex; align-items: center; gap: 0.75rem; min-width: 250px; max-width: 320px; padding: 0.75rem 1rem; border-radius: 4px; color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transform: translateX(100%); /* start off-screen */ opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease; } .toast.show { transform: translateX(0); opacity: 1; } /* Status colors */ .toast--success { background: #198754; } .toast--error { background: #dc3545; } .toast--warning { background: #ffc107; color: #000; } /* Close button */ .toast__close { background: none; border: none; color: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; } /* Hide animation */ .toast.hide { transform: translateX(100%); opacity: 0; }