/* -------------------------------- NOTIFICHE -------------------------------- */

notification_container
{
    display: inline-block;
    position: fixed;
    transition: .25s all ease-in-out;
    z-index: 2000;
}

notification_container>notification
{
    --fg-color: white;
    --bg-color: grey;
    
    display: block;
    width: calc(100% - 1rem);
    color: var(--fg-color);
    background-color: var(--bg-color);
    padding: .5rem;
    border-radius: .25rem;
    margin: .5rem;
    cursor: pointer;   
    box-shadow: var(--shadow5);
}

notification_container>notification.SUCCESS {--bg-color: green;}
notification_container>notification.ERROR {--bg-color: red;}
notification_container>notification.WARNING {--bg-color: orange;}
notification_container>notification.INFO {--bg-color: blue;}
notification_container>notification.NEUTRAL{--bg-color: grey;}

notification_container[position=bottomright]{bottom: 0; right: 0;}
notification_container[position=topright]{top: 0; right: 0;}
notification_container[position=bottomleft]{bottom: 0; left: 0;}
notification_container[position=topleft]{top: 0; left: 0;}
notification_container[position=topcenter]{top: 0; right: 50%; transform: translateX(-50%);}
notification_container[position=bottomcenter]{bottom: 0; right: 50%; transform: translateX(-50%);}