/* Taps (ui/interact.js): press feedback, the toast, overlays, and the states parts take when tapped. */
.device .scr:not(.out) .ig :is(.ig-btn, .ig-pill, .ig-tag, .ig-sizes > span, .ig-swatches > span, .follow, .product-pick) { transition: opacity .12s; }
.device .scr:not(.out) .ig :is(.ig-btn, .ig-pill, .ig-tag, .ig-sizes > span, .ig-swatches > span, .follow, .product-pick):active { opacity: .6; transition: none; }
:where(.device .scr:not(.out) .ig) svg { transition: opacity .12s; }   /* :where keeps it weak, so an icon's own transition wins */
.device .scr:not(.out) .ig svg:active { opacity: .6; transition: none; }

/* a pill that rises over the bottom of the screen */
.ig .ig-toast {
  left: 50%; translate: -50% 0; z-index: 20; gap: 8px; height: 40px; padding: 0 16px; border-radius: 20px; white-space: nowrap;
  background: #2A2C30F2; box-shadow: 0 6px 20px #00000066; font: 600 14px/18px var(--ig-text); color: #fff; pointer-events: none;
}

/* a sheet over the screen; a tap on the dim closes it */
.ig .ig-over { inset: 0; z-index: 15; }
.ig .ig-over-dim { inset: 0; background: #000000A6; }   /* as IG.reelBehind's dim */
.ig:has(> .ig-over) > .ig-status { z-index: 16; }        /* the status bar stays over it */
/* what a screen draws under a dim (the page behind a sheet) doesn't take taps meant for the sheet */
.device .ig > :has(~ .ig-dim), .device .ig > :has(~ .ig-dim) * { pointer-events: none !important; }

/* tapped states */
.ig .follow.following { width: auto; padding: 0 10px; border-color: transparent; background: #FFFFFF26; }
.ig .ig-btn.done { background: #FFFFFF14; color: var(--ig-soft); }

/* a band photo's last finish, fading away over the new one (IG.finishPhoto) */
.ig .ig-was { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }

/* the product gallery swipes a photo at a time. As on Instagram's product pages, the photos run edge to edge with square
   corners and the next one peeking in, over a thin bar that shows where the row is (interact.js) */
.ig .ig-gallery > .ph { flex-shrink: 0; scroll-snap-align: start; }
.ig .ig-gallery > .ph:last-child { scroll-snap-align: end; }
.ig .ig-gallery-bar { position: relative; z-index: 1; height: 2px; margin: -8px 8px 6px; border-radius: 1px; background: #FFFFFF4D; box-shadow: 0 0 2px #0000004D; pointer-events: none; }
.ig .ig-gallery-bar > i { position: absolute; top: 0; bottom: 0; left: 0; width: var(--w); translate: var(--x) 0; border-radius: 1px; background: #fff; }

/* a product photo, full screen over black (the photo viewer in interact.js) */
.device .scr:not(.out) .ig-viewer { pointer-events: auto; cursor: pointer; }
.ig .ig-viewer { inset: 0; z-index: 15; touch-action: none; }
.ig:has(> .ig-viewer) > .ig-status { z-index: 16; }
.ig .ig-viewer-bg { inset: 0; background: #000; }
.ig .ig-viewer-row { inset: 0; }
.ig .ig-viewer-slide { flex: 0 0 402px; height: 874px; display: grid; place-items: center; scroll-snap-align: start; scroll-snap-stop: always; }
.ig .ig-viewer-ui { inset: 0; pointer-events: none; }
.ig .ig-viewer-dots { left: 0; right: 0; justify-content: center; gap: 4px; }
.ig .ig-viewer-dots > i { width: 6px; height: 6px; border-radius: 3px; background: #FFFFFF4D; transition: background-color .2s; }
.ig .ig-viewer-dots > .on { background: var(--ig-blue); }