/* AI-generated / AI-modified image compliance badges */

:is(figure, div, a, picture, .wp-block-image):has(> img.is-ai-generated, > img.is-ai-modified) {
    position: relative !important;
    display: inline-block;
    container-type: inline-size; /* Enables proportional scaling */
}

:is(figure, div, a, picture, .wp-block-image):has(> img.is-ai-generated)::after,
:is(figure, div, a, picture, .wp-block-image):has(> img.is-ai-modified)::after {
    content: "";
    position: absolute;
    bottom: 4%;
    left: 4%;

    /* Responsive sizing proportional to the image width */
    width: clamp(110px, 30cqw, 240px);
    aspect-ratio: 3 / 1; /* Approximates the SVG badge proportions */

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center left;

    pointer-events: none;
    z-index: 99;
}

:is(figure, div, a, picture, .wp-block-image):has(> img.is-ai-generated)::after {
    background-image: url('../img/ai-generated-badge.svg');
}

:is(figure, div, a, picture, .wp-block-image):has(> img.is-ai-modified)::after {
    background-image: url('../img/ai-modified-badge.svg');
}

/*
 * Fallback for browsers without :has()/container query support (see
 * assets/js/ai-badge-fallback.js, which adds these classes to the image's
 * parent element only when native support is missing). Percentage sizing
 * is used instead of cqw since container queries aren't guaranteed either.
 */
.wbs-ai-badge-host {
    position: relative !important;
    display: inline-block;
}

.wbs-ai-badge-host--generated::after,
.wbs-ai-badge-host--modified::after {
    content: "";
    position: absolute;
    bottom: 4%;
    left: 4%;

    width: clamp(110px, 30%, 240px);
    aspect-ratio: 3 / 1;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center left;

    pointer-events: none;
    z-index: 99;
}

.wbs-ai-badge-host--generated::after {
    background-image: url('../img/ai-generated-badge.svg');
}

.wbs-ai-badge-host--modified::after {
    background-image: url('../img/ai-modified-badge.svg');
}