/**
 * Brandy theme — slider control variant styles.
 *
 * Visual layer for the variants registered in script.js. Structure (the grouped
 * row, its offsets, the pointer-events dance) lives in the plugin's
 * embla.min.css under the `placement` axis; this file only skins.
 */

/* ---------------------------------------------------------------------------
   nav: blank — naked chevrons.

   Every knob here is already a custom property on .embla__button, so nothing
   fights base specificity. stroke-width is a CSS-overridable SVG presentation
   attribute, which thins the shipped 7x12 chevron without shipping a second
   icon to keep in sync.
   --------------------------------------------------------------------------- */
.embla--nav-blank .embla__button {
  --embla-button-width: 24px;
  --embla-button-height: 24px;
  background: none;
  border: 0;
  box-shadow: none;
  color: inherit;
}

.embla--nav-blank .embla__button:hover {
  background: none;
  box-shadow: none;
  border: 0;
}

.embla--nav-blank .embla__button__svg {
  width: 12px;
  height: 12px;
}

.embla--nav-blank .embla__button__svg path {
  stroke: currentColor;
  stroke-width: 1.2;
}

/* ---------------------------------------------------------------------------
   dots: progress-pill — the active bullet is a track a fill sweeps across.

   The dot IS the pill: its own width transitions between the resting size and
   the expanded one, so the row stays tight and the dots after the active one
   slide across as it grows. Reserving a fixed slot per dot would hold every
   position still, but only by spacing the resting dots a full pill-width
   apart — an airier row than this design wants. The sideways travel is the
   accepted cost of the tight spacing.

   Two pseudo-elements, both needed:
     ::before — enlarged touch target (the dot itself is only 10px)
     ::after  — the fill sweeping across the track
   Hence no `overflow: hidden` on the dot: it would clip ::before and silently
   destroy that target. Nothing needs the clipping — the fill never exceeds
   100% of the track and carries the same radius.
   --------------------------------------------------------------------------- */
.embla__dots--progress-pill {
  margin-top: 0;
  gap: var(--embla-dot-gap, 6px);
}

.embla__dots--progress-pill .embla__dot {
  width: var(--embla-dot-size, 10px);
  height: var(--embla-dot-size, 10px);
  border-radius: 999px;
  position: relative;
  padding: 0;
  background: var(--embla-pagination-bullet-color, rgba(255, 255, 255, 0.4));
  transition: width var(--embla-dot-expand-duration, 0.3s) ease,
    background-color var(--embla-dot-expand-duration, 0.3s) ease;
}

/* Lifts a 10px bullet to a 24px-tall target (WCAG 2.2 AA 2.5.8). Widened only
   by half the gap on each side so neighbouring targets meet without
   overlapping — an overlap would hand clicks to whichever dot painted last. */
.embla__dots--progress-pill .embla__dot::before {
  content: "";
  position: absolute;
  inset: -7px calc(var(--embla-dot-gap, 6px) / -2);
}

.embla__dots--progress-pill .embla__dot--selected {
  width: var(--embla-dot-active-width, 50px);
  background: var(--embla-pagination-bullet-track-color, rgba(255, 255, 255, 0.2));
}

/* Nothing advancing means nothing to visualise, so the pill is simply solid
   rather than a track waiting for a fill that never comes. */
