/* Toast container */

.mw-toast-container{
    position:fixed;
    top:16px;
    left:50%;
    z-index:99999;

    display:flex;
    flex-direction:column;
    gap:10px;

    width:calc(100% - 48px);
    max-width:1200px;

    pointer-events:none;

    transform:translateX(-50%);
}



/* Toast */

.mw-toast{
    position:relative;

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

    width:100%;
    min-height:48px;

    padding:12px 48px 12px 16px;

    box-sizing:border-box;

    border:1px solid transparent;

    font-size:12px;
    line-height:1.4;

    opacity:0;
    pointer-events:auto;

    transform:translateY(-10px);

    transition:
            opacity .2s ease,
            transform .2s ease;
}

.mw-toast.is-visible{
    opacity:1;
    transform:translateY(0);
}


/* Icon */

.mw-toast-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;

    width:16px;
    height:16px;

    border-radius:50%;

    color:#fff;

    font-size:10px;
    font-weight:700;
    line-height:1;
}


/* Text */

.mw-toast-text{
    flex:1;
}


/* Close */

.mw-toast-close{
    position:absolute;
    top:50%;
    right:14px;

    width:28px;
    height:28px;

    padding:0;

    border:0;
    background:none;

    color:currentColor;

    font-size:22px;
    font-weight:300;
    line-height:1;

    cursor:pointer;

    transform:translateY(-50%);
}


/* Success */

.mw-toast-success{
    border-color:#cce8d2;
    background:#e4f3e7;
    color:#137a2a;
}

.mw-toast-success .mw-toast-icon{
    background:#138a32;
}

.mw-toast-success .mw-toast-icon::before{
    content:"✓";
}


/* Error */

.mw-toast-error{
    border-color:#f0caca;
    background:#fbeaea;
    color:#a12626;
}

.mw-toast-error .mw-toast-icon{
    background:#c43737;
}

.mw-toast-error .mw-toast-icon::before{
    content:"!";
}


/* Warning */

.mw-toast-warning{
    border-color:#ead9a5;
    background:#fff6d8;
    color:#846600;
}

.mw-toast-warning .mw-toast-icon{
    background:#b48b00;
}

.mw-toast-warning .mw-toast-icon::before{
    content:"!";
}


/* Info */

.mw-toast-info{
    border-color:#cbddec;
    background:#edf5fb;
    color:#295f87;
}

.mw-toast-info .mw-toast-icon{
    background:#3479aa;
}

.mw-toast-info .mw-toast-icon::before{
    content:"i";
}


/* Mobile */

@media(max-width:700px){
    .mw-toast-container{
        top:12px;
        width:calc(100% - 24px);
    }
}