/* Language Labels — badges over browse thumbnails. */

:root {
    --language-label-bg: #1f2933;
    --language-label-fg: #ffffff;
}

.language-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 6px 0;
    padding: 0;
    list-style: none;
    line-height: 1.4;
}

.language-labels[hidden] {
    display: none;
}

.language-label {
    display: inline-block;
    margin: 0;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--language-label-bg);
    color: var(--language-label-fg);
    /*
     * Only the size is set: family, weight and everything else come from the
     * theme, so Hebrew-script and other non-Latin labels keep the theme's
     * fonts. No letter-spacing either — it misplaces niqqud and breaks joining
     * scripts.
     */
    font-size: 1em;
    line-height: 1.5;
    white-space: nowrap;
}

/*
 * Colour by language. Each label carries --language-label-offset, degrees of hue
 * away from the base colour (0 = the base language, which wears it exactly).
 *
 * The plain rule is the fallback, built from the base colour's H/S/L as
 * precomputed by the plugin. The @supports rules use relative colour syntax to
 * rotate the live base colour instead, so a theme variable like
 * --thedaily-primary-bg-color is followed even if it changes. They must stay
 * behind @supports: a declaration containing var() is only validated when it is
 * applied, so an unsupported one would still win the cascade and then leave the
 * label transparent. The text is a dark shade of the same hue on light bases
 * and white on dark ones.
 */
.language-labels--auto .language-label {
    background: hsl(
        calc(var(--language-label-base-h, 168) + var(--language-label-offset, 0)),
        var(--language-label-base-s, 55%),
        var(--language-label-base-l, 65%)
    );
    color: hsl(
        calc(var(--language-label-base-h, 168) + var(--language-label-offset, 0)),
        60%,
        var(--language-label-base-fg-l, 16%)
    );
}

@supports (background: hsl(from red calc(h + 1) s l)) {
    .language-labels--auto .language-label {
        background: hsl(from var(--language-label-base) calc(h + var(--language-label-offset, 0)) s l);
    }
}

@supports (color: hsl(from red h s clamp(16, calc((55 - l) * 1000), 100))) {
    .language-labels--auto .language-label {
        color: hsl(from var(--language-label-base) calc(h + var(--language-label-offset, 0)) s clamp(16, calc((55 - l) * 1000), 100));
    }
}

.language-labels .language-label--more {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
}

/* Visually hidden full name for screen readers. */
.language-label__sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/*
 * Overlay mode. The script sets left/top/width/height to the image's box inside
 * its nearest block-level ancestor, so the theme's own thumbnail layout is left
 * exactly as it was.
 */
.language-labels-host {
    position: relative;
}

.language-labels--overlay {
    position: absolute;
    z-index: 2;
    box-sizing: border-box;
    margin: 0;
    padding: 6px;
    overflow: hidden;
    align-content: flex-start;
    pointer-events: none; /* clicks fall through to the thumbnail link */
    visibility: hidden;   /* until the image has a size to measure */
}

.language-labels--overlay.language-labels--placed {
    visibility: visible;
}

.language-labels--overlay .language-label {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/*
 * Corners.
 *
 * Flex items start from the container's start side, which follows its
 * direction. So the physical corners pin the list's direction — ltr packs the
 * labels from the left, rtl from the right — whatever the page's direction is.
 * This only moves the badges: each label is dir="auto" in the markup, so its
 * own text still runs the right way. Keep that attribute if you override the
 * template.
 *
 * The auto corners set no direction, so the labels start on the page's
 * reading-start side: left on an LTR page, right on an RTL one.
 */
.language-labels--overlay.language-labels--top-left,
.language-labels--overlay.language-labels--bottom-left {
    direction: ltr;
}

.language-labels--overlay.language-labels--top-right,
.language-labels--overlay.language-labels--bottom-right {
    direction: rtl;
}

.language-labels--overlay.language-labels--bottom-left,
.language-labels--overlay.language-labels--bottom-right,
.language-labels--overlay.language-labels--auto-bottom {
    align-content: flex-end;
}

/* Tiny admin thumbnails: tighten up. */
.language-labels--overlay.language-labels--compact {
    padding: 2px;
    gap: 2px;
}

.language-labels--compact .language-label {
    padding: 0 3px;
    font-size: 0.75em;
}