/* ==========================================================================
   EWB Radar – screenshot.css
   Format-Flyout neben #screenshot-btn.
   Gehört zu: frontend/js/screenshot.js

   Layout-Konzept (wie beim Geocoder-Suchfeld daneben):
   Das Flyout ist position:absolute und nimmt damit keinen Platz in der
   Flex-Spalte von #right-controls ein – die übrigen Buttons rücken beim
   Aufklappen nicht.

   --screenshot-top wird per JS (buildFlyout) auf den vertikalen Offset des
   #screenshot-btn gesetzt und bei window:resize aktualisiert.
   right: 52px = Button-Breite (40px) + Gap (8px) + Rand → links des Buttons.
   ========================================================================== */

.screenshot-flyout {
  position: absolute;
  top: var(--screenshot-top, 0px);
  right: 52px;
  z-index: 1;

  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* Gleiche Höhe wie ein Button der Spalte: mit top am Button-Oberrand
     sitzen die Format-Pillen damit auf dessen Mittellinie. */
  height: 40px;

  opacity: 0;
  pointer-events: none;
  transform: translateX(8px);
  transition:
    opacity   160ms ease,
    transform 160ms ease;
}

.screenshot-flyout--open {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* Mit #right-controls qualifiziert: die Basisregel in buttons.css
   (#right-controls button) erzwingt 40×40 und gewänne sonst über die
   Spezifität. Glas-Hintergrund und Hover/Active kommen von dort bzw. aus
   right_controls.css und bleiben unangetastet. */
#right-controls .screenshot-format {
  width: auto;
  height: 32px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-lg);

  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}