/* Frontend label of ai:badge. The label is a sibling after the medium inside the element that
   frames it (the "frame"); it sits in a corner of that frame. Tokens to adjust per site:
     --ai-label-offset        distance to the frame's edges
     --ai-label-z             stacking above the medium and its overlays
     --ai-label-font          font of the tip
   The box of the label is set with two classes (or class and attribute): site rules for every
   child of a frame (`.ratio > * { position: absolute; width: 100% }`) must not stretch it.

   Design "AI_Generation_Badge v1.0": a pill of the marks "AI" and "GENERATED"/"MODIFIED", with
   an info icon when it has a tip; one set of measures for desktop, one below 768px. The marks are
   the design's SVGs as masks in currentColor, so one file serves every colourway. Sizes medium and
   large scale the design (small is 1:1). */

.ai-label {
    --ai-label-scale: 1;
    --_pad-block: 6px;
    --_pad-start: 8px;
    --_pad-end: 7px;
    --_gap: 6px;
    --_mark: url(../Icons/Label/ai.svg);
    --_mark-w: 12.2354px;
    --_mark-h: 9.4541px;
    --_word: url(../Icons/Label/generated.svg);
    --_word-w: 61.4854px;
    --_word-h: 6.72461px;
    --_info: 14.0518px;
    --_info-pad: 2px;
}

.ai-label--modified {
    --_word: url(../Icons/Label/modified.svg);
    --_word-w: 50.166px;
}

.ai-label--tip {
    --_pad-block: 2px;
    --_pad-end: 2px;
}

.ai-label--short {
    --_pad-start: 5px;
    --_pad-end: 5px;
}

.ai-label--short.ai-label--tip {
    --_pad-start: 8px;
    --_pad-end: 2px;
}

.ai-label--medium { --ai-label-scale: 1.2; }
.ai-label--large { --ai-label-scale: 1.5; }

@media (max-width: 767.98px) {
    .ai-label {
        --_pad-start: 6px;
        --_pad-end: 5px;
        --_gap: 5px;
        --_mark: url(../Icons/Label/ai-mobile.svg);
        --_mark-w: 10.3535px;
        --_mark-h: 8px;
        --_word: url(../Icons/Label/generated-mobile.svg);
        --_word-w: 55.543px;
        --_word-h: 5.97656px;
    }

    .ai-label--modified {
        --_word: url(../Icons/Label/modified-mobile.svg);
        --_word-w: 45.3701px;
    }

    .ai-label--tip {
        --_pad-block: 1px;
        --_pad-end: 1px;
    }

    .ai-label--short {
        --_pad-start: 5px;
        --_pad-end: 5px;
    }

    .ai-label--short.ai-label--tip {
        --_pad-start: 6px;
        --_pad-end: 1px;
    }
}

.ai-label[data-ai-label] {
    position: absolute;
    z-index: var(--ai-label-z, 3);
    display: inline-flex;
    align-items: center;
    gap: calc(var(--_gap) * var(--ai-label-scale));
    box-sizing: content-box;
    width: auto;
    max-width: calc(100% - 2 * var(--ai-label-offset, 8px));
    height: auto;
    margin: var(--ai-label-offset, 8px);
    padding: calc(var(--_pad-block) * var(--ai-label-scale)) calc(var(--_pad-end) * var(--ai-label-scale))
        calc(var(--_pad-block) * var(--ai-label-scale)) calc(var(--_pad-start) * var(--ai-label-scale));
    border: 0;
    border-radius: 99px;
    background: #000;
    color: #fff;
    line-height: 0;
    pointer-events: auto;
}

/* Without anchor positioning the corner is the containing block's: the frame becomes one below. */
.ai-label.ai-label--top-left { inset: 0 auto auto 0; }
.ai-label.ai-label--top-right { inset: 0 0 auto auto; }
.ai-label.ai-label--bottom-left { inset: auto auto 0 0; }
.ai-label.ai-label--bottom-right { inset: auto 0 0 auto; }

/* The frame is the parent; with anchor="media" the element right before the label, which comes
   later in tree order and so wins. anchor-scope keeps every label to its own frame. When the
   frame is the containing block itself (positioned or transformed), it is no valid anchor and
   anchor()'s fallback 0 puts the label into that same corner. Transforms of the medium inside
   the frame (hover zoom) never move the label. A label whose frame scrolled out of sight hides. */
