/* ==========================================================
   Notifications
========================================================== */

#js-notifications-container{
    position:fixed;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    z-index:999999;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;

    width:min(92%,460px);

    pointer-events:none;
}

/* ==========================================================
   Notification
========================================================== */

.js-notification{

    /* ===== Настраиваемые переменные ===== */

    --notify-bg:rgba(255,255,255,.10);
    --notify-border:#ffffff;
    --notify-text:#ffffff;

    --notify-icon:#ffffff;
    --notify-icon-bg:rgba(255,255,255,.12);

    position:relative;
    overflow:hidden;

    width:100%;
    box-sizing:border-box;

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

    padding:15px 20px;

    border-radius:18px;

    color:var(--notify-text);
    font:15px/1.45 "Segoe UI",Arial,sans-serif;

    background:var(--notify-bg);

    backdrop-filter:blur(18px) saturate(180%);
    -webkit-backdrop-filter:blur(18px) saturate(180%);

    border:1px solid rgba(255,255,255,.18);
    border-left:4px solid var(--notify-border);

    box-shadow:
        0 14px 40px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.25),
        inset 0 -1px 0 rgba(255,255,255,.05);

    opacity:0;
    transform:translateY(-35px) scale(.94);

    animation:notifyShow .45s cubic-bezier(.22,1,.36,1) forwards;

    pointer-events:auto;
    cursor:pointer;

    transition:
        transform .2s,
        box-shadow .2s;
}

.js-notification:hover{

    transform:translateY(0) scale(1.02);

    box-shadow:
        0 20px 45px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.30);
}

.js-notification.hide{
    animation:notifyHide .35s ease forwards;
}

/* ==========================================================
   Glass Effect
========================================================== */

.js-notification::before{

    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.22),
            rgba(255,255,255,.08) 45%,
            rgba(255,255,255,0) 75%
        );

    pointer-events:none;
}

/* ==========================================================
   Icon
========================================================== */

.js-notification-icon{

    width:34px;
    height:34px;
    min-width:34px;

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

    border-radius:50%;

    font-size:18px;
    font-weight:bold;

    color:var(--notify-icon);
    background:var(--notify-icon-bg);

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

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

/* ==========================================================
   Text
========================================================== */

.js-notification-text{

    flex:1;

    color:inherit;

    word-break:break-word;
}

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

.js-success{

    --notify-bg:rgba(74,222,128,.18);
    --notify-border:#22c55e;

    --notify-text:#111111;

    --notify-icon:#0b7d38;
    --notify-icon-bg:rgba(34,197,94,.18);

}

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

.js-error{

    --notify-bg:rgba(239,68,68,.18);
    --notify-border:#ef4444;

    --notify-text:#ffffff;

    --notify-icon:#ff4d4d;
    --notify-icon-bg:rgba(239,68,68,.18);

}

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

.js-warning{

    --notify-bg:rgba(250,204,21,.22);
    --notify-border:#facc15;

    --notify-text:#111111;

    --notify-icon:#8d6800;
    --notify-icon-bg:rgba(250,204,21,.18);

}

/* ==========================================================
   Animations
========================================================== */

@keyframes notifyShow{

    0%{
        opacity:0;
        transform:translateY(-40px) scale(.90);
    }

    60%{
        opacity:1;
        transform:translateY(6px) scale(1.02);
    }

    100%{
        opacity:1;
        transform:translateY(0) scale(1);
    }

}

@keyframes notifyHide{

    0%{
        opacity:1;
        transform:translateY(0) scale(1);
    }

    100%{
        opacity:0;
        transform:translateY(-20px) scale(.95);
    }

}