.embla__dots--progress-pill:not(.is-filling) .embla__dot--selected {
  background: var(--embla-pagination-bullet-color-active, #ffffff);
}

/*
 * The fill exists on every dot at zero width so that losing `--selected` fades
 * it out instead of popping it: the animation stops applying, width snaps back
 * to 0, and the opacity transition covers that frame.
 *
 * It restarts for free — the class leaves the old bullet and lands on the new
 * one, remounting the pseudo-element with its animation at frame zero.
 *
 * `width` rather than `transform: scaleX()`: scaling squashes the fill's own
 * leading radius inside a pill-shaped track. At a handful of 32px dots the
 * paint cost of animating width is irrelevant.
 */
.embla__dots--progress-pill .embla__dot::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: var(--embla-pagination-bullet-color-active, #ffffff);
  opacity: 0;
  transition: opacity var(--embla-dot-expand-duration, 0.3s) ease;
}

.embla__dots--progress-pill.is-filling .embla__dot--selected::after {
  opacity: 1;
}

/*
 * TIMED PAGING — the fill is a clock.
 *
 * Delayed by exactly the expand duration and shortened by the same amount, so
 * the sweep starts on a track that has finished growing and still lands on the
 * slide change. Without that offset the fill animates a percentage of a box
 * that is itself still widening, and the leading edge visibly stutters through
 * the first third of a second.
 */
.embla__dots--progress-pill.is-filling:not(.is-tracking)
  .embla__dot--selected::after {
  animation: brandy-dot-fill
    max(
      0s,
      calc(
        var(--embla-dot-fill-duration) - var(--embla-dot-expand-duration, 0.3s)
      )
    )
    linear var(--embla-dot-expand-duration, 0.3s) forwards;
}

.embla__dots--progress-pill.is-paused .embla__dot--selected::after {
  animation-play-state: paused;
}

/*
 * CONTINUOUS SCROLL — the fill is a position readout.
 *
 * No animation and no width transition: script.js writes the progress every
 * frame the carousel moves, so the value is already continuous. Transitioning
 * it would add lag between the slides and the indicator supposedly reporting
 * where they are.
 */
.embla__dots--progress-pill.is-tracking .embla__dot--selected::after {
  animation: none;
  width: calc(var(--embla-dot-fill-progress, 0) * 100%);
}

@keyframes brandy-dot-fill {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* A bar sweeping on a timer is exactly the kind of unattended motion the
   setting exists for; show the end state instead of the journey. */
@media (prefers-reduced-motion: reduce) {
  .embla__dots--progress-pill .embla__dot,
  .embla__dots--progress-pill .embla__dot::after {
    transition: none;
  }

  .embla__dots--progress-pill.is-filling:not(.is-tracking)
    .embla__dot--selected::after {
    animation: none;
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   dots: progressbar — one hairline track for the whole slider.

   `.embla__dots` IS the track; the span inside is the fill. Because the
   renderer owns that container, no block needs new markup and the variant
   works anywhere the dots axis does.

   `flex: 1` is what makes a grouped placement match the reference: inside
   `.embla__controls` the bar stretches to fill everything the arrows leave,
   so the row reads `‹ ——————— ›`. Outside a flex row it is a plain block and
   spans the slider's width instead.
   --------------------------------------------------------------------------- */
/*
 * Deliberately does NOT set `display` or `margin-top`. The base rule resolves
 * display from --embla-pagination-display, which is how Testimonials hides its
 * pagination while still rendering the container — overriding it here would
 * show a bar the editor had switched off. Grouped placement already zeroes the
 * margin, and outside it the base 20px offset is the right spacing anyway.
 */
.embla__dots.embla__dots--progressbar {
  flex: 1;
  position: relative;
  min-width: 0;
  height: var(--embla-progressbar-height, 2px);
  border-radius: var(--embla-progressbar-radius, 0);
  background: var(--embla-progressbar-track-color, rgba(0, 0, 0, 0.1));
  overflow: hidden;
}

/*
 * scaleX on a full-width fill rather than an animated `width`: this one is a
 * flat 2px bar with square ends, so there is no leading radius for the scale
 * to distort, and the transform stays on the compositor while a slider drags.
 */
.embla__dots--progressbar .embla__progressbar__fill {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  transform: scaleX(var(--embla-progressbar-progress, 0));
  transform-origin: left center;
  border-radius: inherit;
  background: var(--embla-progressbar-fill-color, currentColor);
  transition: transform var(--embla-progressbar-transition, 0.3s) ease;
}

/* Continuous drift already updates every frame; transitioning would put the
   bar behind the strip it is reporting on. */
.embla__dots--progressbar.is-tracking .embla__progressbar__fill {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .embla__dots--progressbar .embla__progressbar__fill {
    transition: none;
  }
}