/*==================================================
    Toast
==================================================*/

.toast {

    position:fixed;

    left:50%;
    bottom:32px;

    transform:
            translateX(-50%)
            translateY(24px);

    display:flex;
    align-items:center;
    gap:14px;

    min-width:300px;
    max-width:460px;

    padding:16px 22px;

    border-radius:14px;

    color:white;

    font-size:15px;
    font-weight:500;

    box-shadow:
            0 10px 28px rgba(0,0,0,.18);

    opacity:0;

    pointer-events:none;

    transition:
            opacity .25s,
            transform .25s;

    z-index:9999;

}


.toast.show{

    opacity:1;

    transform:
            translateX(-50%)
            translateY(0);

}


/*----------------------------------------------
    Icon
----------------------------------------------*/

.toast-icon{

    width:22px;

    height:22px;

    flex:none;

    display:flex;

    align-items:center;

    justify-content:center;

}

.toast-icon svg{

    width:22px;

    height:22px;

    display:block;

    stroke:currentColor;

}

/*----------------------------------------------
    Message
----------------------------------------------*/

.toast-message{

    flex:1;

}


/*----------------------------------------------
    Success
----------------------------------------------*/

.toast-success{

    background:#1f7a6b;

}


/*----------------------------------------------
    Warning
----------------------------------------------*/

.toast-warning{

    background:#d6a133;

    color:#2f2412;

}


/*----------------------------------------------
    Error
----------------------------------------------*/

.toast-error{

    background:#c54b4b;

}


/*----------------------------------------------
    Info
----------------------------------------------*/

.toast-info{

    background:#3578e5;

}


/*----------------------------------------------
    Mobile
----------------------------------------------*/

@media (max-width:700px){

    .toast{

        left:16px;

        right:16px;

        bottom:16px;

        min-width:auto;

        max-width:none;

        transform:
                translateY(24px);

    }

    .toast.show{

        transform:
                translateY(0);

    }

}