/**
 * @file
 * Visual styles for the view-driven front-page slideshow.
 *
 * The Splide module ships its own pagination styling, which assumes the dots
 * sit over a photograph. Here they sit over the pale caption panel below the
 * image, where a white active dot is invisible.
 *
 * Scoped to .splide--view so the in-article gallery (.splide--field, styled in
 * node-images.css) is untouched.
 */

/* The pagination is absolutely positioned over the slide, so the slide has to
   reserve room for it -- without this the dots overlap the headline rather
   than sitting below it. */
.splide--view .splide__slide .node__content {
  padding-bottom: 34px;
}

.splide--view .splide__pagination {
  bottom: 10px;
  gap: 8px;
}

.splide--view .splide__pagination__page {
  width: 9px;
  height: 9px;
  margin: 0;
  background: #b4b4b4;
  opacity: 1;
}

/* White at 70% opacity against the caption panel read as no dot at all. The
   primary colour is the one thing guaranteed to contrast with it on every
   colour scheme. */
.splide--view .splide__pagination__page.is-active {
  background: var(--color-primary, #3f3f3f);
  opacity: 1;
  transform: scale(1.3);
}

.splide--view .splide__pagination__page:hover,
.splide--view .splide__pagination__page:focus {
  background: var(--color-primary-light, #6f6f6f);
  opacity: 1;
}