/*
===============================================================================
[Painel] | 05 COMPONENTS ALERTS - v1.2 - /src/static/css/05-components/alerts.css
===============================================================================
*/

/* =============================================================================
   ALERTS - PAINEL
   =============================================================================
   Mensagens de feedback
   ============================================================================= */

@keyframes alertIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert {
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left-width: 4px;
    border-left-style: solid;
    animation: alertIn 250ms ease forwards;
}

.alert-close {
    background: none;
    border: none;
    font-size: var(--font-size-xl);
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
    transition: opacity var(--transition-fast);
    flex-shrink: 0;
    margin-left: var(--spacing-3);
}

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

/* -------------------------------------------------------------------------
   VARIANTS
   ------------------------------------------------------------------------- */
.alert-success {
    background-color: var(--alert-success-bg, #dcfce7);
    color: var(--alert-success-text, #166534);
    border: 1px solid var(--alert-success-border, #86efac);
    border-left: 4px solid var(--color-success);
}

.alert-error {
    background-color: var(--alert-error-bg, #fee2e2);
    color: var(--alert-error-text, #991b1b);
    border: 1px solid var(--alert-error-border, #fca5a5);
    border-left: 4px solid var(--color-error);
}

.alert-warning {
    background-color: var(--alert-warning-bg, #fef3c7);
    color: var(--alert-warning-text, #92400e);
    border: 1px solid var(--alert-warning-border, #fcd34d);
    border-left: 4px solid var(--color-warning);
}

.alert-info {
    background-color: var(--alert-info-bg, #dbeafe);
    color: var(--alert-info-text, #1e40af);
    border: 1px solid var(--alert-info-border, #93c5fd);
    border-left: 4px solid var(--color-info);
}

/*
===============================================================================
[Painel] | 05 COMPONENTS ALERTS - v1.2 - /src/static/css/05-components/alerts.css
===============================================================================
*/