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


/*==================================================
CONTAINER
==================================================*/

.spi-toast-container{

    position:fixed;

    top:24px;

    right:24px;

    display:flex;

    flex-direction:column;

    gap:14px;

    z-index:9999;

}


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

.spi-toast{

    display:flex;

    align-items:flex-start;

    gap:14px;

    width:360px;

    padding:18px;

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

    background:var(--spi-card);

    border:1px solid var(--spi-border);

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

    animation:spiToastShow .35s ease;

}


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

.spi-toast-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:24px;

    height:24px;

    flex-shrink:0;

}

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

    width:20px;

    height:20px;

}


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

.spi-toast-content{

    flex:1;

}


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

.spi-toast-title{

    font-size:15px;

    font-weight:700;

    margin-bottom:4px;

    color:var(--spi-text);

}


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

.spi-toast-text{

    font-size:14px;

    color:var(--spi-text-secondary);

    line-height:1.6;

}


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

.spi-toast-close{

    width:34px;

    height:34px;

    border:none;

    border-radius:8px;

    background:transparent;

    cursor:pointer;

    transition:var(--spi-transition);

}

.spi-toast-close:hover{

    background:#F1F5F9;

}


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

.spi-toast-success{

    border-left:4px solid var(--spi-success);

}


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

.spi-toast-warning{

    border-left:4px solid var(--spi-warning);

}


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

.spi-toast-danger{

    border-left:4px solid var(--spi-danger);

}


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

.spi-toast-info{

    border-left:4px solid var(--spi-info);

}


/*==================================================
ANIMATION
==================================================*/

@keyframes spiToastShow{

    from{

        opacity:0;

        transform:translateX(40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes spiToastHide{

    from{

        opacity:1;

    }

    to{

        opacity:0;

        transform:translateX(40px);

    }

}

.spi-toast.hide{

    animation:spiToastHide .3s forwards;

}


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

@media(max-width:768px){

    .spi-toast-container{

        left:16px;

        right:16px;

        top:16px;

    }

    .spi-toast{

        width:100%;

    }

}