/* ============================================================
   v2 slider dots — round dots under a uk-slider, the active one
   coloured. Markup: components/v2/slider-dots.html.twig (a
   uk-slider-nav list, items built by UIkit). Shared by the home
   differentials, the training class / compete carousels and the
   v2 reviews. Not the dash + "Desliza" nav (css/v2/slider-nav.css).
   Source: maquette Web Movil l.117 (8x8 dot, 14px above). Each dot is
   the centre of a 24x24 tap area (WCAG target size), so the dots are
   24px apart (16px visual gap).

   Colours: --bf-dots-c (idle) / --bf-dots-c-active, gold by default,
   .bf-slider-dots--ink for black; a page may set the two properties.
   ============================================================ */

.bf-slider-dots {
  --bf-dots-c: rgba(0, 0, 0, .15);
  --bf-dots-c-active: var(--bf-c-gold);
}

.bf-slider-dots--ink {
  --bf-dots-c: rgba(0, 0, 0, .2);
  --bf-dots-c-active: var(--bf-c-black);
}

/* Doubled class to beat UIkit's list defaults. The 24px tap areas reach 8px above and below
   their dot: padding-top 6 keeps the dot 14px under the track (maquette), margin-bottom −8 keeps
   what follows where it was. */
.bf-slider-dots.bf-slider-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin: 0 0 -8px;
  padding: 6px 0 0;
  list-style: none;
}

/* UIkit hides the items past the last reachable slide with [hidden]: keep that over display. */
.bf-slider-dots > li[hidden] {
  display: none;
}

/* Items generated by UIkit: <li uk-slider-item="n"><a href></a></li>. The link is the 24x24
   tap area, the dot its centred ::before. */
.bf-slider-dots > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 0;
}

.bf-slider-dots > li > a::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bf-dots-c);
  transition: background-color var(--bf-dur) var(--bf-ease);
}

.bf-slider-dots > li.uk-active > a::before {
  background: var(--bf-dots-c-active);
}

/* Focus ring around the dot, not the tap area. */
.bf-slider-dots > li > a:focus-visible {
  outline: none;
}

.bf-slider-dots > li > a:focus-visible::before {
  outline: 2px solid var(--bf-c-gold);
  outline-offset: 3px;
}