/*
 * Lumen Layout - Dropdown-Menues (Bootstrap-Markup ohne Bootstrap)
 *
 * Bildet die Bootstrap-3-Dropdown-Klassen (data-toggle="dropdown", .dropdown-menu,
 * .dropdown-item ...) nach, ohne Bootstrap-CSS/-JS. Der Auf-/Zuklapp-Zustand wird per
 * Klasse .open am Eltern-Container gesetzt (siehe js/components/dropdown.js).
 *
 * Aktueller Anwendungsfall: die frei waehlbaren Eingabefelder mit Hinterlegung
 * (HtmlFreiWaehlbaresEingabefeldResponsive) - ein .input-group-btn mit Toggle-Button
 * und einem .dropdown-menu, aus dem ein Wert in das Feld uebernommen wird.
 */

/* Positionskontext fuer das absolut positionierte Menue */
.dropdown,
.btn-group,
.input-group-btn {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 180px;
  margin-top: 2px;
  padding: 6px 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  list-style: none;
  text-align: left;
}

/* Rechtsbuendig ausklappen (.dropdown-menu-right) - sonst wuerde das Menue bei einem
   am rechten Feldrand sitzenden Button rechts ueberlaufen. */
.dropdown-menu-right {
  right: 0;
  left: auto;
}

.open > .dropdown-menu {
  display: block;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 6px 14px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* Der erste Eintrag ist haeufig eine nicht anklickbare Ueberschrift (<div> mit
   <strong>), daher nur Links/Buttons hervorheben. */
a.dropdown-item:hover,
a.dropdown-item:focus,
button.dropdown-item:hover,
button.dropdown-item:focus {
  background: var(--bg);
  color: var(--ink);
  outline: none;
}

.dropdown-divider {
  height: 0;
  margin: 6px 0;
  border-top: 1px solid var(--line);
}

/* Zeitraum-Schnellwahl der Filterdialoge (js/components/filterzeitraum.js):
   Der Dialoginhalt scrollt (jQuery-UI setzt overflow:auto) und der Datumsbereich ist
   dort meist die letzte Zeile. Ein Menue im Fluss wird dann abgeschnitten - nach unten
   am Rand des Inhalts, nach oben ebenso. Es wird deshalb aus dem Fluss geloest; die
   Koordinaten setzt das Skript am Knopf, hier steht nur das Gleichbleibende. */
.dropdown-menu.schwebend {
  position: fixed;
  top: auto;
  bottom: auto;
  margin: 0;
  max-height: min(60vh, 22rem);
  overflow-y: auto;
  scrollbar-gutter: stable;
}