@use 'constants' as consts;

#toasts {
    position: fixed;
    z-index: 1;
    left: 50%;
    top: 15px;
    transform: translate(-50%, 0%);

    display: flex;
    flex-direction: column;

    .toast {
        // visibility: hidden;
        display: none;
        width: fit-content;
        align-self: center;

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

        text-align: center;
        padding: calc(2 * consts.$margin) calc(2 * consts.$margin);
        box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.3);

        margin: consts.$margin;

        .content {
            display: inline-block;
        }

        img {
            vertical-align: text-bottom;
        }
    }
}

// #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;
    }
}