| .toast-container { | |
| position: fixed; | |
| top: 1rem; | |
| right: 1rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| z-index: 9999; | |
| pointer-events: none; | |
| } | |
| .toast { | |
| pointer-events: auto; | |
| min-width: 240px; | |
| max-width: 360px; | |
| padding: 0.75rem 1rem; | |
| border-radius: 10px; | |
| color: white; | |
| font-size: 0.9rem; | |
| box-shadow: var(--shadow-md); | |
| opacity: 0; | |
| transform: translateX(20px); | |
| transition: | |
| opacity 0.25s ease, | |
| transform 0.25s ease; | |
| } | |
| .toast.show { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| .toast-success { | |
| background: var(--success); | |
| } | |
| .toast-error { | |
| background: var(--danger); | |
| } | |
| .toast-info { | |
| background: var(--primary); | |
| } | |