@mixin image-card-mixin ($card-class, $col-sizes, $img-wrapper-class) {
    @each $size, $info in $col-sizes {
        .col-md-#{$size}, .d-owl-ppr-#{$size} {
            #{$card-class} {
                #{$img-wrapper-class} .d-product-img {
                    max-height: map-get($info, 'height');
                    @if (map-get($info, 'o-fit')) {
                        object-fit: map-get($info, 'o-fit');
                    }
                }
            }
        }
    }
}

@mixin dr-card-style-1-btn-mixin () {
    .d_action_btn {
        border-radius: 0px;
        .d_action_btn_lable {
            @include o-position-absolute($bottom: 0, $left: 0);
            transform: translateY(5px);
            white-space: nowrap;
            transition: all .3s;
            opacity: 0;
        }
        .d_action_btn_icon {
            transition: all .3s;
            margin-top: 5px;
            font-size: 18px;
        }
        &:not(.disabled):hover {
            .d_action_btn_lable, .d_action_btn_icon {
                transform: translateY(-10px);
                opacity: 1;
            }
        }
    }
}
div[class*=' s_card_style_'] {
    overflow: initial !important;
}

// ======  Style 1 =========

.s_card_style_1 {
    transition: all .3s;
    &:hover {
        transition: all 0.3s ease 0s;
        box-shadow: 0 7px 7px rgba(0, 0, 0, .10);
    }
    .d_products_cover {
        flex-grow: 1;
        .d_rating_top_right {
            @include o-position-absolute($top: 10px, $right: 10px);
        }
    }
    .card-body {
        flex-grow: 0;
    }
    @include dr-card-style-1-btn-mixin();
}

$col-sizes: (
    3: ("height": 375px, 'o-fit': false),
    4: ("height": 450px, 'o-fit': cover),
    6: ("height": 500px, 'o-fit': contain),
);
@include image-card-mixin('.s_card_style_1', $col-sizes, '.d_products_cover');

// ======  Style 2 =========

.s_card_style_2 {
    box-shadow: 0 7px 10px rgba(0, 0, 0, .12);
    transition: all .2s linear;
    &:hover {
        .d_card_overlay , .d_action_btn {
            opacity: 1 !important;
        }
        .d_action_btn {
            transform: translateY(0);
        }
    }
    .card-body {
        flex-grow: 0;
    }
    .d_product_box {
        flex-grow: 1;
        .d_card_overlay {
            @include o-position-absolute($top: 0px, $left: 0px);
            opacity: 0;
            background: rgba(9,9,9,.6);
            transition: all 300ms ease-out 0s;
        }
        .d_actions {
            @include o-position-absolute($top:45%, $right: 0px, $left: 0px);
            margin: 0 auto;
            .d_action_btn {
                background-color: white;
                line-height: 40px;
                height: 40px;
                width: 40px;
                padding: 0px;
                transition: ease .3s all;
                margin-left: 3px;
                opacity: 0;
                transform: translateY(-15px);
                &:not(.disabled):hover {
                    background-color: o-color('primary');
                    color: white;
                }
            }
        }
    }
    .o_website_rating_static {
        font-size: 12px;
    }
}

$col-sizes: (
    3: ("height": 360px, 'o-fit': false),
    4: ("height": 425px, 'o-fit': cover),
    6: ("height": 450px, 'o-fit': contain),
);
@include image-card-mixin('.s_card_style_2', $col-sizes, '.d_product_box');

// ======  Style 3 =========
.container-fluid.s_d_products_grids {
    .s_card_style_3 {
        // this style is used by some other snippet
        &.tp-has-count-down {
            .d_img_block > .d-product-img {
                max-height: 830px !important;
            }
        }
    }
}
.s_card_style_3 {
    transition: all .3s;
    // this style is used by some other snippet
    &.tp-has-count-down {
        .d_img_block > a > .d-product-img {
            object-fit: cover;
            max-height: 425px;
            &.tp-has-timer-img {
                height: 100%;
                max-height: 630px;
            }
        }
    }
    .d_product_box {
        flex-flow: column;
        .d_actions {
            @include o-position-absolute($top: 5px, $right: 15px);
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-transition: all .3s ease;
            transition: all .3s ease;
            opacity: 0;
            -webkit-transform: translateX(20px) translateZ(0);
            transform: translateX(20px) translateZ(0);
            .d_action_btn {
                margin-top: 5px;
                padding: 0;
                font-size: 18px;
                line-height: 18px;
                height: 45px;
                width: 45px;
            }
        }
        .d_img_block {
            flex-grow: 1;
            flex-flow: column;
        }
        .d_product_info {
            flex-grow: 0;
            .d-product-name {
                font-size: 1rem;
                font-weight: 400;
            }
            .d-product-price {
                margin: 0 0 10px;
                font-size: 18px;
                font-weight: 500;
            }
        }
    }
    &:hover {
        transition: all 0.3s ease 0s;
        transform: translate3d(0, -3px, 0);
        box-shadow: 0 7px 7px rgba(0, 0, 0, .10);
        .d_actions {
            z-index: 1;
            opacity: 1;
            -webkit-transform: translateY(0) translateZ(0);
            transform: translateY(0) translateZ(0);
        }
    }
}
$col-sizes: (
    3: ("height": 360px, 'o-fit': false),
    4: ("height": 425px, 'o-fit': cover),
    6: ("height": 450px, 'o-fit': contain),
);
@include image-card-mixin('.s_card_style_3:not(.tp-has-count-down)', $col-sizes, '.d_img_block');


