@use 'constants' as consts;

#toast {
    visibility: hidden;
    width: 300px;
    margin-left: -125px;

    border: 0.1em solid consts.$color-3;
    border-radius: 0.5em;
    background-color: consts.$color-2;

    text-align: center;
    padding: consts.$margin;
    position: fixed;
    z-index: 1;
    left: 50%;
    top: 30px;
    box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.3);
}

// #toast.show {
//     visibility: visible;
//     animation:
//         fadein 0.5s,
//         fadeout 0.5s 9.5s;
// animation-iteration-count: 1;
// }

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}