/*
 * AI label (vonheldenundgestalten/contao-ai-label)
 *
 * Set on any ancestor to adjust:
 *   --ai-label-size     height relative to the parent width   (default 11%)
 *   --ai-label-min      smallest height                        (default 1.75rem)
 *   --ai-label-max      largest height                         (default 3.25rem)
 *   --ai-label-top, --ai-label-right, --ai-label-bottom, --ai-label-left
 */

/* Zero specificity, element CSS that positions the parent keeps working */
:where(:has(> .ai-label)) {
    position: relative;
}

/* Doubled class to win against generic rules of the project */
.ai-label.ai-label {
    --_ratio: 3.157;

    position: absolute;
    z-index: 3;
    inset:
        var(--ai-label-top, auto)
        var(--ai-label-right, 0.25rem)
        var(--ai-label-bottom, 0.25rem)
        var(--ai-label-left, auto);
    display: block;
    width: clamp(
        calc(var(--ai-label-min, 1.75rem) * var(--_ratio)),
        calc(var(--ai-label-size, 11%) * var(--_ratio)),
        calc(var(--ai-label-max, 3.25rem) * var(--_ratio))
    );
    max-width: 100%;
    height: auto;
    aspect-ratio: var(--_ratio);
    margin: 0;
    padding: 0;
    border: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;

    /* Hides the text, not the background image, and keeps it for screen readers */
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

/* Width to height ratio of the SVGs, so all types get the same height */
.ai-label-ai.ai-label-ai { --_ratio: 1; }
.ai-label-generated.ai-label-generated { --_ratio: 3.157; }
.ai-label-modified.ai-label-modified { --_ratio: 3; }

.ai-label-ai.ai-label-black { background-image: url('labels/ai_black.svg'); }
.ai-label-ai.ai-label-black-transparent { background-image: url('labels/ai_black_transparent.svg'); }
.ai-label-ai.ai-label-white { background-image: url('labels/ai_white.svg'); }
.ai-label-ai.ai-label-white-transparent { background-image: url('labels/ai_white_transparent.svg'); }

.ai-label-generated.ai-label-black { background-image: url('labels/generated_black.svg'); }
.ai-label-generated.ai-label-black-transparent { background-image: url('labels/generated_black_transparent.svg'); }
.ai-label-generated.ai-label-white { background-image: url('labels/generated_white.svg'); }
.ai-label-generated.ai-label-white-transparent { background-image: url('labels/generated_white_transparent.svg'); }

.ai-label-modified.ai-label-black { background-image: url('labels/modified_black.svg'); }
.ai-label-modified.ai-label-black-transparent { background-image: url('labels/modified_black_transparent.svg'); }
.ai-label-modified.ai-label-white { background-image: url('labels/modified_white.svg'); }
.ai-label-modified.ai-label-white-transparent { background-image: url('labels/modified_white_transparent.svg'); }

/* A caption sits at the bottom of the figure, move the label to the top */
:where(:has(> figcaption)) > .ai-label.ai-label {
    inset:
        var(--ai-label-top, 0.25rem)
        var(--ai-label-right, 0.25rem)
        var(--ai-label-bottom, auto)
        var(--ai-label-left, auto);
}

/* Browsers drop background images when printing unless asked to keep them */
@media print {
    .ai-label.ai-label {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}