/* SVG Background Styles for Custom Image and Group Blocks */

/* Image blocks */
.wp-block-image[class*="is-style-"] {
    position: relative;
}

.wp-block-image[class*="is-style-"] figure,
figure[class*="is-style-"] {
    position: relative;
    overflow: visible !important;
}

.wp-block-image[class*="is-style-"] figure::after,
figure[class*="is-style-"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.25);
    width: 100%;
    height: 100%;
    background-image: var(--svg-bg-url);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: -1;
}

/* Group blocks */
.wp-block-group[class*="is-style-"] {
    position: relative;
    overflow: visible !important;
}

.wp-block-group[class*="is-style-"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 100%;
    height: 100%;
    background-image: var(--svg-bg-url);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}

.wp-block-group[class*="is-style-"] > * {
    position: relative;
    z-index: 1;
}

/* Hide SVG backgrounds in editor */
.block-editor-page .wp-block-image[class*="is-style-"] figure::after,
.block-editor-page figure[class*="is-style-"]::after,
.block-editor-page .wp-block-group[class*="is-style-"]::after,
.editor-styles-wrapper .wp-block-image[class*="is-style-"] figure::after,
.editor-styles-wrapper figure[class*="is-style-"]::after,
.editor-styles-wrapper .wp-block-group[class*="is-style-"]::after {
    display: none;
}