@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");

.animated-cart-button {
    position: relative;
    width: 200px;
    height: 45px;
    background-color: #dc3545;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    transition: .3s ease-in-out;
    border: none;
    font-family: 'Poppins', sans-serif;
}

.animated-cart-button:hover {
    background-color: #c82333;
}

.animated-cart-button:active {
    transform: scale(.9);
}

.animated-cart-button .fa-shopping-cart {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: -10%;
    transform: translate(-50%, -50%);
    font-size: 20px;
}

.animated-cart-button .fa-box {
    position: absolute;
    z-index: 3;
    top: -20%;
    left: 52%;
    transform: translate(-50%, -50%);
    font-size: 12px;
}

.animated-cart-button span {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    transform: translate(-50%, -50%);
}

.animated-cart-button .add-to-cart-text {
    opacity: 1;
}

.animated-cart-button .added-text {
    opacity: 0;
}

.animated-cart-button.clicked .fa-shopping-cart {
    animation: cart 1.5s ease-in-out forwards;
}

.animated-cart-button.clicked .fa-box {
    animation: box 1.5s ease-in-out forwards;
}

.animated-cart-button.clicked .add-to-cart-text {
    animation: txt1 1.5s ease-in-out forwards;
}

.animated-cart-button.clicked .added-text {
    animation: txt2 1.5s ease-in-out forwards;
}

@keyframes cart {
    0% {
        left: -10%;
    }

    40%,
    60% {
        left: 50%;
    }

    100% {
        left: 110%;
    }
}

@keyframes box {

    0%,
    40% {
        top: -20%;
    }

    60% {
        top: 40%;
        left: 52%;
    }

    100% {
        top: 40%;
        left: 112%;
    }
}

@keyframes txt1 {
    0% {
        opacity: 1;
    }

    20%,
    100% {
        opacity: 0;
    }
}

@keyframes txt2 {

    0%,
    80% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}