/**
 * IDF Woo Attribute Filter - Balken fuer Attributwerte
 *
 * Shortcode [idf_attr_bars]. Wird nur geladen, wenn der Shortcode wirklich
 * etwas ausgibt.
 *
 * Jeder sichtbare Wert haengt an einer Custom Property. Was im Reiter „Balken"
 * eingestellt ist, kommt als Inline-Stil auf den Wrapper und ueberschreibt die
 * Vorgabe hier - dieses Stylesheet bleibt dadurch statisch und cachebar. Ein
 * leer gelassenes Feld setzt die Property gar nicht, dann gilt der Wert hier.
 */

.idf-attr-bars {
    --idf-attr-bar-color: var(--primary_color, #167ea0);
    --idf-attr-bar-track: rgba(0, 0, 0, 0.08);
    --idf-attr-bar-height: 8px;
    --idf-attr-bar-radius: 4px;
    --idf-attr-bar-gap: 6px;
    --idf-attr-bar-label-width: 11em;
    --idf-attr-bar-value-width: 4.5em;
    --idf-attr-bar-font-size: 0.85em;
    --idf-attr-icon-height: 32px;
    --idf-attr-icon-gap: 8px;
    --idf-attr-swatch-size: 18px;
    --idf-attr-swatch-radius: 2px;
    --idf-attr-swatch-gap: 6px;
    --idf-attr-swatch-border: rgba(0, 0, 0, 0.18);
    --idf-attr-tip-bg: #1d2327;
    --idf-attr-tip-text: #fff;
    --idf-attr-pill-radius: 999px;
    --idf-attr-pill-bg: transparent;
    --idf-attr-pill-border: var(--idf-attr-bar-color);
    --idf-attr-pill-text: inherit;

    display: flex;
    flex-direction: column;
    gap: var(--idf-attr-bar-gap);
    font-size: var(--idf-attr-bar-font-size);
    line-height: 1.35;
}

.idf-attr-bar {
    display: flex;
    align-items: center;
    gap: 0.6em;
}

.idf-attr-bar__label {
    flex: 0 0 var(--idf-attr-bar-label-width);
    min-width: 0;
    overflow-wrap: break-word;
}

.idf-attr-bar__track {
    flex: 1 1 auto;
    display: block;
    min-width: 3em;
    height: var(--idf-attr-bar-height);
    border-radius: var(--idf-attr-bar-radius);
    background: var(--idf-attr-bar-track);
    overflow: hidden;
}

.idf-attr-bar__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--idf-attr-bar-color);
}

.idf-attr-bar__value {
    flex: 0 0 var(--idf-attr-bar-value-width);
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Terme ohne Zahlenwert: Badges statt Balken, gleiche Zeilenstruktur. */
.idf-attr-bar__badges {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
}

/* ---------------------------------------------------------------------------
   Grafiken

   Piktogramme statt Text: Waschsymbole, Pflegehinweise, Pruefzeichen. Die Hoehe
   ist eingestellt, die Breite ergibt sich aus dem Bild - Symbole sind selten
   quadratisch, und ein festes Verhaeltnis verzerrte sie.

   Terme ohne Bild erscheinen in derselben Zeile als Pille. Deshalb richtet die
   Zeile ihre Kinder mittig aus, sonst haengt die Pille neben einem hohen Symbol
   oben.
--------------------------------------------------------------------------- */

.idf-attr-bar__grafiken {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--idf-attr-icon-gap);
}

.idf-attr-bar__symbol {
    position: relative;
    display: inline-flex;
}

.idf-attr-bar__grafik {
    height: var(--idf-attr-icon-height);
    width: auto;
    max-width: 100%;
    display: block;
}

/* Der Tooltip.

   Nicht das `title`-Attribut: dessen Blase kommt erst nach etwa einer Sekunde,
   sieht auf jedem System anders aus, laesst sich nicht gestalten, und auf
   Touch-Geraeten gibt es sie gar nicht.

   `visibility` statt `display`, damit die Blase ueberblenden kann;
   `pointer-events: none`, damit sie den Zeiger nicht abfaengt und dadurch
   flackert. */
