.qr-scanner {
  /* Mirrors SCAN_REGION_WIDTH / SCAN_REGION_HEIGHT in barcode_scanner_controller.js:
      a wide, short band, because that is the shape of a 1D barcode. The video
      is object-fit: cover, so the frame tracks the decoded region closely
      rather than exactly - keep it inside the band, not flush with it. */
  --scan-frame-width: min(80vw, 420px);
  --scan-frame-height: min(35vh, 180px);

  /* Fills the screen rather than the UA's centred popover box. */
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #000;
}

.qr-scanner__reader,
.qr-scanner__reader video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border: 0 !important;
}

/* Hide the scratch canvases Quagga appends next to the video: we draw our
    own crosshair, and the overlay canvas would sit on top of it. */
.qr-scanner__reader canvas {
  display: none !important;
}

.qr-scanner__crosshair {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.qr-scanner__frame {
  position: relative;
  width: var(--scan-frame-width);
  height: var(--scan-frame-height);
  border: 3px solid rgb(226 226 226 / 0.7);
  border-radius: 1rem;
  /* Dim everything outside the scan region. */
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.5);
  transition: border-color 150ms ease;
}

.qr-scanner__frame--hit {
  border-color: #22c55e;
}

.qr-scanner__exit,
.qr-scanner__torch {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  font-size: 2rem;
  line-height: 1;
  color: #fff;
  background: rgb(0 0 0 / 0.5);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.qr-scanner__exit {
  right: max(1rem, env(safe-area-inset-right));
}

.qr-scanner__torch {
  left: max(1rem, env(safe-area-inset-left));
  font-size: 1.5rem;
}

.qr-scanner__torch[aria-pressed="true"] {
  color: #facc15;
  background: rgb(255 255 255 / 0.2);
}