/*
The .ext utility is a top-level class that we use to target contents within our patterns.
We use it here to ensure columns blocks display well across themes.
*/
.wp-block-columns[class*="fullwidth-cols"] {
    /* no suggestion */
    margin-bottom: unset;
}

.wp-block-column.editor\:pointer-events-none {
    /* no suggestion */
    @apply ext-my-0 !important;
}

/* Some popular themes use padding instead of core margin for columns; remove it */
.ext .wp-block-columns .wp-block-column[style*="padding"] {
    /* no suggestion */
    @apply ext-px-0 !important;
}

/* Some popular themes add double spacing between columns; remove it */
.ext
    .wp-block-columns
    + .wp-block-columns:not([class*="mt-"]):not([class*="my-"]) {
    /* no suggestion */
    @apply ext-mt-0 !important;
}

[class*="fullwidth-cols"] .wp-block-column:first-child,
[class*="fullwidth-cols"] .wp-block-group:first-child {
    /* no suggestion */
    @apply ext-mt-0;
}

[class*="fullwidth-cols"] .wp-block-column:last-child,
[class*="fullwidth-cols"] .wp-block-group:last-child {
    /* no suggestion */
    @apply ext-mb-0;
}

[class*="fullwidth-cols"] .wp-block-column:first-child > * {
    /* no suggestion */
    @apply ext-mt-0;
}

[class*="fullwidth-cols"] .wp-block-column > *:first-child {
    /* no suggestion */
    @apply ext-mt-0;
}

[class*="fullwidth-cols"] .wp-block-column > *:last-child {
    /* no suggestion */
    @apply ext-mb-0;
}

.ext .is-not-stacked-on-mobile .wp-block-column {
    /* no suggestion */
    @apply ext-mb-0;
}

/* Add base margin bottom to all columns */
.wp-block-columns[class*="fullwidth-cols"]:not(.is-not-stacked-on-mobile)
    > .wp-block-column:not(:last-child) {
    /* no suggestion */
    @apply ext-mb-base;
}

@screen tablet {
    .wp-block-columns[class*="fullwidth-cols"]:not(.is-not-stacked-on-mobile)
        > .wp-block-column:not(:last-child) {
        /* no suggestion */
        @apply ext-mb-0;
    }
}

/* Remove margin bottom from "not-stacked" columns */
.wp-block-columns[class*="fullwidth-cols"].is-not-stacked-on-mobile
    > .wp-block-column {
    /* no suggestion */
    @apply ext-mb-0 !important;
}

@media (min-width: 600px) and (max-width: 781px) {
    .wp-block-columns[class*="fullwidth-cols"]:not(.is-not-stacked-on-mobile)
        > .wp-block-column:nth-child(even) {
        /* no suggestion */
        margin-left: var(--wp--style--block-gap, 2em);
    }
}

/*
    The `tablet:fullwidth-cols` and `desktop:fullwidth-cols` utilities are used
    to counter the core/columns responsive for at our breakpoints.
*/
@media (max-width: 781px) {
    .tablet\:fullwidth-cols.wp-block-columns:not(.is-not-stacked-on-mobile) {
        @apply ext-flex-wrap;
    }

    .tablet\:fullwidth-cols.wp-block-columns:not(.is-not-stacked-on-mobile)
        > .wp-block-column {
        @apply ext-ml-0 !important;
        flex-basis: 100% !important; /* Required to negate core/columns flex-basis */
    }
}

@media (max-width: 1079px) {
    .desktop\:fullwidth-cols.wp-block-columns:not(.is-not-stacked-on-mobile) {
        @apply ext-flex-wrap;
    }

    .desktop\:fullwidth-cols.wp-block-columns:not(.is-not-stacked-on-mobile)
        > .wp-block-column {
        @apply ext-ml-0 !important;
        flex-basis: 100% !important; /* Required to negate core/columns flex-basis */
    }

    .desktop\:fullwidth-cols.wp-block-columns:not(.is-not-stacked-on-mobile)
        > .wp-block-column:not(:last-child) {
        @apply ext-mb-base !important;
    }
}