.dbai-label {
    display: flex;
    justify-content: var(--db-ai-label-alignitems, flex-end);
    margin: var(--db-ai-label-margin, 1rem 0 0);
    position: var(--db-ai-label-position);
    inset: var(--db-ai-label-inset);
    /* "auto" here matches the record-level marker's own default (normal
       document flow, block-level flex container filling its parent's width
       so justify-content can right-align the icon inside it) - only
       overridden (see --db-ai-label-width below) where an absolutely
       positioned "overlay" marker needs an explicit width instead, see that
       custom property's own comment. */
    width: var(--db-ai-label-width, auto);
    height: var(--db-ai-label-height, auto);
    z-index: var(--db-ai-label-zindex, 10);
    pointer-events: none;
    grid-column: var(--db-ai-label-gridcolumn);
}
.dbai-label__icon {
    width: var(--db-ai-label-icon-width, 83px);
    height: var(--db-ai-label-icon-height, 16px);
}

/*
 * "overlay" image marker mode only - the wrapper is emitted by
 * Partials/Media/Rendering/Image, and only around images that are actually flagged.
 * It just sets the custom properties .dbai-label already reads, so the marker moves
 * onto the image instead of sitting below it; override --db-ai-label-image-inset (or the
 * base custom properties directly) to reposition it.
 */
.dbai-label-image {
    position: relative;
    display: inline-block;
    max-width: 100%;
}
.dbai-label-image > .dbai-label {
    --db-ai-label-position: absolute;
    --db-ai-label-inset: auto var(--db-ai-label-image-inset, 0.5rem) var(--db-ai-label-image-inset, 0.5rem) auto;
    --db-ai-label-margin: 0;
    /* Absolutely positioned with left/top both "auto" (via --db-ai-label-inset
       above), the flex container relies on shrink-to-fit sizing on BOTH axes
       (width: left auto, right fixed; height: top auto, bottom fixed) - not
       reliably computed in every layout context (observed: invisible/
       zero-width badge in news list items and other flex/grid ancestors).
       Match .dbai-label__icon's own dimensions so the container always sizes
       to the icon regardless of context.
     */
    --db-ai-label-width: var(--db-ai-label-icon-width, 83px);
    --db-ai-label-height: var(--db-ai-label-icon-height, 16px);
}

/*
 * "overlay" image marker mode, anchor variant - for images that never exist
 * as an <img>/<f:image> element in the first place (a CSS background-image
 * or <video>, e.g. the bootstrap_package Carousel's background slides), so
 * there's no image markup for .dbai-label-image above to wrap. Apply this
 * class to a plain wrapper <div> placed inside an ancestor that already
 * establishes its own correctly-sized positioned containing block (e.g.
 * "carousel-backgroundimage-container", already `position: absolute;
 * inset: 0` per bootstrap_package's own SCSS) - this class sets no
 * position/size of its own, it only drives .dbai-label the same way
 * .dbai-label-image > .dbai-label does above, through a real selector match
 * on .dbai-label itself.
 *
 * Deliberately NOT done via inline `style="--db-ai-label-position:
 * absolute; ..."` on that wrapper <div> (relying on custom-property
 * inheritance from the wrapper into .dbai-label) - that was tried first,
 * and observed unreliable on a real project specifically for
 * --db-ai-label-position (the OTHER custom properties set the same way -
 * inset/margin/width/z-index - inherited and applied correctly; only
 * position silently ended up "static", the marker rendering in the DOM but
 * with no visible effect since its inset/width overlay depends on being
 * positioned). Most likely cause: some other, unrelated stylesheet rule
 * targeting .dbai-label's `position` inside the Carousel context
 * specifically (never confirmed conclusively) winning the cascade over
 * this extension's own `.dbai-label { position: var(...); }` base rule,
 * both of which share the same low specificity - a class-based selector
 * here raises that specificity the same way .dbai-label-image > .dbai-label
 * already reliably does, sidestepping the issue instead of explaining it.
 */
.dbai-label-overlay > .dbai-label {
    --db-ai-label-position: absolute;
    --db-ai-label-inset: auto var(--db-ai-label-image-inset, 0.5rem) var(--db-ai-label-image-inset, 0.5rem) auto;
    --db-ai-label-margin: 0;
    --db-ai-label-width: var(--db-ai-label-icon-width, 83px);
    --db-ai-label-height: var(--db-ai-label-icon-height, 16px);
    /* Higher than the default 10 - anchor contexts are typically stacked
       carousel/slider chrome (controls, indicators, captions) that the
       marker needs to stay above. */
    --db-ai-label-zindex: 20;
    /* A literal `top`, not folded into --db-ai-label-inset above: even with
       width/height now fixed (see their own comment), bottom-right
       positioning (the --db-ai-label-inset default, "auto ... auto" for
       top/left) was confirmed invisible/overlapping the Carousel's own
       controls on a real project - `top: 12px` anchors the marker near the
       top-right instead, confirmed both visible and free of overlap there.
       Wins over the base .dbai-label rule's `inset`-derived top (this
       selector's higher specificity), the same mechanism the width/height
       custom properties above already rely on - just as a real property
       instead of one more custom property, since nothing needs to override
       it per-project the way --db-ai-label-image-inset does for the
       image-wrapping variant above. */
    top: 12px;
}