Scrolling banner

/*------------------------------------*\
  Scrolling banner

  Slideshow orizzontale (Owl Carousel):
  - transizione slide sinistra/destra
  - indicatori dot circolari
  - frecce laterali
  - autoplay 4s
\*------------------------------------*/

// Usato come contenuto della variante foldable-banner--carousel: lo sfondo
// e il padding li fornisce il foldable-banner esterno; qui solo il layout
// della singola slide (immagine + testo + cta opzionale).
$scrollingBannerArrowSize: 28px;

.c-scrolling-banner {
  position: relative;
}

// Owl affianca le slide in .owl-item con altezza pari al loro contenuto:
// sul mobile (testi di lunghezza diversa) le slide risultano disallineate.
// Con flex sullo stage tutte le .owl-item prendono l'altezza della più alta.
.c-scrolling-banner .owl-stage {
  display: flex;
}

.c-scrolling-banner .owl-item {
  display: flex;
}

/*------------------------------------*\
  Slide (immagine + testo + cta)
\*------------------------------------*/

.c-scrolling-banner__slide {
  display: flex;
  // Riempie l'.owl-item (flex) in larghezza; l'altezza piena è data dallo
  // stretch flex, così la slide occupa tutta l'altezza della più alta.
  width: 100%;
  gap: remify(16px);
  align-items: center;
  justify-content: center;
  // Default non trasparente; sovrascrivibile per slide con classi utility
  // (es. u-bg-color-* / u-color-*) passate via prop `cssClass`.
  background-color: primary(sky, 120);
  // Colore testo di default ereditato da testo e cta; una utility u-color-*
  // sulla slide lo sovrascrive (design-tokens.css vince per ordine).
  color: secondary(basic-white, 100);
  // Spazio interno + margine per non finire sotto le frecce laterali.
  padding-block: remify(16px);
  padding-inline: remify($scrollingBannerArrowSize + 24px);

  @include min-screen(bp(tablet)) {
    padding-block: remify(24px);
  }
}

.c-scrolling-banner__image {
  display: none;

  @include min-screen(bp(phablet)) {
    display: block;
  }

  img {
    max-width: remify(60px);
    height: auto;
  }
}

.c-scrolling-banner__text {
  @include font-scale(level-1-5);
  color: inherit;

  @include min-screen(bp(tablet)) {
    @include font-scale(level-2);
  }

  a {
    color: currentColor;
  }
}

.c-scrolling-banner__cta {
  flex-shrink: 0;
}

/*------------------------------------*\
  Frecce laterali (Owl nav)
\*------------------------------------*/

.c-scrolling-banner__nav {
  .c-scrolling-banner__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: remify($scrollingBannerArrowSize);
    height: remify($scrollingBannerArrowSize);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(secondary(basic-white, 100), .25);
    color: secondary(basic-white, 100);
    cursor: pointer;
    z-index: 2;
    transition: background .25s ease;

    &:hover {
      background: rgba(secondary(basic-white, 100), .4);
    }

    &.disabled {
      display: none;
    }

    // Glifo ‹ / › wrappato in span: line-height:1 + flex centrano il
    // carattere nel cerchio in modo affidabile.
    span {
      display: block;
      font-size: remify(20px);
      line-height: 1;
      position: relative;
      top: remify(-2px);
    }
  }

  .c-scrolling-banner__arrow--prev {
    left: remify(12px);
  }

  .c-scrolling-banner__arrow--next {
    right: remify(12px);
  }
}

/*------------------------------------*\
  Indicatori (Owl dots)
\*------------------------------------*/

.c-scrolling-banner__dots {
  position: absolute;
  bottom: remify(10px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: remify(7px);
  z-index: 1;

  .c-scrolling-banner__dot span {
    display: block;
    width: remify(8px);
    height: remify(8px);
    border-radius: 50%;
    background: rgba(secondary(basic-white, 100), .45);
    transition: background .25s ease, transform .25s ease;
  }

  .c-scrolling-banner__dot.active span {
    background: secondary(basic-white, 100);
    transform: scale(1.25);
  }
}