/* ==========================================================================
   Business Radar – Slider / Pagination Dots
   Reusable across carousels (case-studies, testimonials, facts, photo-slider,
   related-slider, header-slider).

   Figma (Copy SOUYT0WeK4MjkMkQnUsyv4): facts mob 442:17973, cases mob 442:18013.
   Dot = 12px solid filled circle, gap ~16px. Active = full opacity,
   inactive = 30% opacity (NOT outline/fill toggle, NOT a widened pill).

   Color via `--px-dots-color` custom property — override per instance:
     .my-module__dots { --px-dots-color: var(--Wit); }
   or inline:
     <div class="px-dots" style="--px-dots-color: #ff0000;">

   Default = dark dots (--Zwart) for light backgrounds.
   Convenience variant `.px-dots--light` = white dots for dark backgrounds.
   ========================================================================== */

.px-dots {
  --px-dots-color: var(--Zwart);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--D15); /* Figma: dot center-to-center 27.87px − 12px ≈ 16px */
  color: var(--px-dots-color);
}

.px-dots__dot {
  /* Figma: 12px solid circle. Fixed UI primitive (not layout spacing) so a
     literal px size is used, same as the old 20px literal it replaces. */
  width: 12px;
  height: 12px;
  border-radius: var(--RFull);
  border: 0;
  background: currentColor;
  color: inherit;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.3; /* Figma: inactive dots are the same fill at 30% */
  transition: opacity var(--px-duration-fast) var(--px-ease-out);
}

.px-dots__dot.is-active,
.px-dots__dot[aria-selected="true"] {
  opacity: 1; /* Figma: active dot = same fill at full opacity */
}

.px-dots__dot:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Light variant: white for dark backgrounds */
.px-dots--light {
  --px-dots-color: var(--Wit);
}