/* scanner: das Kamerabild beim Abscannen eines Strichcodes.

   Das Bild füllt die Breite und behält sein Seitenverhältnis; darunter
   stehen Statuszeile und Abbrechen untereinander. Der Kasten steht nur da,
   solange gescannt wird. */
.scanner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.scanner__video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  /* contain, nicht cover: beim Abscannen zählt das ganze Bild. Beschneiden
     würde heißen, dass der Strichcode neben dem sichtbaren Ausschnitt liegt. */
  object-fit: contain;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: oklch(0 0 0);
}

.scanner__status {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
}