.Toast {
    &-body {
        align-items: center;
        background-color: var(--midnight-8);
        border-left: 5px solid var(--green);
        border-radius: 2px;
        color: var(--white);
        display: flex;

        max-width: 330px;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 10px;
        padding-top: 10px;
    }

    &-message {
        font-size: 14px;
        margin-right: 15px;
    }

    .Close.Glyph {
        cursor: pointer;
        fill: var(--white);

        &:hover {
            fill: var(--gray-100);
        }
    }

    margin-top: 15px;
}

.ToastContainer {
    bottom: 40px;
    position: fixed;
    right: 24px;
    z-index: 1080;
}

.Toast-begin-animation {
    animation: toast-enter-screen .7s;
    transition: transform .6s ease-in-out;
}

.Toast-end-animation {
    animation: toast-exit-screen .7s;
    opacity: 0;
    transition: transform .6s ease-in;
}

@keyframes toast-enter-screen {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes toast-exit-screen {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}