@supports (anchor-scope: all) {
    :where(:has(> .ai-label)) {
        anchor-name: --ai-label-frame;
        anchor-scope: --ai-label-frame;
    }

    :where(:has(+ .ai-label--anchor-media)) {
        anchor-name: --ai-label-frame;
    }

    .ai-label[data-ai-label] {
        position-anchor: --ai-label-frame;
        position-visibility: anchors-visible;
    }

    .ai-label.ai-label--top-left { inset: anchor(top, 0px) auto auto anchor(left, 0px); }
    .ai-label.ai-label--top-right { inset: anchor(top, 0px) anchor(right, 0px) auto auto; }
    .ai-label.ai-label--bottom-left { inset: auto auto anchor(bottom, 0px) anchor(left, 0px); }
    .ai-label.ai-label--bottom-right { inset: auto anchor(right, 0px) anchor(bottom, 0px) auto; }
}

/* Zero specificity: a frame that is already positioned keeps its position. */
@supports not (anchor-scope: all) {
    :where(:has(> .ai-label)) {
        position: relative;
    }
}

.ai-label__mark,
.ai-label__word,
.ai-label__info::before {
    display: block;
    flex: none;
    background-color: currentColor;
    -webkit-mask: var(--_glyph) center / 100% 100% no-repeat;
    mask: var(--_glyph) center / 100% 100% no-repeat;
}

.ai-label__mark {
    --_glyph: var(--_mark);
    width: calc(var(--_mark-w) * var(--ai-label-scale));
    height: calc(var(--_mark-h) * var(--ai-label-scale));
}

.ai-label__word {
    --_glyph: var(--_word);
    width: calc(var(--_word-w) * var(--ai-label-scale));
    height: calc(var(--_word-h) * var(--ai-label-scale));
}

.ai-label--short .ai-label__word {
    display: none;
}

/* The info icon in its own round field, which lights up while the tip is open. */
.ai-label__info {
    display: block;
    flex: none;
    padding: calc(var(--_info-pad) * var(--ai-label-scale));
    border-radius: 99px;
}

.ai-label__info::before {
    --_glyph: url(../Icons/Label/info.svg);
    content: "";
    width: calc(var(--_info) * var(--ai-label-scale));
    height: calc(var(--_info) * var(--ai-label-scale));
}

.ai-label:hover .ai-label__info,
.ai-label:focus-visible .ai-label__info,
.ai-label:has(.ai-label__tip:popover-open) .ai-label__info {
    background: color-mix(in srgb, currentColor 15%, transparent);
}

.ai-label--black-transparent[data-ai-label] {
    background: rgba(0, 0, 0, .55);
}

.ai-label--white[data-ai-label],
.ai-label--white-transparent[data-ai-label] {
    color: #000;
}

.ai-label--white[data-ai-label] {
    background: #fff;
}

.ai-label--white-transparent[data-ai-label] {
    background: rgba(255, 255, 255, .5);
}

.ai-label__text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.ai-label--tip {
    cursor: help;
}

.ai-label[tabindex]:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* The tip opens as a popover below the info icon: in the top layer, so no overflow of a frame
   clips it. It moves above or to one side when the viewport is too tight. */
.ai-label__tip {
    display: none;
    box-sizing: content-box;
    width: max-content;
    min-width: 100px;
    max-width: min(150px, calc(100vw - 32px));
    margin: 1.5px 0;
    padding: 6px 8px;
    overflow: visible;
    border: 0;
    border-radius: 5px;
    background: #fff;
    color: #000;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .1);
    font-family: var(--ai-label-font, Inter, sans-serif);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
    overflow-wrap: break-word;
    white-space: normal;
}

.ai-label__tip:popover-open {
    display: block;
}

@supports (anchor-scope: all) {
    .ai-label {
        anchor-scope: --ai-label-tip;
    }

    .ai-label__info {
        anchor-name: --ai-label-tip;
    }

    .ai-label__tip {
        position-anchor: --ai-label-tip;
        position-area: bottom;
        position-try-fallbacks: flip-block, --ai-label-tip-end, --ai-label-tip-start,
            --ai-label-tip-end flip-block, --ai-label-tip-start flip-block;
        justify-self: anchor-center;
        inset: auto;
    }

    /* Near the viewport's edge the tip ends at the icon (or starts there) instead of centring. */
    @position-try --ai-label-tip-end {
        position-area: bottom span-left;
        justify-self: normal;
    }

    @position-try --ai-label-tip-start {
        position-area: bottom span-right;
        justify-self: normal;
    }
}

@media (forced-colors: active) {
    .ai-label[data-ai-label] {
        border: 1px solid CanvasText;
        background: Canvas;
        color: CanvasText;
        forced-color-adjust: none;
    }

    .ai-label__tip {
        border: 1px solid CanvasText;
    }
}