/*
 * carouselDots en carouselArrows — de bediening van een veegvlak.
 *
 * `carousel.js` zet de knoppen in de lege blokken. Zonder JavaScript blijven die
 * leeg — knoppen die niets doen horen niet in de HTML (§6) — en blijft het
 * veegvlak zelf gewoon werken. De blokken staan wél in de HTML en houden hun
 * hoogte uit deze CSS, zodat er niets verspringt zodra het script klaar is
 * (CLS = 0, §9).
 *
 * ------------------------------------------------------------------
 * De stipjes
 * ------------------------------------------------------------------
 *
 * In de gewone vorm zijn ze een toevoeging op verzoek van de gebruiker en niet
 * iets van samdesign.nl (R9, zie docs/beslissingen.md): daar is op mobiel niets
 * te zien dat verraadt dat een rij kaarten verder loopt dan het scherm. Ze staan
 * dan alleen onder 768px, want daarboven passen de kaarten naast elkaar of
 * blijft er minder dan een kaart te schuiven over, en dan kan niet elke stip
 * meer bij zijn kaart komen — zie de bereikbaarheidstoets in carousel.js, die op
 * dezelfde grens uitkomt.
 *
 * `carouselDotsRound` is de andere vorm: die staat wél op elke breedte, want de
 * procesrij op samdesign.nl heeft daar zijn stipjes ook (§26). Zie onderaan.
 */

.carouselDots {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  margin-top: 30px;
}

@media (max-width: 767px) {
  .carouselDots {
    display: flex;
  }
}

.carouselDotList {
  display: flex;
  align-items: center;
  gap: 10px;
}

/*
 * De knop is 24 bij 24 — een aanraakvlak dat te raken is — en het stipje
 * eronder is de tekening. Dat scheelt een element per stip.
 */
.carouselDot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
}

.carouselDot::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: var(--carouselDotColor, #0920412e);
  transition: width 0.3s, background-color 0.3s;
}

/*
 * De kaart waar je nu staat: een roze streepje in plaats van een stip. Het hangt
 * aan één attribuut dat erbij en eraf gaat, dus doet CSS de overgang en niet
 * Motion (§8).
 */
.carouselDot[aria-current='true']::before {
  width: 28px;
  background: var(--colorPink);
}

.carouselDot:focus-visible {
  outline-offset: 2px;
}

/* ------------------------------------------------------------------
   De ronde stipjes van de procesrij
   ------------------------------------------------------------------ */

/*
 * 1-op-1 van samdesign.nl (§26): 12px rond, 6px ertussen, gecentreerd onder de
 * rij, en 10px lucht erboven en eronder. Ze staan op elke breedte, en er is er
 * één per stand waar de rij op kan komen te staan in plaats van één per kaart —
 * dat rekenwerk doet carousel.js.
 *
 * De stand waar je bent is daar een rondje in de basiskleur van het thema. Op
 * samdesign.nl is dat sinds de overstap van Slick naar Swiper het felblauw dat
 * Swiper standaard meebrengt; wij nemen de kleur die in de instellingen van die
 * sectie staat (docs/beslissingen.md).
 *
 * De knop is 18 bij 18 in plaats van 24: dan is de afstand tussen twee stipjes
 * de 6px van daar, zonder dat de knop kleiner wordt dan het stipje zelf.
 */
.carouselDotsRound {
  display: flex;
  min-height: 18px;
  margin-block: 10px;

  --carouselDotColor: #00000020;
}

.carouselDotsRound .carouselDotList {
  gap: 0;
}

.carouselDotsRound .carouselDot {
  min-width: 18px;
  height: 18px;
}

.carouselDotsRound .carouselDot::before {
  width: 12px;
  height: 12px;
}

.carouselDotsRound .carouselDot[aria-current='true']::before {
  width: 12px;
  background: var(--colorNavy);
}

/* ------------------------------------------------------------------
   De pijlen
   ------------------------------------------------------------------ */

/*
 * Twee ronde knoppen bóven de rij, links en rechts. 1-op-1 van de procesrij op
 * samdesign.nl (§26): 68 bij 68, een lijntje van 1px eromheen, en onder de muis
 * loopt de cirkel vol met donkerblauw. Het pijltje blijft dan die kleur en houdt
 * zijn witte omtrek, waardoor het juist oplicht in plaats van te verdwijnen.
 *
 * De tekening zit in een pseudo-element en niet in een `<svg>` in de knop: de
 * kleuren staan vast (ook onder de muis), dus is het een plaatje en geen inhoud,
 * en dan hoeft het script alleen een `<button>` te maken.
 *
 * `top` staat hier omdat hij bij elke rij gelijk is; hoe ver de knoppen van de
 * randen van de rij staan, staat bij het component — dat hangt aan de rij.
 */
.carouselArrow {
  position: absolute;
  top: -100px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  padding: 0;
  border: 1px solid var(--colorNavyMenu);
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.carouselArrow:hover {
  background: var(--colorNavy);
}

.carouselArrow::before {
  content: '';
  width: 26px;
  height: 26px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27.037' height='23.077' viewBox='0 0 27.037 23.077'%3E%3Cpath d='M5.854,14.95l8.773-8.773,1.315,1.315L7.356,16.078H31.037v1.86H7.353l8.589,8.587L14.626,27.84,5.854,19.069a2.909,2.909,0,0,1,0-4.118Z' transform='translate(-4.5 -5.47)' fill='%23092041' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Dezelfde tekening, gespiegeld — precies zoals daar. */
.carouselArrowNext::before {
  transform: scaleX(-1);
}

/*
 * Passen alle kaarten tóch naast elkaar, dan hoort er geen indicator te staan.
 * Deze regel komt ná de vormen hierboven, want ze wegen even zwaar en dan
 * beslist de volgorde.
 */
.carouselDotsEmpty {
  display: none;
}