@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/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: 1.125rem;
    --wp--preset--font-size--ext-large: clamp(1.65rem, 3.5vw, 2.15rem);
    --wp--preset--font-size--ext-x-large: clamp(3rem, 6vw, 4.75rem);
    --wp--preset--font-size--ext-xx-large: clamp(3.25rem, 7.5vw, 5.75rem);

    /* Fallbacks for pre 5.9 themes */
    --wp--preset--color--black: #000;
    --wp--preset--color--white: #fff;
}

.ext * {
    box-sizing: border-box;
}

/* 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 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.block-editor-block-list__layout
    > [data-align="full"]:not(:first-of-type)
    > .ext-my-0,
.is-root-container.block-editor-block-list__layout
    > [data-align="wide"]
    > .ext-my-0 {
    /* no suggestion */
    margin-top: calc(-1 * var(--wp--style--block-gap, 28px)) !important;
}

/* Ensure vh content in previews looks taller */
.block-editor-block-preview__content-iframe .preview\:min-h-50 {
    /* no suggestion */
    min-height: 50vw !important;
}

.block-editor-block-preview__content-iframe .preview\:min-h-60 {
    /* no suggestion */
    min-height: 60vw !important;
}

.block-editor-block-preview__content-iframe .preview\:min-h-70 {
    /* no suggestion */
    min-height: 70vw !important;
}

.block-editor-block-preview__content-iframe .preview\:min-h-80 {
    /* no suggestion */
    min-height: 80vw !important;
}

.block-editor-block-preview__content-iframe .preview\:min-h-100 {
    /* no suggestion */
    min-height: 100vw !important;
}

/*  Removes excess margin when applied to the alignfull parent div in Block Themes */
.ext-mr-0.alignfull:not([style*="margin"]) {
    /* no suggestion */
    margin-right: 0 !important;
}

.ext-ml-0:not([style*="margin"]) {
    /* no suggestion */
    margin-left: 0 !important;
}

/*  Ensures fullwidth blocks display properly in the editor when margin is zeroed out */
.is-root-container
    .wp-block[data-align="full"]
    > .ext-mx-0:not([style*="margin"]) {
    /* no suggestion */
    margin-right: calc(1 * var(--wp--custom--spacing--outer, 0)) !important;
    margin-left: calc(1 * var(--wp--custom--spacing--outer, 0)) !important;
    overflow: hidden;
    width: unset;
}