/* idf-list-auswahl v0.1.0 (Issue 1987) - ausgewählte Zeilen und die Leiste
   am Fuß der Liste. Verhalten und API in idf-list-auswahl.js und im README. */

/* Die ausgewählte Zeile: ein Schleier in IDF Petrol 10 % und links ein
   Balken in IDF Petrol. Beides als inset-Schatten, nicht als Hintergrund:
   die Zeile behält ihren eigenen Grund (Eisenhower, Ampel, Fortschritt),
   und ein Schatten macht keinen Stacking-Context auf, in dem Tooltips der
   Pillen gefangen wären (dieselbe Abwägung wie beim Hover der Ampel-Zeile
   in grid-css). Lädt nach grid-css und gewinnt bei gleicher Spezifität
   deshalb auch über deren Hover-Schatten. */
.idf-list-rows .idf-list-row.is-ausgewaehlt {
  box-shadow: inset 3px 0 0 var(--accent), inset 0 0 0 9999px var(--accent-10-a);
}

/* Die Leiste klebt am unteren Rand, solange die Liste im Bild ist, und
   liegt über den Zeilen und ihrem Hover-Lift (z-sticky + 1, grid-css).
   Seitlich der Rand der Leiste oben (--idf-list-gutter), auf beiden Seiten:
   der Rand am Zeilen-Ende ist an einer Aufgaben-Liste 0, die Leiste stünde
   sonst am Fensterrand. */
.idf-list-auswahl {
  position: sticky;
  bottom: var(--space-4);
  z-index: calc(var(--z-sticky) + 2);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) var(--idf-list-gutter) 0;
  padding: var(--space-2) var(--space-3);
  background: var(--white);
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  font-size: var(--font-base);
}
.idf-list-auswahl-zahl {
  flex: 1 1 auto;
  min-width: 0;
}