@keyframes showToast {
    0% {
        transform: translateX(50px);
        opacity: 0;
        filter: saturate(1);
    }

    50% {
        filter: saturate(2);
    }

    100% {
        transform: translateX(0px);
        opacity: 1;
        filter: saturate(1);
    }
}

.toast-notification {
    display: flex;
    padding: 12px;
    padding-bottom: 14px;
    border-radius: 6px;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    opacity: 0;
    transform: translateX(50px);
    animation: showToast 500ms cubic-bezier(0.23, 1, 0.320, 1) forwards;
    overflow: hidden;
    font-family: Montserrat;
    color:var(--cloudy-white);
}

.progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 0%;
    transition: width 20s linear;
}

.toast-notification.filling .progress-bar {
    width: 100%;
}

.toast-notification .toast-content {
    display: flex;
    gap: 8px;
    align-items: center;
}

.toast-notification.toast-success {
    background-color: #16a34a;
}

.toast-notification.toast-success .progress-bar {
    background-color: #127737;
}

.toast-notification.toast-info {
    background-color: #3498db;
}

.toast-notification.toast-info .progress-bar {
    background-color: #2670a1;
}

.toast-notification.toast-red {
    background-color: #df3f3c;
}

.toast-notification.toast-red .progress-bar {
    background-color: #9b2a28;
}

.toast-notification .close-toast-btn {
    cursor: var(--custom-pointer);
    transition: transform 150ms ease-in-out;
}

.toast-notification .close-toast-btn:hover {
    transform: scale(.9);
}