/* Camera screen extras. Everything here sits over a live 30 fps video, so it's kept cheap to draw. */

/* Looks & lenses, Snapchat's carousel: round thumbnails in the shutter row, right of the shutter
   (swipe them), the group tabs under it. No backdrop blurs: a blur is redone for every chip on
   every camera frame, and again while scrolling; on phones that's the strip's jank. */
#camFilters.filter-strip.fs {
  position: absolute; inset: 0; bottom: auto; height: 100%; display: block; overflow: visible; z-index: 0;
  pointer-events: none;
}
#camFilters > * { pointer-events: auto; }
#camFilters .fs-row {
  position: absolute; top: 12px; left: calc(50% + 48px); right: 0; height: 76px; padding: 4px 14px 0 8px;
  contain: layout paint; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12px); mask-image: linear-gradient(to right, transparent, #000 12px);
}
#camFilters .fs-tabs { position: absolute; left: 0; right: 0; top: 90px; margin: 0; }
#camFilters .fs-amount { position: absolute; left: 50%; bottom: calc(100% + 42px); transform: translateX(-50%); margin: 0; }
#camFilters:not(.engaged) .fs-amount { display: none; }      /* only while you're using the carousel */
#camFilters .fs-toast { bottom: calc(100% + 42px); }

/* the live colour look (looks.js via Camera.showLook), between the video and the lens layer */
.grade-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.grade-canvas.mirror { transform: scaleX(-1); }
.grade-canvas[hidden] { display: none; }

/* "Best quality" (HD): the shutter opens the phone's own camera. An outlined HD, yellow when on. */
.ibtn.hq b {
  display: block; font: 900 11px/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .03em;
  padding: 4px 3px 3px; border: 2px solid currentColor; border-radius: 6px;
}
.ibtn.hq.on { background: transparent; color: var(--accent); }
.ibtn.hq.paused { opacity: .5; }        /* a lens is on: the in-app camera takes that one */

/* a photo's frame in the preview, until its full-resolution photo replaces it */
.pv-stage > canvas.pv-frame { pointer-events: none; }

/* small phones (360px wide and below): a touch tighter */
@media (max-width: 360px) {
  .nav-label { font-size: 9.5px; }
}