/* ScrollVars: slider styles (the class is added by slider()). */

/* Slider: native rails + snap magnetism; the class is added by slider().
   Slides get --sd (signed distance from center, in slide widths) and
   .sv-active. Any CSS reading them animates the carousel. */
.sv-slider {
  display: flex;
  gap: var(--sv-gap, 16px);
  overflow-x: auto;
  scroll-snap-type: x var(--sv-snap, mandatory);
  overscroll-behavior-x: contain;
}
.sv-slider.sv-draggable {
  cursor: grab;
}
.sv-slider-y {
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y var(--sv-snap, mandatory);
  overscroll-behavior-y: contain;
}
.sv-slider > * {
  flex: 0 0 auto;
  scroll-snap-align: center;
}
.sv-slider.sv-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}
.sv-slider.sv-gliding {
  scroll-snap-type: none;
}


/* Columns: set --sv-per-view (fractional = peek) and breakpoints ARE media
   queries. Override the var per breakpoint (or via Tailwind:
   "[--sv-per-view:1.2] md:[--sv-per-view:2.5]"). Slides can span columns
   with --sv-span. Gate class sv-cols keeps natural sizing the default.
   sv-cols also works from the Slider shell (React's className prop lands
   on .sv-slider-shell, one level up from .sv-slider). */
.sv-slider.sv-cols > *,
.sv-slider-shell.sv-cols > .sv-slider > * {
  flex: 0 0
    calc(
      (100% - (var(--sv-per-view, 1) - 1) * var(--sv-gap, 16px)) / var(--sv-per-view, 1) *
        var(--sv-span, 1) +
        (var(--sv-span, 1) - 1) * var(--sv-gap, 16px)
    );
}

/* Chrome: arrows + dots with stable class hooks. Appearance and position
   are var knobs. Override them globally (:root / .sv-slider-shell) for the
   whole project, or on one slider (className/style) for that instance.
   Beyond the knobs, restyle the classes directly or pass custom icons /
   renderDot in React. */
.sv-slider-shell {
  position: relative;
}
.sv-arrow {
  position: absolute;
  top: var(--sv-arrow-top, 50%);
  translate: 0 -50%;
  z-index: 2;
  width: var(--sv-arrow-size, 44px);
  height: var(--sv-arrow-size, 44px);
  display: grid;
  place-items: center;
  border-radius: var(--sv-arrow-radius, 999px);
  border: 1px solid var(--sv-arrow-border, rgba(128, 128, 128, 0.35));
  background: var(--sv-arrow-bg, rgba(0, 0, 0, 0.35));
  color: var(--sv-arrow-color, currentColor);
  font-size: calc(var(--sv-arrow-size, 44px) * 0.4);
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.sv-arrow-prev {
  left: var(--sv-arrow-inset, 12px);
}
/* Autoplay pause/resume (APG carousel: a visible rotation control, first in
   the tab order). Same knob family as the arrows. */
.sv-pause {
  position: absolute;
  top: var(--sv-pause-inset, 10px);
  right: var(--sv-pause-inset, 10px);
  z-index: 2;
  width: var(--sv-pause-size, 32px);
  height: var(--sv-pause-size, 32px);
  display: grid;
  place-items: center;
  border-radius: var(--sv-arrow-radius, 999px);
  border: 1px solid var(--sv-arrow-border, rgba(128, 128, 128, 0.35));
  background: var(--sv-arrow-bg, rgba(0, 0, 0, 0.35));
  color: var(--sv-arrow-color, currentColor);
  font-size: calc(var(--sv-pause-size, 32px) * 0.38);
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.sv-arrow-next {
  right: var(--sv-arrow-inset, 12px);
}
.sv-dots {
  display: flex;
  flex-wrap: wrap; /* a crowded row wraps rather than shrinking the targets */
  gap: var(--sv-dot-gap, 8px);
  justify-content: var(--sv-dots-justify, center);
  margin-top: var(--sv-dots-offset, 14px);
}
/* The button is the target and the dot is drawn inside it: WCAG 2.5.8 asks
   24 by 24 CSS pixels of target, an 8px dot with 8px gaps had a third of
   that. --sv-dot-size still sizes what you see, --sv-dot-target what you hit. */
.sv-dot {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--sv-dot-target, 24px);
  height: var(--sv-dot-target, 24px);
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}
.sv-dot::before {
  content: '';
  width: var(--sv-dot-size, 8px);
  height: var(--sv-dot-size, 8px);
  border-radius: 999px;
  background: var(--sv-dot-color, rgba(128, 128, 128, 0.35));
  transition: background 300ms, scale 300ms;
}
.sv-dot.on::before {
  background: var(--sv-dot-active, currentColor);
  scale: 1.25;
}

@media (prefers-reduced-motion: reduce) {
  .sv-dot::before {
    transition: none;
  }
}

/* The same under the page's own switch, html[data-sv-motion="reduce"]
   (core/motion.ts): a test keeps every rule in step with the block above. */
:where([data-sv-motion="reduce"]) .sv-dot::before {
  transition: none;
}