@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import "./classes/clip-path";
@import "./classes/columns";
@import "./classes/direction";
@import "./classes/inline-list";
@import "./classes/misc";
@import "./classes/text-stroke";

@import "./classes/editor/no-caption";
@import "./classes/editor/no-inserter";
@import "./classes/editor/no-resize";
@import "./classes/editor/pointer-events";

@import "./block-styles/cover-angled";

@import "./fallback/align";
@import "./fallback/colors";
@import "./fallback/font-sizes";
@import "./fallback/grid";
@import "./fallback/group";
@import "./fallback/image";

body {
    /* no suggestion */
    /* We need to abstract this out of tailwind.config because clamp doesnt translate with negative margins */
    --extendify--spacing--large: var(
        --wp--custom--spacing--large,
        clamp(2em, 8vw, 8em)
    );

    /* Add pattern preset font sizes */
    --wp--preset--font-size--ext-small: 1rem;
    --wp--preset--font-size--ext-medium: clamp(1.5rem, 2vw, 2rem);
    --wp--preset--font-size--ext-large: clamp(2.25rem, 4vw, 3.75rem);
    --wp--preset--font-size--ext-x-large: clamp(3rem, 6vw, 4.75rem);
    --wp--preset--font-size--ext-gigantic: clamp(3.25rem, 7.5vw, 5.75rem);
}

/* Astra */
.ast-separate-container .ext .block-editor-block-list__layout {
    /* no suggestion */
    @apply ext-p-0 !important;
}

/* Astra: Remove spacer block visuals in the library */
.block-editor-block-preview__content-iframe
    .ext
    [data-type="core/spacer"]
    .components-resizable-box__container {
    /* no suggestion */
    background: transparent !important;
}

.block-editor-block-preview__content-iframe
    .ext
    [data-type="core/spacer"]
    .block-library-spacer__resize-container::before {
    /* no suggestion */
    display: none !important;
}

/* Twenty Twenty One */
.ext [data-block].wp-block-buttons .wp-block-button {
    @apply ext-my-0;
}

.ext [data-block].wp-block-buttons .wp-block-button:first-child {
    /* no suggestion */
    @apply ext-mt-0 ext-mb-base !important;
}

/* Twenty Twenty adds a lot of margin automatically to blocks. We only want our own margin added to our patterns. */
.ext .wp-block-group__inner-container figure.wp-block-gallery.alignfull {
    /* no suggestion */
    margin-top: unset;
    margin-bottom: unset;
}

/* Ensure no funky business is assigned to alignwide */
.ext .alignwide {
    /* no suggestion */
    @apply ext-mx-auto !important;
}

/* Negate blockGap being inappropriately assigned in the editor */
.is-root-container > [data-align="full"] > .ext-my-0,
.is-root-container > [data-align="full"] > .ext-mt-0,
.is-root-container > [data-align="wide"] > .ext-my-0,
.is-root-container > [data-align="wide"] > .ext-mt-0 {
    /* no suggestion */
    margin-top: calc(-1 * var(--wp--style--block-gap)) !important;
}