.notification--popup {
    padding: 3rem 4rem;
    max-width: 40rem;
    min-width: 25rem;
    box-sizing: border-box;
    z-index: var(--layer-sky);
}

    .notification--popup.fixed {
        position: fixed;
        z-index: 100000;
        background: hsl(var(--text-black));
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;   
        left: 0;
        bottom: 0;
        right: 0;
        margin: var(--space-8);
    }

    @media (min-width: 600px) {

    .notification--popup.fixed {
            left: 2rem;
            bottom: 2rem;
            right: unset;
            margin: unset
    }
        }

    .notification--popup.hidden {
        display: none;
    }

    .notification--popup .notification--items .notification--content {
            display: block;
    
        }

    .notification--popup .notification--items .notification--content h2 {
                    color: hsl(var(--text-white-dm, var(--text-white)));
                    font-family: var(--clocktower-sans-serif);
                    font-size: var(--step-1);
                }

    .notification--popup .notification--items .notification--content p {
                    font-family: var(--clocktower-sans-serif);
                    color: hsl(var(--text-white-dm, var(--text-white)));
                    font-size: var(--step-1);
                }

    .notification--popup .notification--items .notification--content p.status {
                        font-size: var(--step--2);
                    }

    .notification--popup .notification--items .notification--content a {
                    color: hsl(var(--text-white-dm, var(--text-white)));
                }

    .notification--popup .notification--actions {
        display: block;
    }

    .notification--popup .notification--actions button {
            cursor: pointer;
            border: none;
        }