/* ==========================================
   TOAST - EYESCODE
========================================== */

.toast{

    position:fixed;

    right:24px;
    bottom:24px;

    width:360px;
    max-width:calc(100% - 32px);

    display:flex;
    align-items:flex-start;
    gap:16px;

    padding:18px;

   background: rgba(16, 19, 24, .75);
backdrop-filter: blur(18px);


    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    box-shadow:
    0 20px 60px rgba(0,0,0,.45);


    z-index:9999;

    opacity: 0;
    visibility:hidden;

    transform:
    translateY(25px)
    scale(.96);

    transition:
    opacity .30s ease,
    transform .30s ease,
    visibility .30s;

    overflow:hidden;

}

.toast.show{

    opacity:1;

    visibility:visible;

    transform:
    translateY(0)
    scale(1);

}

.toast.hide{

    opacity:0;

    visibility:hidden;

    transform:
    translateY(20px)
    scale(.96);

}

/* ==========================================
   ÍCONE
========================================== */

.toast>i{

    width:46px;
    height:46px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:20px;

    flex-shrink:0;

    background:#2b2b2b;

    color:#fff;

}

/* ==========================================
   TEXTO
========================================== */

.toast-content{

    flex:1;

}

#toast-message{

    display:block;

    color:#fff;

    font-size:15px;

    font-weight:600;

    line-height:1.5;

}

/* ==========================================
   BARRA
========================================== */

.toast-progress{

    margin-top:14px;

    width:100%;

    height:4px;

    border-radius:999px;

    overflow:hidden;

    background:rgba(255,255,255,.08);

}

.toast-progress-bar{

    width:100%;
    height:100%;

    transform-origin:left;

    animation:toastProgress 3s linear forwards;

}

/* ==========================================
   SUCESSO
========================================== */

.toast.success>i{

    background:
    rgba(34,197,94,.18);

    color:#22c55e;

}

.toast.success .toast-progress-bar{

    background:#22c55e;

}

/* ==========================================
   ERRO
========================================== */

.toast.error>i{

    background:
    rgba(239,68,68,.18);

    color:#ef4444;

}

.toast.error .toast-progress-bar{

    background:#ef4444;

}

/* ==========================================
   AVISO
========================================== */

.toast.warning>i{

    background:
    rgba(245,158,11,.18);

    color:#f59e0b;

}

.toast.warning .toast-progress-bar{

    background:#f59e0b;

}

/* ==========================================
   ANIMAÇÕES
========================================== */

@keyframes toastProgress{

    from{

        transform:scaleX(1);

    }

    to{

        transform:scaleX(0);

    }

}

/* ==========================================
   MOBILE
========================================== */

@media(max-width:768px){

.toast{

    left:16px;

    right:16px;

    bottom:16px;

    width:auto;

}

}