/*
 * silverstripe-ai-content-label
 *
 * Alles Aussehen laeuft ueber Custom Properties: ein Theme, das nur umfaerben
 * will, muss keine Regeln ueberschreiben, sondern nur Variablen setzen.
 */

.ai-label-anchor,
.ai-content-label-anchor--js {
    position: relative;
}

/* Wird nur vom Shortcode-Handler um redaktionelle Bilder gelegt. Bei Bildern aus
   dem Theme wird nie umschlossen. */
.ai-content-label-wrap {
    display: inline-block;
    max-width: 100%;
}

/*
 * Helle, halbtransparente Pille mit dunkler Schrift.
 *
 * Nur der Hintergrund ist halbtransparent, die Schrift nicht - so bleibt der
 * Text auf hellen wie auf dunklen Motiven lesbar. Auf schwarzem Grund hellt die
 * Pille auf rund 62 % Weiss auf, der Text behaelt seinen Kontrast; auf hellem
 * Grund verschwindet der Rand der Pille zwar fast, der dunkle AI-Kreis und die
 * dunkle Schrift bleiben aber deutlich sichtbar. Unter etwa .55 Deckkraft
 * reicht der Kontrast auf einem schwarzen Motiv nicht mehr.
 */
.ai-content-label {
    --acl-bg: rgba(255, 255, 255, .62);
    --acl-fg: #111;
    --acl-icon-bg: rgba(0, 0, 0, .16);
    --acl-radius: 999px;
    --acl-offset: .75rem;
    --acl-font-size: .75rem;
    --acl-icon-size: 1.5em;
    --acl-gap: .45em;
    --acl-z: 5;

    display: inline-flex;
    align-items: center;
    gap: var(--acl-gap);
    max-width: calc(100% - (2 * var(--acl-offset)));
    box-sizing: border-box;
    padding: .25em .7em .25em .25em;
    border-radius: var(--acl-radius);
    background: var(--acl-bg);
    color: var(--acl-fg);
    font-size: var(--acl-font-size);
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
}

.ai-content-label__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: var(--acl-icon-size);
    height: var(--acl-icon-size);
    border-radius: 50%;
    background: var(--acl-icon-bg);
    font-size: .8em;
    font-weight: 700;
    letter-spacing: .02em;
}

.ai-content-label__text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Offizielle EU-Icons -------------------------------------------------- */

/*
 * Die Icons der Europaeischen Kommission bringen einen transparenten Schutzraum
 * mit: die sichtbare Pille fuellt nur einen Teil der Dateihoehe (Basis-Icon
 * 0.666, Wortmarken 0.492 - siehe client/dist/images/eu/HERKUNFT.md). Die Hoehe
 * wird deshalb hochgerechnet, damit die Marke so gross erscheint wie das
 * Element, das sie ersetzt.
 *
 * Der Ueberstand wird ueber negative Aussenabstaende aus dem Layout genommen -
 * er ist transparent und soll die Pille des Moduls nicht aufblaehen.
 */
.ai-content-label__eu {
    --acl-eu-size: calc(var(--acl-icon-size) / .666);

    display: block;
    flex: 0 0 auto;
    width: auto;
    height: var(--acl-eu-size);
    margin: calc((var(--acl-icon-size) - var(--acl-eu-size)) / 2);
}

/*
 * Eine Wortmarke ist bereits ein vollstaendiges Label. Der Rahmen des Moduls
 * entfaellt, sonst laege eine Pille auf einer Pille. Den Abstand zur Bildkante
 * bringt das Icon in Form seines Schutzraums selbst mit, der Offset wird
 * entsprechend kleiner.
 */
.ai-content-label--wordmark {
    --acl-offset: .25rem;

    gap: 0;
    padding: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/*
 * Rettungsfall: das Bild traegt bereits eine eingebrannte Kennzeichnung, die der
 * Browser aber ganz oder teilweise wegschneidet. Das DOM-Badge rueckt naeher an
 * die Kante, damit es einen sichtbar gebliebenen Rest ueberdeckt statt daneben
 * zu stehen.
 */
.ai-content-label--rescued {
    --acl-offset: .25rem;
}

.ai-content-label--wordmark .ai-content-label__eu {
    --acl-eu-size: calc((var(--acl-icon-size) + .5em) / .492);

    margin: 0;
}

/* --- Badge auf dem Bild -------------------------------------------------- */

.ai-content-label--badge {
    position: absolute;
    z-index: var(--acl-z);
    /* Darf Klicks auf Links, Lightbox-Trigger und Slider-Gesten nicht abfangen. */
    pointer-events: none;
}

/* Nicht fuer Wortmarken: dort gibt es keine Pille, hinter der etwas
   weichgezeichnet werden koennte - der Filter wuerde das Motiv rings um das
   offizielle Icon verwaschen. */
@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
    .ai-content-label--badge:not(.ai-content-label--wordmark) {
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        --acl-bg: rgba(255, 255, 255, .52);
    }
}

.ai-content-label--bottom-left {
    bottom: var(--acl-offset);
    left: var(--acl-offset);
}

.ai-content-label--bottom-right {
    right: var(--acl-offset);
    bottom: var(--acl-offset);
}

.ai-content-label--top-left {
    top: var(--acl-offset);
    left: var(--acl-offset);
}

.ai-content-label--top-right {
    top: var(--acl-offset);
    right: var(--acl-offset);
}

/* --- Hinweis unter dem Bild ---------------------------------------------- */

.ai-content-label--caption {
    --acl-bg: transparent;
    --acl-fg: inherit;
    --acl-icon-bg: transparent;

    /* flex statt inline-flex: der Hinweis soll unter dem Bild stehen, nicht
       daneben - auch wenn das umgebende Element ein Flex-Container ist. */
    display: flex;
    justify-content: flex-start;
    position: static;
    margin-top: .5em;
    padding-left: 0;
    opacity: .75;
    font-weight: 400;
    white-space: normal;
}

.ai-content-label--caption .ai-content-label__icon {
    border: 1px solid currentColor;
}

/* --- Ausgabe und Bedienhilfen -------------------------------------------- */

/* Wortmarken bleiben in beiden Faellen unangetastet: sie bringen Hintergrund und
   Kontrast selbst mit, ein zusaetzlicher Rahmen oder Fuellton waere eine
   Veraenderung des offiziellen Icons. */
@media print {
    .ai-content-label:not(.ai-content-label--wordmark) {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        --acl-bg: #fff;
        --acl-fg: #000;
    }
}

@media (forced-colors: active) {
    .ai-content-label:not(.ai-content-label--wordmark) {
        border: 1px solid CanvasText;
        background: Canvas;
        color: CanvasText;
    }
}