/*!********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/blocks/tab-buttons-container/style.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************/

.tecology-tab-buttons-container {
    /* Default styles for tab buttons */
    --tecology-tabs-button-text-color: var(--wp--preset--color--contrast, #333);
    --tecology-tabs-button-bg-color: var(--wp--preset--color--base, #fff);
    --tecology-tabs-button-border-top: 1px solid var(--wp--preset--color--borderline, #ddd);
    --tecology-tabs-button-border-right: 1px solid var(--wp--preset--color--borderline, #ddd);
    --tecology-tabs-button-border-bottom: 1px solid var(--wp--preset--color--borderline, #ddd);
    --tecology-tabs-button-border-left: 1px solid var(--wp--preset--color--borderline, #ddd);
    --tecology-tabs-button-top-left-radius: 4px;
    --tecology-tabs-button-top-right-radius: 4px;
    --tecology-tabs-button-bottom-left-radius: 4px;
    --tecology-tabs-button-bottom-right-radius: 4px;

    /* Active tab styles */
    --tecology-active-tab-button-text-color: var(--wp--preset--color--contrast, #0073e6);
    --tecology-active-tab-button-bg-color: var(--wp--preset--color--base-2, #fff);
    --tecology-active-tab-button-border-top: 1px solid var(--wp--preset--color--base-2, #0073e6);
    --tecology-active-tab-button-border-right: 1px solid var(--wp--preset--color--base-2, #0073e6);
    --tecology-active-tab-button-border-bottom: 1px solid var(--wp--preset--color--base-2, #0073e6);
    --tecology-active-tab-button-border-left: 1px solid var(--wp--preset--color--base-2, #0073e6);

    /* Hover tab styles */
    --tecology-hover-tabs-button-text-color: var(--wp--preset--color--contrast, #0073e6);
    --tecology-hover-tabs-button-bg-color: var(--wp--preset--color--base-2, #f8f8f8);
}

/* Apply styles to tab buttons */
.tecology-tab-button {
    background-color: var(--tecology-tabs-button-bg-color);
    color: var(--tecology-tabs-button-text-color);
    border-radius: 
        var(--tecology-tabs-button-top-left-radius)
        var(--tecology-tabs-button-top-right-radius)
        var(--tecology-tabs-button-bottom-right-radius)
        var(--tecology-tabs-button-bottom-left-radius);
    border-top: var(--tecology-tabs-button-border-top);
    border-right: var(--tecology-tabs-button-border-right);
    border-bottom: var(--tecology-tabs-button-border-bottom);
    border-left: var(--tecology-tabs-button-border-left);
    transition: all 0.3s ease;
}

/* Active tab styles */
.tecology-tab-button.is-active {
    background-color: var(--tecology-active-tab-button-bg-color);
    color: var(--tecology-active-tab-button-text-color);
    border-top: var(--tecology-active-tab-button-border-top);
    border-right: var(--tecology-active-tab-button-border-right);
    border-bottom: var(--tecology-active-tab-button-border-bottom);
    border-left: var(--tecology-active-tab-button-border-left);
}

/* Hover styles */
.tecology-tab-button:hover:not(.is-active) {
    background-color: var(--tecology-hover-tabs-button-bg-color);
    color: var(--tecology-hover-tabs-button-text-color);
}