/*
 * DIYCNC Thumbnail Slider
 */


/* --------------------------------------------------
   Thumbnail wrapper
-------------------------------------------------- */

.woocommerce
div.product
div.images
.diycnc-thumb-slider-wrap {

    position: relative;

    width: 100%;

    margin-top: 10px;

    padding-left: 36px;
    padding-right: 36px;

    box-sizing: border-box;
}


/* --------------------------------------------------
   Thumbnail row
-------------------------------------------------- */

.woocommerce
div.product
div.images
.diycnc-thumb-slider-wrap
.flex-control-thumbs {

    display: flex !important;

    flex-wrap: nowrap !important;

    overflow-x: auto !important;

    overflow-y: hidden !important;

    scroll-behavior: smooth;

    scrollbar-width: none;

    -ms-overflow-style: none;

    margin: 0 !important;

    padding: 0 !important;

    gap: 8px;

}


/* Chrome / Safari scrollbar */

.woocommerce
div.product
div.images
.diycnc-thumb-slider-wrap
.flex-control-thumbs::-webkit-scrollbar {

    display: none;

}


/* --------------------------------------------------
   Individual thumbnail
-------------------------------------------------- */

.woocommerce
div.product
div.images
.diycnc-thumb-slider-wrap
.flex-control-thumbs li {

    flex: 0 0 78px !important;

    width: 78px !important;

    margin: 0 !important;

    padding: 0 !important;

}


/* Thumbnail image */

.woocommerce
div.product
div.images
.diycnc-thumb-slider-wrap
.flex-control-thumbs li img {

    display: block;

    width: 100%;

    height: auto;

}


/* --------------------------------------------------
   Arrow buttons
-------------------------------------------------- */

.diycnc-thumb-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 20;

    width: 30px;

    height: 42px;

    padding: 0 !important;

    border: 1px solid #ddd !important;

    border-radius: 3px !important;

    background: #fff !important;

    color: #333 !important;

    box-shadow:
        0 1px 4px rgba(0,0,0,0.15);

    font-size: 22px;

    line-height: 40px;

    text-align: center;

    cursor: pointer;

}


/* Hover */

.diycnc-thumb-arrow:hover {

    background: #f5f5f5 !important;

}


/* Previous */

.diycnc-thumb-prev {

    left: 0;

}


/* Next */

.diycnc-thumb-next {

    right: 0;

}


/* Hidden arrows */

.diycnc-thumb-arrow[hidden] {

    display: none !important;

}


/* --------------------------------------------------
   Mobile
-------------------------------------------------- */

@media (max-width: 768px) {

    .woocommerce
    div.product
    div.images
    .diycnc-thumb-slider-wrap {

        padding-left: 32px;

        padding-right: 32px;

    }


    .woocommerce
    div.product
    div.images
    .diycnc-thumb-slider-wrap
    .flex-control-thumbs li {

        flex-basis: 64px !important;

        width: 64px !important;

    }


    .diycnc-thumb-arrow {

        width: 27px;

        height: 38px;

        line-height: 36px;

        font-size: 19px;

    }

}