.boof-alert{
    display:flex;
    align-items:flex-start;
    gap:14px;

    padding:16px 18px;
    border-radius:12px;

    margin-bottom:16px;

    background:#fff;
    border:1px solid #eee;

    box-shadow:0 4px 18px rgba(0,0,0,0.05);

    position:relative;

    animation:boofAlertFade .35s ease;
}

/* icon */

.boof-alert-icon{
    font-size:22px;
    margin-top:2px;
}

/* content */

.boof-alert-content{
    flex:1;
}

.boof-alert-title{
    font-weight:600;
    font-size:15px;
    margin-bottom:4px;
}

.boof-alert-text{
    font-size:14px;
    line-height:1.6;
    color:#555;
}

/* close button */

.boof-alert-close{
    border:none;
    background:transparent;
    color:#888;
    font-size:14px;
    cursor:pointer;
}

.boof-alert-close:hover{
    color:#000;
}

/* types */

.boof-alert-success{
    border-right:4px solid #22c55e;
}

.boof-alert-success .boof-alert-icon{
    color:#22c55e;
}

.boof-alert-warning{
    border-right:4px solid #f59e0b;
}

.boof-alert-warning .boof-alert-icon{
    color:#f59e0b;
}

.boof-alert-failed{
    border-right:4px solid #ef4444;
}

.boof-alert-failed .boof-alert-icon{
    color:#ef4444;
}

.boof-alert-info{
    border-right:4px solid #3b82f6;
}

.boof-alert-info .boof-alert-icon{
    color:#3b82f6;
}

/* animation */

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

/* responsive */

@media (max-width:768px){

    .boof-alert{
        padding:14px;
        gap:10px;
    }

    .boof-alert-title{
        font-size:14px;
    }

    .boof-alert-text{
        font-size:13px;
    }

}