/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
    visibility: hidden;
    min-width: 400px;
    max-width: 400px;
    margin-left: -200px; /* Divide value of min-width by 2 */
    /* background-color: rgb(95, 95, 95); */
    background-color: var(--colour-snackbar-background);
    color: white;
    text-align: center;
    border-radius: 4px;
    padding: 20px 10px;
    position: fixed; /* Sit on top of the screen */
    /* Snackbar sits just above overlays */
    z-index: 3;
    left: 50%; /* Center the snackbar */
    bottom: var(--snackbar-bottom-offset); /* Offset from the bottom */
    box-shadow: 0px 0px 40px var(--colour-shadow);
}

/* The snackbar becomes visible when this class is added to it */
#snackbar.show {
    visibility: visible;
}

/* Animations to fade the snackbar in and out */
@keyframes snackbar-fade-in {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: var(--snackbar-bottom-offset);
        opacity: 1;
    }
}

@-webkit-keyframes snackbar-fade-in {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: var(--snackbar-bottom-offset);
        opacity: 1;
    }
}

@keyframes snackbar-fade-out {
    from {
        bottom: var(--snackbar-bottom-offset);
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@-webkit-keyframes snackbar-fade-out {
    from {
        bottom: var(--snackbar-bottom-offset);
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}