/**
 * carousel.css — Embla carousel (ui-carousel | .ui-carousel + data-slot="carousel-*" hooks)
 *
 * @layer      variables, components
 * @requires   layers.css, _variables.css
 * @uses       data-carousel attributes — layout hooks only; behaviour from zazz/scripts/embla.js
 * @uses       container-type on viewport — basis-* / @sm:basis-* utils query [data-slot~="carousel-viewport"] width
 * @tokens     --ui-carousel-* (@layer variables)
 * @consumedby lightbox.css
 */

@layer variables {
  :root {
    --ui-carousel-slide-basis: calc(100% - var(--_gap, 0px));
    --ui-carousel-slide-min-inline-size: 0;
    --ui-carousel-touch-action: pan-y pinch-zoom;
    --ui-carousel-cursor--grabbing: grabbing;
  }
}

/* ===========================================================================
   EMBLA CAROUSEL STYLES
   - Documentation: https://www.embla-carousel.com/
   =========================================================================== */
@layer zazz.components {
  /* <ui-carousel> is a custom element (inline by default) — give it block
     flow like a div; the class form inherits div flow already. */
  ui-carousel {
    display: block;
  }

  :is(body:has([data-slot~="carousel-viewport"].is-dragging) *) {
    cursor: var(--ui-carousel-cursor--grabbing);
  }

  :where(ui-carousel, .ui-carousel) {
    position: relative;
    isolation: isolate;
  }

  [data-slot~="carousel-viewport"] {
    overflow: clip;
    max-block-size: 100%;
    max-inline-size: 100%;
  }

  [data-slot~="carousel-container"] {
    display: flex;
    gap: var(--_gap, 0);
    touch-action: var(--ui-carousel-touch-action);
  }

  [data-slot~="carousel-slide"] {
    flex: 0 0 var(--ui-carousel-slide-basis);
    min-inline-size: var(--ui-carousel-slide-min-inline-size);
  }

  [data-slot~="carousel-thumbs"] [data-slot~="carousel-slide"] {
    flex: 0 0 auto;
  }
}