/* ============================================================
   blocks/dauer-feld: eine Arbeitsdauer eingeben (Issue 2047)

   Nur Anordnung. Das Zahlenfeld traegt den Skin seiner Umgebung
   (blocks/forms im Dialog, `idf-inline-edit-input` in Zelle und Blase),
   die Pillen sind blocks/flag-check und bringen Groesse, Farben und die
   44 px bei Touch selbst mit.
   ============================================================ */

.idf-dauer-feld {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  vertical-align: middle;
}

/* In Zelle und Blase: breit genug fuer „1.000“ oder „1,25“, schmal genug,
   dass die Pillen daneben passen. */
.idf-dauer-feld-zahl {
  flex: 0 1 6em;
  width: 6em;
  min-width: 3.5em;
}

/* Die Pillen bleiben in einer Reihe: eine Einheit unter der Zahl liest
   sich wie ein zweites Feld. */
.idf-dauer-feld-einheit {
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

/* Im Dialog nimmt das Feld die Breite seiner Zelle, wie jedes Eingabefeld
   dort; die Zahl waechst und gibt nach, die Pillen nicht. Basis 0, sonst
   bliebe das Eingabefeld auf seiner Vorgabebreite stehen und schoebe die
   Pillen aus der Spalte. */
.idf-dauer-feld:not(.is-zelle) {
  display: flex;
  width: 100%;
}
.idf-dauer-feld:not(.is-zelle) .idf-dauer-feld-zahl {
  flex: 1 1 0;
  width: 0;
}

/* Die Blase an einer engen Zelle: blocks/popover gibt Flaeche, Rand und
   Schatten, der Inhalt seinen Abstand. */
.idf-dauer-feld-blase {
  padding: var(--space-3);
}