thrillwiki_laravel/resources/css/alerts.css

/* Alert Styles */
.alert {
    @apply fixed z-50 px-4 py-3 transition-all duration-500 transform rounded-lg shadow-lg right-4 top-4 text-white;
    animation: slideIn 0.5s ease-out forwards;
}

.alert.hide {
    animation: slideOut 0.5s ease-out forwards;
}

.alert-success {
    @apply bg-green-500 dark:bg-green-600;
}

.alert-error {
    @apply bg-red-500 dark:bg-red-600;
}

.alert-info {
    @apply bg-blue-500 dark:bg-blue-600;
}

.alert-warning {
    @apply bg-yellow-500 dark:bg-yellow-600 text-gray-900 dark:text-white;
}

/* Animation keyframes */
@keyframes slideIn {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}