.idf-attr-bar__tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    padding: 4px 8px;
    border-radius: 3px;
    background: var(--idf-attr-tip-bg);
    color: var(--idf-attr-tip-text);
    font-size: 0.75em;
    line-height: 1.35;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
    pointer-events: none;
}

/* Das Zipfelchen zur Blase. */
.idf-attr-bar__tip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -4px;
    border: 4px solid transparent;
    border-top-color: var(--idf-attr-tip-bg);
}

.idf-attr-bar__symbol:hover .idf-attr-bar__tip,
.idf-attr-bar__symbol:focus-within .idf-attr-bar__tip {
    opacity: 1;
    visibility: visible;
}

/* ---------------------------------------------------------------------------
   Farbfelder

   Shortcode [idf_attr_colors]: die Farbwerte eines Attributs als Quadrate, ohne
   Beschriftung. Der Termname haengt als `aria-label` am Feld und erscheint beim
   Ueberfahren in derselben Blase wie bei den Symbolen.

   Der Rahmen ist nicht Zierde: ohne ihn verschwindet Weiss auf weissem Grund,
   und genau Weiss steht in jeder Farbreihe.
--------------------------------------------------------------------------- */

.idf-attr-bar__farbfelder {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--idf-attr-swatch-gap);
}

.idf-attr-bar__farbfeld-huelle {
    position: relative;
    display: inline-flex;
}

.idf-attr-bar__farbfeld {
    display: block;
    width: var(--idf-attr-swatch-size);
    height: var(--idf-attr-swatch-size);
    border-radius: var(--idf-attr-swatch-radius);
    box-shadow: inset 0 0 0 1px var(--idf-attr-swatch-border);
}

.idf-attr-bar__farbfeld-huelle:hover .idf-attr-bar__tip,
.idf-attr-bar__farbfeld-huelle:focus-within .idf-attr-bar__tip {
    opacity: 1;
    visibility: visible;
}

/* ---------------------------------------------------------------------------
   Pillen

   Eine Pille ist der Grundzustand fuer Badges und der Wahlzustand fuer den Wert
   hinter dem Balken. Beides teilt sich dieselben Properties, damit „Radius" und
   „Farbe" im Panel einmal gelten und nicht zweimal eingestellt werden muessen.
--------------------------------------------------------------------------- */

.idf-attr-bar__badge,
.idf-attr-bars--wert-pille .idf-attr-bar__value {
    padding: 0.1em 0.6em;
    border: 1px solid var(--idf-attr-pill-border);
    border-radius: var(--idf-attr-pill-radius);
    background: var(--idf-attr-pill-bg);
    color: var(--idf-attr-pill-text);
    white-space: nowrap;
}

/* Als Pille braucht der Wert die Breite seines Inhalts, nicht die feste Spalte. */
.idf-attr-bars--wert-pille .idf-attr-bar__value {
    flex: 0 0 auto;
    text-align: center;
}

/* Badges als blosser Text: Rahmen und Flaeche weg, dafuer Komma statt Luecke. */
.idf-attr-bars--badge-text .idf-attr-bar__badges {
    gap: 0;
}

.idf-attr-bars--badge-text .idf-attr-bar__badge {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
}

.idf-attr-bars--badge-text .idf-attr-bar__badge + .idf-attr-bar__badge::before {
    content: ", ";
}

/* Im Builder steht nur ein Platzhalter, damit die Karte nicht zusammenfaellt. */
.idf-attr-bars--placeholder {
    padding: 0.5em 0;
    opacity: 0.6;
}

/* ============================================================================
   SKALA

   Fuer Attribute, bei denen die Einordnung zaehlt und nicht der genaue Wert -
   Waermereduktion etwa. Feste Felder von schlecht nach gut, ein Marker darauf.

   Die Feldfarbe entsteht per color-mix aus den beiden Endfarben; --idf-attr-
   scale-step liefert PHP je Feld als Zahl von 0 bis 1. Damit bleibt die Anzahl
   der Felder einstellbar, ohne dass hier fuer jede Stufe eine Regel steht.
============================================================================ */

