/*
==================================================
SPI UI Framework
Component : Alert
Version   : 1.0.0
Author    : StudioProjectID
==================================================
*/


/*==================================================
BASE
==================================================*/

.spi-alert{

    display:flex;

    align-items:flex-start;

    gap:16px;

    width:100%;

    padding:18px 20px;

    border-radius:var(--spi-radius-md);

    border:1px solid transparent;

    box-shadow:var(--spi-shadow-xs);

}


/*==================================================
ICON
==================================================*/

.spi-alert-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:22px;

    height:22px;

    flex-shrink:0;

}

.spi-alert-icon svg,
.spi-alert-icon i{

    width:20px;

    height:20px;

}


/*==================================================
CONTENT
==================================================*/

.spi-alert-content{

    flex:1;

}


/*==================================================
TITLE
==================================================*/

.spi-alert-title{

    margin-bottom:6px;

    font-size:15px;

    font-weight:700;

}


/*==================================================
TEXT
==================================================*/

.spi-alert-text{

    font-size:14px;

    line-height:1.7;

}


/*==================================================
CLOSE
==================================================*/

.spi-alert-close{

    display:flex;

    align-items:center;

    justify-content:center;

    width:34px;

    height:34px;

    border:none;

    border-radius:8px;

    background:transparent;

    cursor:pointer;

    transition:var(--spi-transition);

}

.spi-alert-close:hover{

    background:rgba(0,0,0,.05);

}


/*==================================================
SUCCESS
==================================================*/

.spi-alert-success{

    background:#ECFDF5;

    border-color:#BBF7D0;

    color:#166534;

}


/*==================================================
INFO
==================================================*/

.spi-alert-info{

    background:#EFF6FF;

    border-color:#BFDBFE;

    color:#1D4ED8;

}


/*==================================================
WARNING
==================================================*/

.spi-alert-warning{

    background:#FFFBEB;

    border-color:#FDE68A;

    color:#92400E;

}


/*==================================================
DANGER
==================================================*/

.spi-alert-danger{

    background:#FEF2F2;

    border-color:#FECACA;

    color:#991B1B;

}


/*==================================================
OUTLINE
==================================================*/

.spi-alert-outline{

    background:#FFFFFF;

}


/*==================================================
COMPACT
==================================================*/

.spi-alert-sm{

    padding:12px 16px;

    gap:12px;

}


/*==================================================
LARGE
==================================================*/

.spi-alert-lg{

    padding:24px 26px;

}


/*==================================================
FULL WIDTH
==================================================*/

.spi-alert-block{

    width:100%;

}


/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:768px){

    .spi-alert{

        gap:12px;

        padding:16px;

    }

}