/**
 * Toast Notification Component
 * Non-blocking notifications with ARIA support
 * Replaces blocking alert() calls
 */

.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    min-width: 300px;
    max-width: 500px;
    padding: 1rem 1.5rem;
    background: var(--color-gray-900);
    color: var(--color-white);
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
    font-size: var(--font-size-base);
    line-height: 1.5;
    z-index: var(--z-toast);

    /* Hidden by default */
    opacity: 0;
    transform: translateY(1rem);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
    pointer-events: none;
}

.toast-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Error Toast (Red) */
.toast-error {
    background: var(--color-error);
    color: var(--color-white);
}

/* Success Toast (Green) */
.toast-success {
    background: var(--color-success);
    color: var(--color-white);
}

/* Info Toast (Blue) */
.toast-info {
    background: var(--color-info);
    color: var(--color-white);
}

/* Warning Toast (Orange) */
.toast-warning {
    background: var(--color-warning);
    color: var(--color-white);
}

/* Mobile responsiveness */
@media (width < 768px) {
    .toast {
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
        min-width: auto;
    }
}