/**
 * Ondersteunende CSS voor slider-arrow-hover.js.
 *
 * `transform` (wat de animatie gebruikt om het pijltje te verplaatsen)
 * werkt niet altijd betrouwbaar op een puur `display: inline`-element
 * (de standaardwaarde voor een <span>) — vandaar deze regel.
 */
.js-slider-arrow {
	display: inline-block;
}

/* Icoon is van nature rechtswijzend — spiegelen voor "vorige". Staat
   bewust op de <svg> zelf, niet op .js-slider-arrow — die laatste is
   waar de hover-animatie (GSAP, alleen x/opacity) zijn eigen transform
   op zet, dus deze twee botsen sowieso niet met elkaar. */
button[data-carmel-prev] .js-slider-arrow svg {
	transform: scaleX(-1);
}

/**
 * Voorkomt dat het pijltje tijdens de animatie buiten de (meestal
 * ronde) knop uitsteekt — geclipt op de specifieke slider-knoppen zelf
 * ([data-carmel-prev]/[data-carmel-next]), niet op de algemene
 * .wp-element-button-class (die mogelijk ook elders op de site voor
 * iets anders gebruikt wordt).
 */
button[data-carmel-prev],
button[data-carmel-next] {
	overflow: hidden;
}