@import "../../../../assets/sass/vars";
@import "../../../../assets/sass/mixins";


$gallery_padding: 2em;
$gallery_width: 270px;
$gallery_thumb_width: 80px;

/* Gallery */
.woocommerce-product-gallery  *{
    box-sizing: border-box;
}
.gallery-top-medium, .gallery-top-full {
    background: #f9f9f9;
    .woocommerce-breadcrumb {
        text-align: center;
    }
}

.entry-summary-inner {
    @include for_device( mobile ) {
        position: initial !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }
}
.wc-product-top-media-inner {
    display: block;
}
.gallery-top-medium {
    padding: 2.4em;
    @include for_device( mobile ) {
        padding: 1em;
    }
    .wc-product-top-media-inner {
        display: block;
        max-width: 100%;
        position: relative;
        overflow: hidden;
       // max-width: 1000px;
        margin: 0 auto;
        div.images img {
            width: 100%;
            max-width: 100%;
            height: 100%;
        }
    }
    .flex-active-slide {
        margin: 0px 1px;
        > a {
            display: block;
            text-align: center;
        }
    }

}

.gallery-top-full{
    .wc-product-top-media-inner {
        position: relative;
        max-width: 100%;
        margin: 0 auto;
    }
}

.is-header-transparent {
    &.woocommerce  {
        .gallery-top-full {
            span.onsale {
                top: auto;
                bottom: 1em;
            }
            div.images .woocommerce-product-gallery__trigger {
                top: auto;
                bottom: 0.5em;
            }
        }
    }
}

.entry-summary-box {
    &.group-highlight-box {
        margin-top: 0px;
        margin-bottom: 0em;
    }
}

// Right box margin
.entry-summary {
    .wc-tabs-sections {
        .tab-section-heading {
            font-size: 1.2em;
        }
    }
    .entry-summary-inner > div {
        &.entry-summary-after {
            margin-top: 2em;
        }
        &:last-child {
            margin-bottom: 0px;
        }
        > div { // Item inside each part
            &:last-child {
                margin-bottom: 0px;
            }
        }
    }
}

.product-hide-0 {
    height: 0px;
    overflow: hidden;
}
.media-only {
    .woocommerce-product-gallery__wrapper {
        margin: 0px;
        //padding: 2em;
       // background: #f2f2f2;
    }
}