// ======  Style 4 =========

.s_card_style_4 {
    .d-product-img {
        max-height: 365px;
    }
    .d_product_description {
        clear: both;
        height: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        display: -webkit-box;
    }
}

// ======  Style 5 =========
@mixin dr-card-style-5-local-mixin() {
    .d_product_box {
        box-shadow: none;
    }
    transition: all 0.3s ease 0s;
    box-shadow: 0 7px 7px rgba(0, 0, 0, .10);
    .dr_quick_view_block {
        @include o-position-absolute($top: 100%, $left: 0);
        opacity: 1 !important;
        display: block !important;
        background-color: white;
        width: 100%;
        z-index: 1;
        margin-top: -3px;
    }
    .d_image_container {
        opacity: 1 !important;
        -webkit-transform: translateY(0) translateZ(0) !important;
        transform: translateY(0) translateZ(0) !important;
    }
}
.s_card_style_5 {
    background-color: transparent;
    .d_product_box {
        background-color: white;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        flex-flow: column;
        margin-bottom: 2.4rem;
        .d_product_name {
            font-size: 1rem;
        }
        .d_product_info {
            flex-grow: 0;
        }
        .d_img_block {
            flex-grow: 1;
            flex-flow: column;
        }
        .d_rating_block {
            margin: 15px 0px 10px;
            .o_website_rating_static {
                position: relative;
                height: 20px;
                .fa {
                    position: relative;
                    width: 14px;
                    background: white;
                    z-index: 1;
                }
                .fa:first-child {
                    width: 30px;
                    text-align: right;
                }
                .fa:last-child {
                    width: 30px;
                    text-align: left;
                }
                &:after {
                    content: "";
                    @include o-position-absolute($top:54%, $left: 0, $right: 0);
                    transform: translateY(-50%);
                    height: 1px;
                    background-color: gray('400');
                }
            }
        }
        .dr_quick_view_block {
            transition: all .3s ease;
            opacity: 0;
            display: none;
        }
        .d_image_container {
            @include o-position-absolute($top: 5px, $right: 15px);
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-transition: all .3s ease;
            transition: all .3s ease;
            opacity: 0;
            -webkit-transform: translateX(20px) translateZ(0);
            transform: translateX(20px) translateZ(0);
            .d_product_thumb_img {
                &.d_active {
                    opacity: 1;
                    border-color: o-color('primary');
                }
                border-radius: 3px;
                border: 1px solid gray('500');
                opacity: 0.6;
                cursor: pointer;
                margin-top: 5px;
                height: 55px;
                width: 55px;
                object-fit: cover;
                padding: 0;
            }
        }
    }
    @include media-breakpoint-down(md) {
        @include dr-card-style-5-local-mixin()
    }
    &:hover {
        @include dr-card-style-5-local-mixin()
    }
}

$col-sizes: (
    3: ("height": 360px, 'o-fit': false),
    4: ("height": 425px, 'o-fit': cover),
    6: ("height": 450px, 'o-fit': contain),
);
@include image-card-mixin('.s_card_style_5', $col-sizes, '.d_img_block');


// ======  Style 6 =========

.s_card_style_6 {
    transition: all .3s;
    .card-body {
        flex-grow: 0;
    }
    .d_product_box {
        flex-grow: 1;
        flex-flow: column;
        .d_actions {
            @include o-position-absolute($top: 5px, $right: 15px);
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-transition: all .3s ease;
            transition: all .3s ease;
            opacity: 0;
            -webkit-transform: translateX(20px) translateZ(0);
            transform: translateX(20px) translateZ(0);
            .d_action_btn {
                margin-top: 5px;
                font-size: 18px;
                line-height: 18px;
                height: 45px;
                width: 45px;
                padding: 0;
            }
        }
    }
    .d_add_to_cart_btn {
        @include o-position-absolute($top: -30px, $right: 10px);
        border-radius: 100%;
        padding: 0;
        font-size: 20px;
        line-height: 20px;
        height: 50px;
        width: 50px;
        transition: all .3s;
        &:hover {
            box-shadow: $box-shadow-sm;
            transform: translateY(-3px) translateZ(0);
        }
    }
    &:hover {
        .d_actions {
            opacity: 1;
            -webkit-transform: translateY(0) translateZ(0);
            transform: translateY(0) translateZ(0);
        }
    }
}

$col-sizes: (
    3: ("height": 360px, 'o-fit': false),
    4: ("height": 425px, 'o-fit': cover),
    6: ("height": 450px, 'o-fit': contain),
);
@include image-card-mixin('.s_card_style_6', $col-sizes, '.d_img_block');

// ======  Style 7 =========

.s_card_style_7 {
    transition: all .3s;
    &:hover {
        transition: all 0.3s ease 0s;
        box-shadow: 0 7px 7px rgba(0, 0, 0, .10);
    }
    .d_products_cover {
        flex-grow: 1;
        .d_rating_top_right {
            @include o-position-absolute($top: 10px, $right: 10px);
        }
    }
    .card-body {
        flex-grow: 0;
    }
    @include dr-card-style-1-btn-mixin();
    .d_action_btn {
        &.d_add_to_cart_btn {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-grow: 2;
            .dri-cart {
                font-size: 18px;
                margin-right: 4px;
            }
        }
    }
}

$col-sizes: (
    3: ("height": 375px, 'o-fit': false),
    4: ("height": 450px, 'o-fit': cover),
    6: ("height": 500px, 'o-fit': contain),
);
@include image-card-mixin('.s_card_style_1', $col-sizes, '.d_products_cover');