/**
 * Add .wm-pattern-styles-tabs to a group or container block to create a Tab UI from a Query Loop. 
 * Select the Query Loop block and add tag the block with the WM Pattern Libary attribute Tabs pattern.
 * Copy this file to your theme's assets/css/patterns directory to customize/extend the functionality. 
 * This file will automatically enqueue when .wm-pattern-styles-tabs is detected.
 *
 * JS file: assets/js/patterns/wm-pattern-styles-tabs.js
 *
 * @version 1.0.0
 * @since 2025-10-16
 */


/* Tab button styling */
.wm-pattern-styles-tabs .wmx-loop-toggle-btns {
    cursor: pointer;
    transition: all 0.3s ease;
}
.wmx-toggle-active-bg-color-1 .wmx-loop-toggle-btns.active {
    background-color: var(--ast-global-color-1) !important;
}
.wm-pattern-styles-tabs .wmx-loop-toggle-btns {
    cursor: pointer;
}

.wm-pattern-styles-tabs .wmx-loop-toggle-btns.active {
    /* Add your active button styles here */
    opacity: 1;
}

.wm-pattern-styles-tabs .wmx-loop-toggle-btns:not(.active) {
    opacity: 0.7;
    transition: all 0.3s ease;
}
.wmx-toggle-no-opacity .wmx-loop-toggle-btns:not(.active) {
    opacity: 1 !important;
}


/* Hide all tab content by default */
.wmx-loop-tab-targets .wp-block-post-template .wp-block-post {
    display: none !important;
}

/* Show only the active tab content */
.wmx-loop-tab-targets .wp-block-post-template .wp-block-post.active {
    display: block !important;
}

.wm-pattern-styles-tabs .horizontal-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px;
}