.c-toast {
    &__list {
        position: fixed;
        top: 0;
        left: 0;
        z-index: $level--toast;
        width: 100%;
        padding: 0;
        margin: 0;
        list-style: none;

        &:empty {
            display: none;
        }

        &--notification {
            left: auto;
            right: 0;
            width: auto;
        }
    }

    &__item {
        animation: show-alert .4s;

        &--notification {
            width: 100%;
            max-width: 420px;
            padding: 10px;
            animation: show-notification .4s;
        }
    }
}

@keyframes show-alert {
    0% {
        opacity: 0;
        transform: translate(0, -100%);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@keyframes show-notification {
    0% {
        opacity: 0;
        transform: translate(100%, 0);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}