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

.elx-toast-stack{

    position:fixed;

    top:var(--elx-space-lg);

    right:var(--elx-space-lg);

    display:flex;

    flex-direction:column;

    gap:12px;

    z-index:var(--elx-z-toast);

    pointer-events:none;

}

.elx-toast{

    display:flex;

    align-items:flex-start;

    gap:var(--elx-space-md);

    width:360px;

    min-height:72px;

    padding:16px 18px;

    background:var(--elx-surface);

    border:

        var(--elx-border-width)

        var(--elx-border-style)

        var(--elx-border);

    border-radius:var(--elx-radius-lg);

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

    pointer-events:auto;

    opacity:0;

    transform:

        translateY(-10px)

        scale(.98);

    transition:

        opacity .22s ease,

        transform .22s ease;

}

.elx-toast.is-visible{

    opacity:1;

    transform:

        translateY(0)

        scale(1);

}

.elx-toast.is-hiding{

    opacity:0;

    transform:

        translateY(-10px)

        scale(.98);

}

.elx-toast-icon{

    width:18px;

    min-width:18px;

    height:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    font-size:16px;

    margin-top:2px;

}

.elx-toast-content{

    display:flex;

    flex-direction:column;

    flex:1;

}

.elx-toast-title{

    margin:0;

    font-size:var(--elx-toast-title-size);

    font-weight:700;

    line-height:1.2;

    color:var(--elx-text);

}

.elx-toast-message{

    margin-top:4px;

    font-size:var(--elx-toast-message-size);

    line-height:1.45;

    color:var(--elx-text-muted);

}

.elx-toast[data-type="success"] .elx-toast-icon{

    color:var(--elx-toast-success);

}

.elx-toast[data-type="warning"] .elx-toast-icon{

    color:var(--elx-toast-warning);

}

.elx-toast[data-type="error"] .elx-toast-icon{

    color:var(--elx-toast-danger);

}

.elx-toast[data-type="info"] .elx-toast-icon{

    color:var(--elx-toast-info);

}

/* ==========================================================================
   Animation
   ========================================================================== */

.elx-toast{

    opacity:0;

    transform:

        translateY(-12px)

        scale(.98);

    transition:

        opacity var(--elx-transition),

        transform var(--elx-transition);

}

.elx-toast.is-visible{

    opacity:1;

    transform:

        translateY(0)

        scale(1);

}

.elx-toast.is-hiding{

    opacity:0;

    transform:

        translateY(-12px)

        scale(.98);

}