/*
 * The lightbox's previous/next buttons.
 *
 * GENERATED by scripts/lightbox-nav.mjs - do not edit. Every design value
 * below was copied from the kit's own bytes: the box and the glyph from
 * public/styles/chunks/framer-uuXlD.css, the background token, the corner radii
 * and the "previous" flip from the testimonial slider's arrow control as it is
 * SSR'd in src/extracted/index/body.html, and the phone boundary from
 * public/styles/portfolio-lenka-a-andrej/breakpoint.css. Re-run the script after
 * `npm run extract`; `node scripts/lightbox-nav.mjs --check` fails if this
 * file and those sources have drifted apart.
 *
 * The buttons themselves are net-new - live's lightbox has no navigation - so
 * this is the one stylesheet in public/styles/ that is not a verbatim carve of
 * a kit file. It is linked by src/layouts/Base.astro after the kit cascade and
 * is classified by verify/head-diff.mjs's R11.
 */

/* .framer-uuXlD.framer-1gjdk87 and the control's own inline style, in index/body.html */
.lightbox-nav {
  cursor: pointer;
  flex-flow: row;
  place-content: center;
  align-items: center;
  gap: 0;
  height: 70px;
  padding: 0;
  display: flex;
  overflow: hidden;
  background-color: var(--token-c5f7251a-71e2-4003-9d8d-2700cf7ad1c8, rgb(218, 211, 190));
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  /* square at the control's own height: the kit's 200px width belongs to a
     full-width strip under the slider, not to an arrow beside a photograph */
  width: 70px;
}

/* .framer-uuXlD .framer-1wvqocy */
.lightbox-nav svg {
  aspect-ratio: 1.32258;
  width: 26px;
  height: var(--framer-aspect-ratio-supported,20px);
  flex: none;
}

/* the kit's own way of making a "previous" arrow: framer-v-mpffvw's wrapper */
.lightbox-nav-previous svg {
  transform: rotate(180deg);
}

/* ------------------------------------------------------------------------
   OURS, and carrying no design data: how a fixed overlay gets a clickable
   child, the <button> UA reset, and the dimming of an arrow at an end.
   The padded container this sits in ships `inset: 20px` (the lightbox
   factory's own `padding: 20` prop), so `left: 0` / `right: 0` IS the kit's
   gutter and no offset is stated here.
   ------------------------------------------------------------------------ */
.lightbox-nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  /* the padded container above this ships `pointer-events: none` */
  pointer-events: auto;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
}

.lightbox-nav-previous { left: 0; }
.lightbox-nav-next { right: 0; }

/* At an end. The button is `disabled`, so it also leaves the tab ring. */
.lightbox-nav[disabled] {
  opacity: 0.35;
  cursor: default;
}

/* Below the kit's phone boundary the arrows are removed and the horizontal
   swipe in src/scripts/lightbox.js is the whole navigation. */
@media (max-width: 809.98px) {
  .lightbox-nav { display: none; }
}