Untitled

.product-item {

    &.add_to_cart_run,
    &.add_to_cart_done {

        pointer-events: none;

        .product-details-size {

            opacity: .5;
        }
    }


    &.add_to_cart_run .product_addtocart .tocart {

        background: linear-gradient(-45deg, #fc6faf, #fc6faf, #0029ff);
        background-size: 400% 400%;
        animation: addToCart 3s ease infinite;
    } 
    
    &.add_to_cart_done .product_addtocart .tocart {

        position: relative;
        transform-origin: center;
        animation: showSuccess 180ms ease-in-out;
        transform: scale(1);
        overflow: hidden;
        bottom: -6px;

        &::before,
        &::after {

            content: ' ';
            display: block;
            position: absolute;
            height: 3px;
            background-color: lighten(@color-main, 20%);
            border-radius: 10px;
        }
      
        &::before {

            width: 1.2rem;
            top: 2rem;
            left: .6rem;
            transform: rotate(45deg);
            animation: tipInPlace 300ms ease-in-out;
            animation-fill-mode: forwards;
            animation-delay: 180ms;
            visibility: hidden;
        }
      
        &::after {

            width: 2rem;
            transform: rotate(-45deg);
            top: 1.7rem;
            left: 1.25rem;
            animation: longInPlace 140ms ease-in-out;
            animation-fill-mode: forwards;
            visibility: hidden;
            animation-delay: 300ms + 140ms;
        }
    }
}

@keyframes addToCart {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes showSuccess {

    from {

        transform: scale(0);
    }

    to {

        transform: scale(1);
    }
}

@keyframes tipInPlace {

    from {

        width: 0;
        // top: 0;
        // left: -1.6rem;
    }

    to {

        width: 1.2rem;
        // top: 4.3rem;
        // left: 1.4rem;
        visibility: visible;
    }
}

@keyframes longInPlace {

    from {

        width: 0;
        top: 2rem;
        left: 1.25rem; 
    }

    to {

        width: 2rem;
        top: 1.7rem;
        left: 1.25rem;
        visibility: visible;
    }
}