@layer dasy.components {

    /* wrapper (also allow helper class .dasy-tabs added via save filter for specificity) */
    .wp-block-group.is-style-dasy-tabs,
    .wp-block-group.dasy-tabs {
        --active-color: var(--dasy-blue);
    }

    /* tab list (uses a Buttons block inside) */
    .dasy-tabs .dasy-tabs__tablist,
    .is-style-dasy-tabs .dasy-tabs__tablist {
        position: relative;
        padding-bottom: 6px;
        border-bottom: 1px solid var(--dasy-color-border);
    }

    .dasy-tabs .dasy-tabs__buttons,
    .is-style-dasy-tabs .dasy-tabs__buttons {
        display: flex;
        gap: 0;
        align-items: center;
        flex-wrap: wrap;
    }

    /* Outer wrapper of tab buttons (contains icon and text) */
    .dasy-tabs__tablist .dasy-tabs__buttons .wp-block-button.dasy-tab,
    .dasy-tabs__tablist .dasy-tabs__buttons [role="tab"] {
        background: transparent;
        background-color: transparent;
        color: var(--dasy-ink);
        box-shadow: none;
        border: 0;
        text-decoration: none;
        font-weight: 500;
        letter-spacing: .01em;
        display: inline-flex !important;
        align-items: center;
        gap: .5rem;
        border-width: 0;
        font-family: var(--wp--preset--font-family--open-sans);
        font-size: var(--wp--preset--font-size--medium);
        line-height: inherit;
        padding-top: var(--dasy-pad-y);
        padding-right: var(--dasy-pad-x);
        padding-bottom: calc(var(--dasy-pad-y) - 3px);
        padding-left: calc(var(--dasy-pad-x) / 4);
        text-decoration: none;
        border-radius: var(--dasy-radius-md);
        flex: 1;
    }

    .dasy-tabs__tablist .dasy-tabs__buttons .wp-block-button.dasy-tab:focus-within,
    .dasy-tabs__tablist .dasy-tabs__buttons [role="tab"]:focus-within {
        outline-color: var(--dasy-focus);
        outline-width: 3px;
        outline-style: solid;
        outline-offset: -3px;
    }

    /* Inner content of tab buttons (next to the icon) */
    .dasy-tabs__tablist .dasy-tabs__buttons .wp-block-button__link,
    .dasy-tabs__tablist .dasy-tabs__buttons [role="textbox"] {
        background: transparent;
        background-color: transparent !important;
        color: var(--dasy-ink) !important;
        padding: 0 !important;
        box-shadow: none;
        border: 0;
        text-decoration: none;
        font-weight: inherit;
        letter-spacing: inherit;
        display: inline-flex !important;
        gap: .5rem;
        border-width: 0;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
        border-radius: 0px;
    }

    .dasy-tabs__tablist .dasy-tabs__buttons .wp-block-button__link:focus {
        outline-width: 0px !important;
    }



    /* icon span injected by JS based on data-dasy-icon attribute */
    .dasy-tabs .wp-block-button.dasy-tab .dasy-tab__icon,
    .is-style-dasy-tabs .wp-block-button.dasy-tab .dasy-tab__icon {
        width: 1.75rem;
        height: 1.75rem;
        display: inline-block;
        flex: 0 0 auto;
        line-height: 0;
    }

    .dasy-tabs .wp-block-button.dasy-tab .dasy-tab__icon svg,
    .is-style-dasy-tabs .wp-block-button.dasy-tab .dasy-tab__icon svg {
        width: 100%;
        height: 100%;
        fill: var(--dasy-gray);
        display: block;
        transition: fill .25s ease;
    }

    .dasy-tabs__tablist .dasy-tabs__buttons .wp-block-button__link[aria-selected="true"] .dasy-tab__icon svg,
    .dasy-tabs__tablist .dasy-tabs__buttons [role="tab"][aria-selected="true"] .dasy-tab__icon svg {
        fill: var(--active-color) !important;
    }

    .dasy-tabs__tablist .dasy-tabs__buttons .wp-block-button__link:hover .dasy-tab__icon svg,
    .dasy-tabs__tablist .dasy-tabs__buttons [role="tab"]:hover .dasy-tab__icon svg {
        fill: var(--tab-color) !important;
    }

    /* Removed editor mask fallback icons (now using live injected SVGs). */

    /* Slight refinement for injected icon alignment */
    .dasy-tabs .wp-block-button.dasy-tab .dasy-tab__icon,
    .is-style-dasy-tabs .wp-block-button.dasy-tab .dasy-tab__icon {
        vertical-align: middle;
        pointer-events: none;
    }

    /* sliding underline */
    .dasy-tabs .dasy-tabs__slider,
    .is-style-dasy-tabs .dasy-tabs__slider {
        position: absolute;
        left: 0;
        bottom: -3px;
        height: 6px;
        width: 0;
        background: var(--active-color);
        border-radius: 3px;
        transform: translateX(0);
        transition: transform .25s ease, width .25s ease, background-color .2s linear;
    }

    /* panels */
    .dasy-tabs .dasy-tabs__panels,
    .is-style-dasy-tabs .dasy-tabs__panels {
        margin-top: clamp(1rem, 2.5vw, 2rem);
    }

    /* ================= Illustrated Variant ================= */
    /* Container (add helper class support) */
    .wp-block-group.is-style-dasy-tabs-illustrated,
    .dasy-tabs.is-style-dasy-tabs-illustrated {
        position: relative;
        --tabs-border-color: var(--dasy-color-border);
        padding: clamp(1rem, 2vw, 1.5rem) 1rem 2rem;
        border: 2px solid var(--tabs-border-color);
        border-radius: .75rem;
        background: var(--dasy-white);
    }

    .wp-block-group.is-style-dasy-tabs-illustrated .dasy-tabs__buttons,
    .dasy-tabs.is-style-dasy-tabs-illustrated .dasy-tabs__buttons {
        justify-content: space-between;
        width: 100%;
        gap: 2rem;
    }

    .wp-block-group.is-style-dasy-tabs-illustrated .dasy-tab,
    .dasy-tabs.is-style-dasy-tabs-illustrated .dasy-tab {
        flex: 1 1 0;
        text-align: center;
        position: relative;
        padding:0 !important;
    }

    .wp-block-group.is-style-dasy-tabs-illustrated .dasy-tab .wp-block-button__link,
    .dasy-tabs.is-style-dasy-tabs-illustrated .dasy-tab .wp-block-button__link {
        /* position: relative;
        background: var(--dasy-white) !important;
        border: 2px solid var(--tabs-border-color) !important;
        border-radius: 50% !important;
        width: clamp(5.5rem, 11vw, 7.5rem) !important;
        height: clamp(5.5rem, 11vw, 7.5rem) !important;
        padding: .75rem !important;
        display: flex !important;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        font-weight: 600;
        line-height: 1.1;
        color: var(--dasy-ink) !important;
        text-decoration: none;
        overflow: visible;
        z-index: 2; */
    }

    /* (Icons are not rendered for illustrated variant by JS; no CSS suppression needed) */

    .wp-block-group.is-style-dasy-tabs-illustrated img.dasy-tab__image,
    .dasy-tabs.is-style-dasy-tabs-illustrated img.dasy-tab__image {
        position: absolute;
        top: -50%;
        left: 50%;
        transform: translateX(-50%);
        width: clamp(3.5rem, 7vw, 5rem);
        height: clamp(3.5rem, 7vw, 5rem);
        object-fit: contain;
        pointer-events: none;
        z-index: 3;
    }

    .wp-block-group.is-style-dasy-tabs-illustrated img.dasy-tab__image,
    .dasy-tabs.is-style-dasy-tabs-illustrated img.dasy-tab__image {
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .15));
    }

    .wp-block-group.is-style-dasy-tabs-illustrated .dasy-tab[aria-selected="true"] .wp-block-button__link,
    .dasy-tabs.is-style-dasy-tabs-illustrated .dasy-tab[aria-selected="true"] .wp-block-button__link {
        border-color: var(--active-color, var(--tabs-border-color));
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--active-color, #666) 35%, transparent);
    }

    .wp-block-group.is-style-dasy-tabs-illustrated .dasy-tabs__slider,
    .dasy-tabs.is-style-dasy-tabs-illustrated .dasy-tabs__slider {
        bottom: -3px;
        height: 6px;
        background: var(--active-color);
        border-radius: 3px;
        transition: transform .25s ease, width .25s ease, background-color .2s linear;
    }

    .wp-block-group.is-style-dasy-tabs-illustrated .dasy-tabs__tablist::before,
    .dasy-tabs.is-style-dasy-tabs-illustrated .dasy-tabs__tablist::before {
        content: "";
        position: absolute;
        top: 50%;
        left: clamp(.75rem, 2vw, 1rem);
        right: clamp(.75rem, 2vw, 1rem);
        height: 2px;
        background: var(--tabs-border-color);
        z-index: 1;
        transform: translateY(-50%);
    }

    /* Hide images for non-illustrated variant (safety) */
    .is-style-dasy-tabs img.dasy-tab__image,
    .dasy-tabs.is-style-dasy-tabs img.dasy-tab__image {
        display: none !important;
    }

    .wp-block-group.is-style-dasy-tabs-illustrated .dasy-tab .wp-block-button__link:focus-visible,
    .dasy-tabs.is-style-dasy-tabs-illustrated .dasy-tab .wp-block-button__link:focus-visible {
        outline: 3px solid var(--active-color, #0a58ca);
        outline-offset: 3px;
    }

    .is-style-dasy-tabs .dasy-tabs__panel[hidden] {
        display: none;
    }

    .block-editor-block-list__block.dasy-tabs__panel {
        /* provide border to distinguish between tab panels in editor */
        border: 2px dotted var(--dasy-editor-border-color);
        padding: var(--dasy-pad-x);
    }

    .block-editor-block-list__block.dasy-tabs__panel[hidden] {
        display: block !important;
        /* override editor default of display: none on hidden attribute */
    }

    .dasy-tabs__panel[role="tabpanel"] {
        -webkit-animation: slide-in-bottom .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: slide-in-bottom .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }

    /**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
    @-webkit-keyframes slide-in-bottom {
        0% {
            -webkit-transform: translateY(25px);
            transform: translateY(25px);
            opacity: 0;
        }

        100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            opacity: 1;
        }
    }

    @keyframes slide-in-bottom {
        0% {
            -webkit-transform: translateY(25px);
            transform: translateY(25px);
            opacity: 0;
        }

        100% {
            -webkit-transform: translateY(0);
            transform: translateY(0);
            opacity: 1;
        }
    }


}