/* `.idf-attr-bars--nur-skala` steht am Wrapper von [idf_attr_scale] und traegt
   hier bewusst keine Regeln: Bis v2.9.0 hingen daran die Regeln fuer die
   labellose Zeile, seit dem zweizeiligen Layout in v2.10.0 sitzen sie an
   `.idf-attr-bar--skala`. Die Klasse bleibt als Anker fuer Theme-Anpassungen -
   nur an ihr laesst sich die Ausgabe von [idf_attr_scale] von der von
   [idf_attr_bars] unterscheiden, ohne den class-Parameter zu ueberschreiben.

   Die Skala ist zweizeilig: Kopf mit Beschriftung und Wert, darunter die
   Leiste ueber die volle Breite. Neben der Leiste wuerden beide sie
   zusammendraengen, und sie braucht Breite, damit die Felder unterscheidbar
   bleiben.

   Alle Masse sind eigene Custom Properties. Die Skala hat eine andere Form als
   ein Balken und erbt deshalb nichts von ihm - eine Leiste aus fuenf Farbfeldern
   liest sich bei Balkenhoehe schlechter als ein einfarbiger Balken. */
.idf-attr-bar--skala {
    display: flex;
    flex-direction: column;
    gap: var(--idf-attr-scale-head-gap, 4px);
    font-size: var(--idf-attr-scale-font-size, 0.9em);
}

.idf-attr-bar--skala + .idf-attr-bar--skala {
    margin-top: var(--idf-attr-scale-gap, 14px);
}

.idf-attr-bar__kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1em;
}

/* Im Kopf gilt die Breitenvorgabe der Balken nicht - dort steht das Label in
   einer festen Spalte, hier soll es sich nehmen, was es braucht. */
.idf-attr-bar--skala .idf-attr-bar__label,
.idf-attr-bar--skala .idf-attr-bar__value {
    flex: 0 1 auto;
    width: auto;
    text-align: left;
}

.idf-attr-bar--skala .idf-attr-bar__value {
    text-align: right;
    white-space: nowrap;
}

.idf-attr-bar__scale {
    position: relative;
    display: flex;
    width: 100%;
    height: var(--idf-attr-scale-height, 14px);
    border-radius: var(--idf-attr-scale-radius, 3px);
    overflow: hidden;
}

/* Die Skala laeuft ueber DREI Farben. Mit nur zwei Endpunkten liefe die Mitte
   durch einen Braunton, sobald links rot und rechts gruen steht.

   Welche zwei Farben fuer ein Feld gelten und wie weit dazwischen, entscheidet
   PHP und setzt es als --idf-attr-scale-a, -b und -step ans Feld. Die
   Standardfarben stehen deshalb dort und nicht hier: auf .idf-attr-bar__scale
   wuerden sie die Design-Werte vom Wrapper ueberschreiben. */
.idf-attr-bar__segment {
    flex: 1 1 0;
    background: color-mix(
        in srgb,
        var(--idf-attr-scale-b) calc(var(--idf-attr-scale-step, 0) * 100%),
        var(--idf-attr-scale-a)
    );
}

/* Aeltere Browser kennen color-mix nicht und zeigen sonst gar nichts. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .idf-attr-bar__segment {
        background: var(--idf-attr-scale-mid, #d9a441);
    }
}

.idf-attr-bar__marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--idf-attr-scale-marker-width, 3px);
    margin-left: calc(var(--idf-attr-scale-marker-width, 3px) / -2);
    border-radius: 1px;
    background: var(--idf-attr-scale-marker, currentColor);
}

/* Auf schmalen Karten hat ein Label neben dem Balken keinen Platz mehr. */
@media (max-width: 480px) {
    .idf-attr-bar {
        flex-wrap: wrap;
    }

    .idf-attr-bar__label {
        flex: 1 1 100%;
    }
}