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

/*--------------------------------------
 Container
--------------------------------------*/

.toast-container{

    position:fixed;

    top:var(--space-lg);

    right:var(--space-lg);

    display:flex;

    flex-direction:column;

    gap:var(--space-sm);

    z-index:1100;

    pointer-events:none;

}

/*--------------------------------------
 Toast
--------------------------------------*/

.toast{

    display:flex;

    align-items:center;

    gap:var(--space-sm);

    min-width:300px;

    max-width:420px;

    padding:var(--space-sm) var(--space-md);

    border:1px solid transparent;

    border-radius:var(--toast-radius);

    box-shadow:var(--toast-shadow);

    background:var(--surface);

    color:var(--text);

    pointer-events:auto;

    animation:toast-in .25s ease;

}

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

.toast-success{

    background:var(--success-bg);

    border-color:var(--success-border);

    color:var(--success-color);

}

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

.toast-error{

    background:var(--error-bg);

    border-color:var(--error-border);

    color:var(--error-color);

}

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

.toast-warning{

    background:var(--warning-bg);

    border-color:var(--warning-border);

    color:var(--warning-color);

}

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

.toast-info{

    background:var(--info-bg);

    border-color:var(--info-border);

    color:var(--info-color);

}

/*--------------------------------------
 Close
--------------------------------------*/

.toast-close{

    margin-left:auto;

    padding:0;

    border:none;

    background:none;

    color:inherit;

    font-size:1.2rem;

    line-height:1;

    cursor:pointer;

    opacity:.7;

    transition:var(--transition);

}

.toast-close:hover{

    opacity:1;

}

/*--------------------------------------
 Animation
--------------------------------------*/

@keyframes toast-in{

    from{

        opacity:0;

        transform:translateX(20px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*--------------------------------------
 Responsive
--------------------------------------*/

@media (max-width:768px){

    .toast-container{

        top:var(--space-sm);

        right:var(--space-sm);

        left:var(--space-sm);

    }

    .toast{

        min-width:auto;

        max-width:none;

        width:100%;

    }

}