.toastBody {
    position: fixed;
    top: 16px;
    padding: 8px 12px;

    display: none;

    width: 300px;

    border-radius: 4px;

    z-index: 9999;

    background-color: var(--neutral-900);
    color: white;
}

.errorToast {
    border-right: 8px solid red;

    display: block;

    animation-name: toastAnimation;
    animation-duration: 4s;
    animation-timing-function: ease-in-out;

    box-shadow: -10px -2px 36px -15px rgba(142, 128, 128, 0.82);
    -webkit-box-shadow: -10px -2px 36px -15px rgba(142, 128, 128, 0.82);
    -moz-box-shadow: -10px -2px 36px -15px rgba(142, 128, 128, 0.82);
}

.successToast {
    border-right: 8px solid #42ba96;

    display: block;

    animation-name: toastAnimation;
    animation-duration: 4s;
    animation-timing-function: ease-in-out;

    box-shadow: -10px -2px 36px -15px rgba(142, 128, 128, 0.82);
    -webkit-box-shadow: -10px -2px 36px -15px rgba(142, 128, 128, 0.82);
    -moz-box-shadow: -10px -2px 36px -15px rgba(142, 128, 128, 0.82);
}

@keyframes toastAnimation {
    0% {
        right: -300px;
    }
    33% {
        right: 20px;
    }
    66% {
        right: 20px;
    }
    100% {
        right: -300px;
    }
}