.pxl-btn-video {
    position: relative;
    &.style1 {
        display: inline-flex;
        @include transition(all 200ms linear 0ms);
        background-size: 300% 100%;
        color: $primary_color;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 25px;
        line-height: 1;
        &:hover {
            color: $link_color;
        }
    }
    &.style2 {
       width: 67px;
        height: 67px;
        border-radius: 0;
        display: inline-flex;
        @include transition(all 200ms linear 0ms);
        background-color: #fff;
        justify-content: center;
        align-items: center;
        color: $link_color;
        font-size: 18px;
        z-index: 1;
        .pxl-icon-default {
            @include transition(all 0.3s);
            transform: scale(1);
            opacity: 1;
            transform-origin: center;
            line-height: 1;
        }
        .pxl-icon-hover {
            position: absolute;
            top: 0;
            left: 0;
            @include transition(all 0.3s);
            transform: scale(0);
            opacity: 0;
            transform-origin: center center;
            line-height: 1;
            bottom: 0;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        &:hover, &:focus {
            @include transition(all .4s ease-in-out);
            color: $primary_color;
            .pxl-icon-default {
                transform: scale(0);
                opacity: 0;
            }
            .pxl-icon-hover {
                transform: scale(1);
                opacity: 1;
            }
        }
    }
    &.style-icon {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        display: inline-flex;
        @include transition(all 200ms linear 0ms);
        background-color: $primary_color;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 15px;
        z-index: 1;
        &:before {
            content: "";
            position: absolute;
            z-index: 0;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            background-color: #{'rgba(var(--primary-color-rgb),0.63)'};
            border-radius: 50%;
            animation: pxl_pulse_border 1500ms ease-out infinite;
            -webkit-animation: pxl_pulse_border 1500ms ease-out infinite;
            z-index: -2;
            border-radius: inherit;
        }
        &:hover, &:focus {
            @include transition(all .4s ease-in-out);
        }
    }
}

.pxl-video-player1 {
    .pxl-overlay-color {
        z-index: 88;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .pxl-video--holder {
        + .btn-video-wrap {
            position: absolute;
            z-index: 99;
            text-align: center;
            &.p-center {
                top: 50%;
                left: 50%;
                @include transform(translate(-50%, -50%));
            }
        }
    }
    .style-img2 {
        img {
            background-color: #d9d9d9;
            mix-blend-mode: luminosity;
        }
        .pxl-video--imagebg {
            .bg-image {
                background-color: #d9d9d9;
                mix-blend-mode: luminosity;
            }
        }
    }
    .pxl-video--imagebg {
        position: relative;
        overflow: hidden;
        .bg-image {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: -60px;
        }
    }
}

body.rtl {
}