/**
 * Alerts System Styles
 */

/* Alert severity colors */
.alert-info {
    --alert-bg: theme('colors.blue.100');
    --alert-text: theme('colors.blue.800');
    --alert-border: theme('colors.blue.300');
    --alert-icon: theme('colors.blue.500');
}

.alert-success {
    --alert-bg: theme('colors.green.100');
    --alert-text: theme('colors.green.800');
    --alert-border: theme('colors.green.300');
    --alert-icon: theme('colors.green.500');
}

.alert-warning {
    --alert-bg: theme('colors.yellow.100');
    --alert-text: theme('colors.yellow.800');
    --alert-border: theme('colors.yellow.300');
    --alert-icon: theme('colors.yellow.500');
}

.alert-error {
    --alert-bg: theme('colors.red.100');
    --alert-text: theme('colors.red.800');
    --alert-border: theme('colors.red.300');
    --alert-icon: theme('colors.red.500');
}

.alert-critical {
    --alert-bg: theme('colors.purple.100');
    --alert-text: theme('colors.purple.800');
    --alert-border: theme('colors.purple.300');
    --alert-icon: theme('colors.purple.500');
}

/* Dark mode */
.dark .alert-info {
    --alert-bg: theme('colors.blue.900');
    --alert-text: theme('colors.blue.200');
    --alert-border: theme('colors.blue.700');
    --alert-icon: theme('colors.blue.400');
}

.dark .alert-success {
    --alert-bg: theme('colors.green.900');
    --alert-text: theme('colors.green.200');
    --alert-border: theme('colors.green.700');
    --alert-icon: theme('colors.green.400');
}

.dark .alert-warning {
    --alert-bg: theme('colors.yellow.900');
    --alert-text: theme('colors.yellow.200');
    --alert-border: theme('colors.yellow.700');
    --alert-icon: theme('colors.yellow.400');
}

.dark .alert-error {
    --alert-bg: theme('colors.red.900');
    --alert-text: theme('colors.red.200');
    --alert-border: theme('colors.red.700');
    --alert-icon: theme('colors.red.400');
}

.dark .alert-critical {
    --alert-bg: theme('colors.purple.900');
    --alert-text: theme('colors.purple.200');
    --alert-border: theme('colors.purple.700');
    --alert-icon: theme('colors.purple.400');
}

/* Alert component */
.alert {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
    background-color: var(--alert-bg);
    color: var(--alert-text);
    border: 1px solid var(--alert-border);
}

.alert-icon {
    flex-shrink: 0;
    margin-right: 0.75rem;
    color: var(--alert-icon);
}

.alert-content {
    flex: 1;
}

.alert-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.alert-message {
    font-size: 0.875rem;
}

.alert-close {
    flex-shrink: 0;
    margin-left: 0.75rem;
    color: var(--alert-text);
    opacity: 0.7;
    cursor: pointer;
}

.alert-close:hover {
    opacity: 1;
}

/* Alert badge */
.alert-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    text-transform: uppercase;
}

.alert-badge-info {
    background-color: var(--alert-bg);
    color: var(--alert-text);
}

.alert-badge-success {
    background-color: var(--alert-bg);
    color: var(--alert-text);
}

.alert-badge-warning {
    background-color: var(--alert-bg);
    color: var(--alert-text);
}

.alert-badge-error {
    background-color: var(--alert-bg);
    color: var(--alert-text);
}

.alert-badge-critical {
    background-color: var(--alert-bg);
    color: var(--alert-text);
}

/* Notification badge */
.notification-badge {
    position: absolute;
    top: 0;
    right: 0;
    height: 0.75rem;
    width: 0.75rem;
    background-color: theme('colors.red.500');
    border-radius: 9999px;
    border: 2px solid theme('colors.white');
}

.dark .notification-badge {
    border-color: theme('colors.gray.800');
}

/* Animations */
@keyframes alert-fade-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-animate-in {
    animation: alert-fade-in 0.3s ease-out forwards;
}

@keyframes alert-fade-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(0.5rem);
    }
}

.alert-animate-out {
    animation: alert-fade-out 0.3s ease-in forwards;
}