div.product {

    &.default-gallery {

        div.images {
            .woocommerce-product-gallery__image {
                line-height: 0px;
            }
            .flex-control-thumbs {
                margin-top: $gallery_padding / 2;
                margin-bottom: 0;
                max-width: 80%;
                width: 80%;
                @include for_device( mobile ) {
                    max-width: 100%;
                }
                margin-left: auto;
                margin-right: auto;
                text-align: center;
                li {
                    display: inline-block;
                    float: none !important;
                    width: $gallery_thumb_width;
                    padding: 5px;
                }
                img {
                    display: inline-block;
                    height: auto;
                }
                img.flex-active {
                    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
                }

            }
        }

        .thumbs_in_gallery {
            div.images {
                .flex-control-thumbs {
                    position: absolute;
                    bottom: $gallery_padding;
                    left: 50%;
                    transform: translateX(- 50%);
                    li {
                        display: inline-block;
                        float: none !important;
                        width: $gallery_thumb_width;
                    }
                    img {
                        border: 1px solid #c6c7ce;
                        display: inline-block;
                        height: auto;
                    }
                    img.flex-active {
                        border-color: #fff;
                    }

                }
            }
        }

        &.thumbs_out_gallery {
            .flex-control-thumbs {
                display: block;
                text-align: center;
                margin-left: auto ;
                margin-right: auto ;
            }
        }

    }

    &.product-grid-media {
        div.images {
            span.onsale {
                top: 1.5em;
            }
            .woocommerce-product-gallery__wrapper {
                margin: -0.5em;
            }
        }
        .tophive-col {
            padding: 0.5em;
        }
        div.images .woocommerce-product-gallery__image:nth-child(n+2), div.images .woocommerce-product-gallery__image {
            width: 100%;
            height: auto;
            margin-bottom: 10px;
        }
    }

    &.wc-product-top-media {
        position: relative;
        &:after {
            clear: both; content: ""; display: block;
        }

        .slick-slide > div {
            line-height: 0px;
        }
        .wc-nav-thumbs {
            max-width: 80%;
            .slick-slide {
                opacity: 1;
            }
            .woocommerce-product-gallery__image img {
                //border: 2px solid rgba(214, 214, 214, 0.4);
            }
            .slick-current {
                .woocommerce-product-gallery__image img {
                    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
                }
            }
        }

        .wc-nav-thumbs {
            .slick-slide {
                width: $gallery_thumb_width;
                height: $gallery_thumb_width ;
                //overflow: hidden;
                display: block;
                img {
                    margin: 3px;
                    width: calc( 100% - 6px );
                    max-height: $gallery_thumb_width;
                }
            }
        }

        .wc-gallery-horizontal {
            .wc-nav-thumbs {
                .slick-slide {
                    > div {
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                    .woocommerce-product-gallery__image {
                        height: 100%; display: block;
                        img {
                            height: 100%;
                        }
                    }
                }
            }
        }

        &.gallery-top-full{
            padding: 0px;
        }

        .woocommerce-product-gallery__image {
            img {
                object-fit: cover;
                display: inline-block;
                overflow: hidden;
            }
        }

        .woocommerce-product-gallery {
            width: 100%;
            float: none;
            margin: 0px;
        }
    }
}
.wc-product-top-media-inner {
    position: relative;
    margin: 0 auto;
}

@include for_device( tablet_up ){
    .thumbs_in_gallery {
        .flex-control-thumbs {
            position: absolute;
            bottom: $gallery_padding;
            left: 50%;
            transform: translateX( - 50% );
        }
        .wc-gallery-vertical {
            span.onsale{
                left: 1em;
            }
            .woocommerce-product-gallery__wrapper {
                width: 100%;
                margin: 0 auto;
                float: none;
            }
            .wc-nav-thumbs {
                width: $gallery_thumb_width;
                max-height: 80%;
                height: auto;
                position: absolute;
                bottom: auto;
                float: none;
                transform: translateY( - 50% );
            }
        }

        &.gallery-tp-left {
            .wc-nav-thumbs {
                position: absolute;
                top: auto;
                left: $gallery_padding;
                right: auto;
                bottom: $gallery_padding;
            }
            .wc-gallery-vertical {
                .wc-nav-thumbs {
                    top: 50%;
                    left: $gallery_padding;
                    right: auto;
                    bottom: auto;
                }
            }
        }

        &.gallery-tp-right {
            .wc-nav-thumbs {
                position: absolute;
                top: auto;
                left: auto;
                right: $gallery_padding;
                bottom: $gallery_padding;
            }
            .wc-gallery-vertical {
                .wc-nav-thumbs {
                    top: 50%;
                    right: $gallery_padding;
                    left: auto;
                    bottom: auto;
                }
            }
        }

        &.gallery-tp-bottom {
            .wc-nav-thumbs {
                position: absolute;
                margin: 0;
                top: auto;
                bottom: $gallery_padding;
                left: 50%;
                right: auto;
                transform: translateX(- 50%);
            }
        }

        &.gallery-tp-bottom-left {
            .wc-nav-thumbs {
                margin: 0;
                position: absolute;
                top: auto;
                bottom: $gallery_padding;
                left: $gallery_padding;
            }
        }

        &.gallery-tp-bottom-right {
            .wc-nav-thumbs {
                margin: 0;
                position: absolute;
                top: auto;
                bottom: $gallery_padding;
                right: $gallery_padding;
            }
        }
    }

    .thumbs_out_gallery {
        .wc-nav-thumbs {
            margin-top: $gallery_padding / 2;
            margin-bottom: 0;
            margin-left: auto;
            margin-right: auto;
        }



        &.gallery-tp-bottom-right {
            .wc-nav-thumbs {
                margin-left: auto;
                margin-right: 0;
            }
        }
        &.gallery-tp-bottom-left {
            .wc-nav-thumbs {
                margin-left: 0;
                margin-right: auto;
            }
        }

    }
}

@include for_device( mobile ){
    div.product.wc-product-top-media .wc-nav-thumbs {
        max-width: 80%;
        position: relative;
        top: auto;
        left: auto;
        margin-top: $gallery_padding / 2;
        margin-left: auto;
        margin-right: auto;
        @include for_device( mobile ) {
            max-width: 90%;
        }
    }
    div.product.gallery-top-full .wc-nav-thumbs {
        padding-bottom: $gallery_padding / 2;
    }
}


/* Grid styling */
.wc-gallery-item {
    a {
        display: block;
        position: relative;
        img {
            opacity: 1;
            transition: opacity 0.3s linear;
        }
        &:before {

            position: absolute;
            top: .5em;
            right: .5em;
            font-size: 1em;
            z-index: 9;
            width: 36px;
            height: 36px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 100%;
            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
            color: #888888;
            opacity: 0;
            transition: opacity 0.3s linear;
            box-sizing: content-box;

            font-family: "WooCommerce";
            content: "\e035";
            display: flex;
            justify-content: center;
            align-items: center;
            line-height: 0;
        }

        &:hover {
            &:before {
                opacity: 1;
            }
            img {
                opacity: 0.6;
            }
        }
    }
}