.toast-container {
    transition: 250ms cubic-bezier(0.0, 0.0, 0.2, 1);
    transition-property: opacity, transform;
    position: fixed;
    will-change: opacity, transform;
    width: 320px;
}

.toast-container--bottom-left {
    left: 16px;
    bottom: 0;
    padding-bottom: 16px;
}

.toast-container--bottom-right {
    right: 16px;
    bottom: 0;
    padding-bottom: 16px;
}

.toast-container--bottom-center {
    left: 50%;
    bottom: 0;
    padding-bottom: 16px;
    transform: translateX(-50%);
}

.toast-container--top-left {
    left: 16px;
    top: 0;
    padding-top: 16px;
}

.toast-container--top-right {
    right: 16px;
    top: 0;
    padding-top: 16px;
}

.toast-container--top-center {
    left: 50%;
    top: 0;
    padding-top: 16px;
    transform: translateX(-50%);
}

.toast-container--bottom-left.toast-container--entering,
.toast-container--bottom-right.toast-container--entering,
.toast-container--top-left.toast-container--exited,
.toast-container--top-right.toast-container--exited {
    transform: translateY(100%);
}

.toast-container--bottom-center.toast-container--entering,
.toast-container--top-center.toast-container--exited {
    transform: translate(-50%, 100%);
}

.toast-container--bottom-left.toast-container--exited,
.toast-container--bottom-right.toast-container--exited,
.toast-container--top-left.toast-container--entering,
.toast-container--top-right.toast-container--entering {
    transform: translateY(-100%);
}

.toast-container--bottom-center.toast-container--exited,
.toast-container--top-center.toast-container--entering {
    transform: translate(-50%, -100%);
}

.toast-container--exited {
    opacity: 0;
}

@media (max-width: 575px) {
    .toast-container {
        width: auto;
        left: 16px;
        right: 16px;
    }
}