/* ==========================================================
TOAST
========================================================== */

--gbp-success-color: #22c55e;
--gbp-danger-color: #ef4444;
--gbp-warning-color: #f59e0b;
--gbp-info-color: var(--gbp-primary-color);

--gbp-toast-bg: #ffffff;
--gbp-toast-text: #202124;
--gbp-toast-muted: #6b7280;

--gbp-toast-shadow:
    0 12px 35px rgba(0,0,0,.12);

--gbp-toast-radius:14px;

--gbp-toast-width:380px;

--gbp-toast-gap:14px;

--gbp-toast-zindex:999999;

/* ==========================================================
GBP TOAST
Version : 1.0
Author  : Ainosof Technology
==========================================================*/



/*==========================================================
CONTAINER
==========================================================*/

#gbp-toast-container{

    position:fixed;

    top:24px;
    right:24px;

    width:var(--gbp-toast-width);

    display:flex;
    flex-direction:column;

    gap:var(--gbp-toast-gap);

    z-index:var(--gbp-toast-zindex);

    pointer-events:none;

}



/*==========================================================
TOAST
==========================================================*/

.gbp-toast{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:18px;

    background:var(--gbp-toast-bg);

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

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

    pointer-events:auto;

    opacity:0;

    transform:
        translateY(15px)
        scale(.97);

    transition:

        opacity .30s ease,

        transform .30s ease;

}



/*==========================================================
SHOW
==========================================================*/

.gbp-toast.show{

    opacity:1;

    transform:

        translateY(0)

        scale(1);

}



/*==========================================================
HIDE
==========================================================*/

.gbp-toast.hide{

    opacity:0;

    transform:

        translateY(-10px)

        scale(.96);

}



/*==========================================================
ICON
==========================================================*/

.gbp-toast-icon{

    width:42px;

    height:42px;

    flex-shrink:0;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

}



.gbp-toast-icon svg{

    width:20px;

    height:20px;

}



/*==========================================================
CONTENT
==========================================================*/

.gbp-toast-content{

    flex:1;

}



.gbp-toast-title{

    margin:0 0 5px;

    color:var(--gbp-toast-text);

    font-size:16px;

    font-weight:700;

}



.gbp-toast-message{

    color:var(--gbp-toast-muted);

    font-size:14px;

    line-height:1.6;

}



/*==========================================================
CLOSE
==========================================================*/

.gbp-toast-close{

    border:none;

    outline:none;

    background:none;

    padding:0;

    margin:0;

    cursor:pointer;

    opacity:.60;

    transition:

        opacity .25s,

        transform .25s;

}



.gbp-toast-close:hover{

    opacity:1;

    transform:rotate(90deg);

}



.gbp-toast-close svg{

    width:16px;

    height:16px;

}



/*==========================================================
PROGRESS
==========================================================*/

.gbp-toast-progress{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:4px;

    transform-origin:left center;

}



/*==========================================================
SUCCESS
==========================================================*/

.gbp-toast-success{

    border-left:5px solid var(--gbp-success-color);

}



.gbp-toast-success .gbp-toast-icon{

    background:color-mix(
        in srgb,
        var(--gbp-success-color) 12%,
        transparent
    );

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

}



.gbp-toast-success .gbp-toast-progress{

    background:var(--gbp-success-color);

}



/*==========================================================
ERROR
==========================================================*/

.gbp-toast-error{

    border-left:5px solid var(--gbp-danger-color);

}



.gbp-toast-error .gbp-toast-icon{

    background:color-mix(
        in srgb,
        var(--gbp-danger-color) 12%,
        transparent
    );

    color:var(--gbp-danger-color);

}



.gbp-toast-error .gbp-toast-progress{

    background:var(--gbp-danger-color);

}



/*==========================================================
WARNING
==========================================================*/

.gbp-toast-warning{

    border-left:5px solid var(--gbp-warning-color);

}



.gbp-toast-warning .gbp-toast-icon{

    background:color-mix(
        in srgb,
        var(--gbp-warning-color) 12%,
        transparent
    );

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

}



.gbp-toast-warning .gbp-toast-progress{

    background:var(--gbp-warning-color);

}



/*==========================================================
INFO
==========================================================*/

.gbp-toast-info{

    border-left:5px solid var(--gbp-info-color);

}



.gbp-toast-info .gbp-toast-icon{

    background:color-mix(
        in srgb,
        var(--gbp-info-color) 12%,
        transparent
    );

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

}



.gbp-toast-info .gbp-toast-progress{

    background:var(--gbp-info-color);

}



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

@media(max-width:767px){

    #gbp-toast-container{

        left:15px;

        right:15px;

        top:15px;

        width:auto;

    }

}