/* ==============================================
   WAI ADMIN - Alert Components
   ============================================== */

.alert {
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-lg);
    font-weight: var(--font-weight-medium);
    position: relative;
    font-family: var(--font-family-base);
    line-height: var(--line-height-normal);
    box-shadow: var(--shadow-sm);
}

/* Success Alert */
.alert-success {
    background: linear-gradient(45deg, rgba(40, 167, 69, 0.1), rgba(40, 167, 69, 0.05));
    color: var(--success-dark);
    border-left: 4px solid var(--success);
}

.alert-success i {
    color: var(--success);
    margin-right: var(--space-sm);
    font-size: 1.1rem;
}

/* Danger/Error Alert */
.alert-danger {
    background: linear-gradient(45deg, rgba(255, 89, 60, 0.1), rgba(255, 89, 60, 0.05));
    color: var(--accent-dark);
    border-left: 4px solid var(--accent);
}

.alert-danger i {
    color: var(--accent);
    margin-right: var(--space-sm);
    font-size: 1.1rem;
}

/* Warning Alert */
.alert-warning {
    background: linear-gradient(45deg, rgba(255, 193, 7, 0.1), rgba(255, 193, 7, 0.05));
    color: var(--warning-dark);
    border-left: 4px solid var(--warning);
}

.alert-warning i {
    color: var(--warning);
    margin-right: var(--space-sm);
    font-size: 1.1rem;
}

/* Info Alert */
.alert-info {
    background: linear-gradient(45deg, rgba(38, 128, 173, 0.1), rgba(38, 128, 173, 0.05));
    color: var(--primary-dark);
    border-left: 4px solid var(--primary);
}

.alert-info i {
    color: var(--primary);
    margin-right: var(--space-sm);
    font-size: 1.1rem;
}

/* Alert Dismissible */
.alert-dismissible {
    padding-right: 3rem;
}

.alert-dismissible .btn-close {
    position: absolute;
    top: 50%;
    right: var(--space-md);
    transform: translateY(-50%);
    padding: 0;
    background: none;
    border: none;
    font-size: 0.875rem;
    opacity: 0.7;
    transition: var(--transition-fast);
    cursor: pointer;
    width: 1rem;
    height: 1rem;
}

.alert-dismissible .btn-close:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

.alert-dismissible .btn-close:focus {
    opacity: 1;
    outline: 2px solid rgba(0, 0, 0, 0.1);
    outline-offset: 2px;
}

/* Alert with Icon */
.alert-with-icon {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}

.alert-with-icon .alert-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.alert-with-icon .alert-content {
    flex: 1;
}

/* Alert Sizes */
.alert-sm {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
}

.alert-lg {
    padding: var(--space-lg) var(--space-xl);
    font-size: var(--font-size-lg);
}

/* Alert Animation */
.alert-fade-in {
    animation: alertFadeIn 0.3s ease-out;
}

@keyframes alertFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Alert Auto Hide */
.alert-auto-hide {
    animation: alertAutoHide 5s ease-in-out forwards;
}

@keyframes alertAutoHide {

    0%,
    85% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-20px);
        max-height: 0;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }
}

/* Responsive */
@media (max-width: 576px) {
    .alert {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--font-size-sm);
        margin-bottom: var(--space-md);
    }

    .alert-dismissible {
        padding-right: 2.5rem;
    }

    .alert-dismissible .btn-close {
        right: var(--space-sm);
    }
}