:root {
    --notif-duration: 300ms;
    --notif-padding: 12px 16px;
    --notif-radius: 8px;

    --notif-success: #0d542b;
    --notif-error: #9f0712;
    --notif-warning: #c9a64a;
    --notif-info: #1c398e;

    --notif-text-color: #fff;

    --notif-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}


/* 
============================
Container
============================
*/

#notif-container {
    position: fixed;
    z-index: 99999;
    inset: auto auto 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

#notif-container.top-left { inset: 20px auto auto 20px; }
#notif-container.top-right { inset: 20px 20px auto auto; }
#notif-container.bottom-right { inset: auto 20px 20px auto; }
#notif-container.bottom-left { inset: auto auto 20px 20px; }
#notif-container.center { inset: 50% auto auto 50%; transform: translate(-50%, -50%); }

/* 
============================
Notif Element
============================
*/

.notif {
    min-width: 320px;
    max-width: 445px;
    padding: var(--notif-padding);
    border-radius: var(--notif-radius);
    background-color: #0a0a0a;
    color: var(--notif-text-color);
    box-shadow: var(--notif-shadow);
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity var(--notif-duration), transform var(--notif-duration);
    pointer-events: auto;
}

.notif.show {
    opacity: 1;
    transform: translateY(0);
}


.notif.success { border: 1px solid var(--notif-success); }
.notif.error { border: 1px solid var(--notif-error); }
.notif.warning { border: 1px solid var(--notif-warning); }
.notif.info { border: 1px solid var(--notif-info); }

.notif__icon {
    font-size: .5rem !important;
}