/**
 * 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.
   --------------------------------------------------------------------------- */
/*
 * `background` and `color` defer to the per-instance override before falling
 * back to this variant's own model. Naked-and-inheriting is what `blank` is
 * FOR, so it stays the default — but an author who picks an arrow colour on a
 * single slider has to be able to win, and these declarations outrank the
 * plugin's token-driven ones.
 *
 * --embla-nav-* rather than --embla-button-*: the latter are seeded on `.embla`
 * in embla.min.css and so are always defined, which would make `inherit` here
 * unreachable and freeze every blank slider at the brand default.
 */
.embla--nav-blank .embla__button {
  --embla-button-width: 24px;
  --embla-button-height: 24px;
  background: var(--embla-nav-bg-color, none);
  border: 0;
  box-shadow: none;
  color: var(--embla-nav-icon-color, inherit);
}

.embla--nav-blank .embla__button:hover {
  background: var(--embla-nav-bg-color-hover, var(--embla-nav-bg-color, none));
  box-shadow: none;
  border: 0;
  color: var(
    --embla-nav-icon-color-hover,
    var(--embla-nav-icon-color, inherit)
  );
}

.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-dots-color,
    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-dots-track-color,
    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-dots-color-active,
    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. `min-width` then resolves
 * that to the resting circle, so the fade-out shrinks nothing.
 *
 * 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;
  /*
   * A pill cannot be narrower than it is tall. Below that width the browser
   * scales `border-radius: 999px` down to half the *width*, so the first ~10px
   * of every sweep paints as a square-cornered sliver instead of a rounded cap.
   * Flooring the fill at the dot's own height makes it start life as the same
   * circle the resting dot already is, and grow out of it.
   */
  min-width: var(--embla-dot-size, 10px);
  border-radius: 999px;
  background: var(
    --embla-dots-color-active,
    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;
}

/*
 * Carries `.is-filling` only to outweigh the rule above: that one sets the
 * `animation` shorthand, which resets play-state to running, and matches one
 * class more than a bare `.is-paused` would. Without the extra class the
 * hover pause stops the slider but leaves its fill sweeping on, so the
 * indicator finishes a countdown nothing is running.
 */
.embla__dots--progress-pill.is-filling.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;
  /* Remapped onto [dot-size, 100%] for the same reason the keyframes are: below
     the floor the readout would sit still while the slides actually moved. */
  width: calc(
    var(--embla-dot-size, 10px) + var(--embla-dot-fill-progress, 0) *
      (100% - var(--embla-dot-size, 10px))
  );
}

/*
 * Starts at the dot's own width, not 0. The fill can never paint narrower than
 * that anyway (see `min-width` above), so sweeping from 0 would spend the first
 * fifth of the animation clamped — a stationary circle before any visible
 * travel. Beginning at the floor makes the leading edge move on frame one.
 */
@keyframes brandy-dot-fill {
  from {
    width: var(--embla-dot-size, 10px);
  }
  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-dots-track-color,
    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-dots-color-active,
    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;
}

/*
 * TIMED PAGING — the bar is a clock.
 *
 * Swept by an animation rather than by the progress variable: the value the
 * variable carries is a position, and paging has no position to report between
 * slide changes. Duration is the autoplay delay, so the bar lands full exactly
 * as the slide turns over, and `forwards` holds it there through the change
 * rather than snapping back before the next slide has arrived.
 */
@keyframes brandy-progressbar-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.embla__dots--progressbar.is-filling .embla__progressbar__fill {
  animation: brandy-progressbar-fill var(--embla-progressbar-duration, 5s)
    linear forwards;
  transition: none;
}

/*
 * Carries `.is-filling` for the same reason the pill's pause rule does: the
 * rule above sets the `animation` shorthand, which resets play-state to
 * running and matches one class more than a bare `.is-paused` would. Without
 * it the hover pause stops the slider while the bar sweeps on regardless.
 */
.embla__dots--progressbar.is-filling.is-paused .embla__progressbar__fill {
  animation-play-state: paused;
}

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

  /* A five-second sweep is the kind of movement the setting exists to stop.
     The slide still turns over on its own; only the animation of it goes. */
  .embla__dots--progressbar.is-filling .embla__progressbar__fill {
    animation: none;
  }
}