@keyframes toast-show {
    0% {
        opacity: 0;
        transform: translateX(1.5rem);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toast-hide {
    0% {
      opacity: 1;
      transform: translateX(0);
    }
    100% {
      opacity: 0;
      transform: translateX(1.5rem);
    }
}

[id^="toast-success-"],
[id^="toast-danger-"],
[id^="toast-warning-"] {
    opacity: 0;
    /* display: flex; */
    transform: translateX(1.5rem);
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
    animation: toast-show 1s forwards, toast-hide 1s forwards 7s;
}