/**
 * Editor: zelfde beeld als de voorkant.
 *
 * Alleen regels die in de editor anders moeten omdat de opbouw daar
 * anders is (blok-wrappers, Kadence-editorstijlen). Alles begint met
 * .editor-styles-wrapper (de body van het editor-canvas), dus de
 * voorkant merkt hier niets van. Patroonstijlen zelf staan in de
 * bestanden per blok en gelden op beide plekken.
 */

/* Afstand tussen secties: Kadence zet in de editor op elke rij
   margin: 0 ([data-type="kadence/rowlayout"]); op de voorkant geldt de
   sectie-afstand. Alleen de bovenste laag, zoals .entry-content > rij. */
.editor-styles-wrapper .is-root-container > .wp-block-kadence-rowlayout.wp-block {
    margin-top: 0 !important;
    margin-bottom: var(--section-gap) !important;
}

/* Afronding van knoppen: Kadence zet in de editor zijn eigen 16px op
   .kt-button; op de voorkant geldt de token (pil) */
.editor-styles-wrapper .kt-button.wp-block-button__link {
    border-radius: var(--carmel-btn-radius) !important;
}

/* Knop zonder eigen icoon: de plugin zet de pijl er op de voorkant bij
   (button-arrow.php, primaire knoppen); in de editor tekenen we hem na,
   zodat de knop er hetzelfde uitziet. */
.editor-styles-wrapper .wp-block-kadence-singlebtn:not(.kb-preset--theme-secondary, .geen-pijl) .kt-button.wp-block-button__link:has(.kt-button-text):not(:has(.kt-btn-svg-icon)) {
    padding: 0 var(--alma-btn-inset) 0 var(--alma-btn-padding-x) !important;
    gap: var(--alma-btn-icon-gap) !important;

    /* rondje in de tekstkleur; de pijl is eruit gesneden (masker), zodat
       hij de knopkleur toont, zoals op de voorkant */
    &::after {
        --alma-pijl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");
        content: '';
        flex-shrink: 0;
        width: calc(var(--alma-btn-height) - 2 * var(--alma-btn-inset));
        height: calc(var(--alma-btn-height) - 2 * var(--alma-btn-inset));
        border-radius: 50%;
        background-color: var(--carmel-color-btn-primary-text);
        -webkit-mask: var(--alma-pijl) center / 16px no-repeat, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: var(--alma-pijl) center / 16px no-repeat exclude, linear-gradient(#000 0 0);
    }
}

/* Knop mét icoon, maar leeg: de patronen verwijzen naar een eigen
   SVG uit BCE (kb-custom-1320) die op Alma niet bestaat. Op de voorkant
   zet de plugin de pijl erin; in de editor bleef het rondje leeg. */
.editor-styles-wrapper .kb-preset--theme-secondary .kt-btn-svg-icon:has(> svg:empty) {
    display: none !important; /* secundair: geen pijl, zoals op de voorkant */
}

.editor-styles-wrapper .wp-block-kadence-singlebtn:not(.kb-preset--theme-secondary) .kt-btn-svg-icon:has(> svg:empty) {
    position: relative;

    &::after {
        content: '';
        position: absolute;
        inset: 0;
        margin: auto;
        width: 16px;
        height: 16px;
        background-color: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
    }
}

/* Tabs Horizontal: op de voorkant loopt het vlak tot 16px van de
   schermrand; in de editor gewoon over de breedte van de inhoud. */
.editor-styles-wrapper .tabsblock {
    width: auto !important;
    margin-inline: 0 !important;
}

/* Beeld dat het hele vlak vult (tabs): de editor zet tussen figure en
   img nog een sleep-vak (.components-resizable-box__container) met een
   vaste maat; dat moet ook het vlak vullen. */
.editor-styles-wrapper :is(.tabsblock .tab-image, .ptrn-tabs-vertical-tab) figure .components-resizable-box__container {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
}

/* Tabs Vertical: in de editor staan alle tabs open onder elkaar (zo kun
   je ze los bewerken); 24px ertussen, zodat elke tab als eigen kaart
   leest. */
.editor-styles-wrapper .ptrn-tabs-vertical .ptrn-tabs-vertical-tab {
    margin-bottom: 24px !important;
    box-shadow: inset 0 0 0 1px var(--alma-neutral-300); /* alleen editor: tab als kaart herkenbaar */

    &:last-child {
        margin-bottom: 0 !important;
    }
}