.glozin-product-tabs__items {
    &.loading {
        .glozin-product-tabs__loading {
            display: block;
        }
    }

    &:not(.loading) {
        .glozin-product-tabs__item {
            transition: .3s;

            &.active {
                opacity: 1;
                animation: fadeIn .2s ease-in;
            }
        }
    }

    .gz-loading-spin {
        --gz-loading-color: var(--gz-color-base);
    }
}

.glozin-product-tabs__heading {
    .gz-button-default {
        --gz-button-padding-top: 14px;
        --gz-button-padding-bottom: 14px;
        letter-spacing: normal;

        &:not(.active) {
            --gz-button-color: var(--gz-color-dark);
            --gz-button-bg-color: var(--gz-color-light-grey);
            --gz-button-border-color: var(--gz-color-light-grey);
            --gz-button-color-hover: var(--gz-color-light);
            --gz-button-bg-color-hover: var(--gz-color-dark);
            --gz-button-border-color-hover: var(--gz-color-dark);
        }

        &.active {
            --gz-button-color: var(--gz-color-light);
            --gz-button-bg-color: var(--gz-color-dark);
            --gz-button-border-color: var(--gz-color-dark);
            --gz-button-color-hover: var(--gz-color-light);
            --gz-button-bg-color-hover: var(--gz-color-dark);
            --gz-button-border-color-hover: var(--gz-color-dark);
        }
    }
}

.glozin-product-tabs__heading-button {
    &.gz-button-subtle {
        --transform-origin-start: left;
        --transform-origin-end: right;

        border-bottom: var(--gz-button-border-width, 1px) solid var(--gz-button-border-color);

        &:after {
            background: linear-gradient(to var(--transform-origin-end), var(--gz-button-border-color-hover) 0%, var(--gz-button-border-color-hover) 100%)
            var(--transform-origin-start) 100% / 0% var(--gz-button-border-width, 1px) no-repeat;
            transition: background-size 0.4s ease;
            animation: none;
            bottom: calc( var(--gz-button-border-width, 1px) * -1 );
        }

        &:hover,
        &.active {
            &:after {
                background-size: 100% var(--gz-button-border-width);
            }
        }
    }
}

.rtl .glozin-product-tabs__heading-button {
    &.gz-button-subtle {
        --transform-origin-start: right;
        --transform-origin-end: left;
    }
}

.glozin-product-tabs__item {
    &.waiting {
        opacity: 0;
        animation: fadeOut .3s ease-out;
    }

    &.no-active {
        opacity: 0;
        display: none;
    }

    .woocommerce-pagination {
        margin-top: 28px;
    }

    .woocommerce-pagination-button {
        --gz-button-padding-inline-start: 30px;
        --gz-button-padding-inline-end: 30px;
    }
}

.glozin-product-tabs__loading {
    display: none;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9;
    background-color: rgba( 255, 255, 255, 0.9 );

    &::before {
        top: 50%;
        bottom: auto;
    }
}

.glozin-show-border-yes {
    ul.products {
        margin: 0;
        border-inline-start: 1px solid var(--gz-border-color);

        li.product {
            border-top: 1px solid var(--gz-border-color);
            border-bottom: 1px solid var(--gz-border-color);
            border-inline-end: 1px solid var(--gz-border-color);
            margin-top: -1px;
            margin-bottom: 0;
            padding: 40px 30px;
        }
    }
}

// Carousel
.glozin-product-tabs-carousel__items {
    .swiper {
        &:not(.swiper-initialized) {
            overflow: hidden;

            ul.products {
                flex-wrap: nowrap;
            }

            li.product {
                flex-shrink: 0;
            }
        }
    }

    &:not(.has-rows-carousel) {
        &.swiper {
            ul.products {
                margin: 0;

                li.product {
                    padding: 0;
                }
            }
        }
    }
}

@media (max-width: 1024px) {
    .glozin-show-border-yes {
        ul.products {
            li.product {
                padding: 20px 10px;
            }
        }
    }
}

@media (max-width: 767px) {
    // Product tabs grid
    .glozin-product-tabs__heading {
        &:not(.has-heading) {
            justify-content: flex-start;
            overflow: hidden;
            overflow-x: auto;

            scroll-behavior: smooth;
            scrollbar-width: auto;
            scrollbar-color: #c8c8c8;

            &::-webkit-scrollbar {
                height: 4px;
                border-radius: 30px;
            }

            &::-webkit-scrollbar-track {
                background: #fff;
            }

            &::-webkit-scrollbar-thumb {
                background-color: #c8c8c8;
                border-radius: 30px;
            }

            &::-webkit-scrollbar-thumb:hover {
                background-color: var(--gz-color-grey);
            }

            .glozin-product-tabs__heading-button {
                white-space: nowrap;
            }
        }
    }

    .glozin-product-tabs-carousel__heading-tabs {
        .glozin-product-tabs-carousel__heading {
            align-self: flex-start;
            width: 100%;
        }
    }
}