//Affect Style

$image-theme-path : "../images/";
/**
* Hover image product
*/
.wp-post-image{
    margin-left:0;
    @include transition(0.4s);
}
.hover-image{
    position: absolute;
    top:0;
    left:-100%;
    @include transition(0.4s);
//    width: 100%;
    height: auto;
}


.img-effect{
    &:hover{
        .wp-post-image{
            margin-left: 100%;
            @include transition(0.4s);
        }
        .hover-image{
            left:0%;
            @include transition(0.4s);
        }

    }
}

/**
* Hover image
*/
.wpb_single_image{
    overflow: hidden;
    display: block;
    a{
        display: block !important;
    }
    .vc_single_image-wrapper{
        display: block !important;
    }
    &:hover{
        cursor: pointer;
    }
}
.attachment-full{
    width: 100%;
    height: auto;
    display: block;
}
.product-block{
    &:hover{
        .quick-view{
            opacity: 0.8;
            @include transition(0.4s);
        }
    }
}
//border
div.affect-border{
    &:hover{
        &:before{
            top: 1px;
            left: 0;
        }
        &:after{
            top: -1px;
            right: 0;
        }
        div.affect-border-inner{
            &:before{
                top: 0;
                left: 0;
            }
            &:after{
                bottom: 0;
                left: 0;
            }
        }
    }
}
div.affect-border,
div.affect-border-inner{
    position: relative;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    display: block;
    &:before,&:after{
        @include transition(all 0.4s);
        content: " ";
        display: block;
        position: absolute;
        z-index: 99;
        background: $theme-color;
    }
}
div.affect-border{
    &:before,&:after{
        height: 100%;
        width: 2px;
    }
    &:before{
        top: -100%;
        left: 0;
    }
    &:after{
        top: 100%;
        right: 0;
    }
}
div.affect-border-inner{
    &:before,&:after{
        height: 2px;
        width: 100%;
    }
    &:before{
        top: 0;
        left: 100%;
    }
    &:after{
        bottom: 0;
        left: -100%;
    }
}
//plus
.affect-plus{
    position: relative;
    &::before{
        overflow: hidden;
        position: absolute;
        top: 0;
        content: "";
        z-index: 100;
        @include square(percentage(1));
        @include rtl-left(0);
        opacity:0;
        @include transition(all 0.4s ease 0s);
        @include transform(scale(0.4) rotateY(180deg));
        background: url('#{$image-theme-path}plus.png') no-repeat scroll center center / 60px 60px rgba($black,.6);
        pointer-events:none;
    }
    &:hover{
        &::before{
            visibility: visible;
            opacity:0.6;
            @include transform(scale(1) rotateY(0deg));
        }
    }
}
//zoom
.affect-zoom{
    position: relative;
    @include transition(0.4s);
    &:after{
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        top:0;
        content: "";
        pointer-events:none;
    }
    img{
        @include scale(1);
        @include transition(0.4s);
    }
    &:hover{

        img {
            @include scale(1.05);
            @include transition(0.4s);
        }
    }
}

.affect-zoom-animation{
    position: relative;
    @include transition(0.4s);
    &:after{
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        top:0;
        content: "";

    }
    &:hover{
        &:after{
            @include transition(0.4s);
            background: rgba(0, 0, 0, 0.3);
        }
        img {
            animation: 10s linear 0s alternate none 2 running animation_zoom;
        }
    }
}

@keyframes animation_zoom {
    0% {
        transform: scale(1) translateX(0px);
    }
    50% {
        transform: scale(1.2) translateX(-10px);
    }
    75% {
        transform: scale(1.3) translateX(-20px);
    }
    100% {
        transform: scale(1.4) translateX(-30px);
    }
}

//flast
.affect-fast{
    position: relative;

    &:after{
        position: absolute;
        left: -100%;
        width: 100%;
        height: 100%;
        top:0;
        content: "";
        background: url('#{$image-theme-path}mlass.png') no-repeat;
        @include transition(1.5s);
        pointer-events:none;
    }

    &:before {
        border: 6px solid rgba(255, 255, 255, 0.5);
        bottom: 0;
        box-sizing: border-box;
        content: "";
        left: 0;
        overflow: visible;
        position: absolute;
        right: 0;
        top: 0;
        pointer-events:none;
    }

    &:hover{
        &:after{
            @include transition(1.5s);
            left: 100%;
        }
    }

}