/* Converted from src/components/site/ui/Carousel.module.css (CSS Module): local classes are prefixed "ui-carousel__". */
/* One-slide-per-view carousel of the original (home press quotes): arrows in a pill + "1 —— 12". */

.ui-carousel__carousel {
  --carousel-gap: 40px; /* clb-slider item margin */
  position: relative;
}

.ui-carousel__viewport {
  overflow: hidden;
  touch-action: pan-y;
}

/* clb-slider sets an inline `transition: 1s` on its stage: 1s, default `ease` timing. */
.ui-carousel__track {
  display: flex;
  gap: var(--carousel-gap);
  transition: transform 1s ease;
}

.ui-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
}

.ui-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 24px;
}

.ui-carousel__nav {
  display: inline-flex;
  padding: 4px;
  background-color: var(--color-fill);
  border-radius: 40px;
}

.ui-carousel__navButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease);
  position: relative;
  isolation: isolate;
}

.ui-carousel__navButton:hover {
  background-color: var(--color-fill);
}

/* Click ripple of the theme's icon buttons (see Button.module.css). */
.ui-carousel__navButton::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-brand);
  border-radius: 50%;
  transform: scale(0);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .ui-carousel__navButton:focus:not(:focus-visible)::before {
    animation: ui-carousel__nav-click var(--duration) var(--ease);
  }
}

@keyframes ui-carousel__nav-click {
  from {
    transform: scale(1);
    opacity: 0.15;
  }
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.ui-carousel__navButton:disabled {
  opacity: 0.35;
  cursor: default;
  background: transparent;
}

.ui-carousel__navButton svg {
  transition:
    transform var(--duration) var(--ease),
    opacity var(--duration) var(--ease);
}

.ui-carousel__navButton:hover:not(:disabled) svg {
  opacity: 0.75;
  transform: scale(1.06);
}

/* "1 —— 12" (Ohio .clb-slider-count): the current number is centered in a slot as wide as the
   widest number (1rem min) on the left, then a 2.25rem × 2px line with 0.5rem on each side, then
   the total (1rem min). */
.ui-carousel__counter {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 1.5rem;
  margin: 0;
  padding-left: 1rem;
  overflow: hidden;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1.5rem;
}

.ui-carousel__counterCurrent {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 1rem;
  height: 1.5rem;
  overflow: hidden;
  text-align: center;
}

/* invisible copy of the total: gives the slot the width of the widest number */
.ui-carousel__counterSizer {
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

/* .clb-slider-count-current: a column of every number moved by one 1.5rem line per slide
   (inline `transition: .3s`, default `ease`): the old number rolls out as the new one rolls in. */
.ui-carousel__counterColumn {
  display: block;
  transition: transform 0.3s ease;
}

.ui-carousel__counterNumber {
  display: block;
  height: 1.5rem;
}

.ui-carousel__counterLine {
  flex: none;
  width: 2.25rem;
  height: 0.125rem;
  margin: 0 0.5rem;
  background-color: currentColor;
  opacity: 0.75;
}

.ui-carousel__counterTotal {
  min-width: 1rem;
  text-align: center;
}

.ui-carousel__pause {
  margin-left: 4px;
}

/* (Symfony port) The pause button is always rendered when autoplay is set; site--carousel hides it while
   autoplay is off (autoplayMedia not matching, reduced motion), where React did not render it. */
.ui-carousel__pause[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .ui-carousel__track {
    transition: none;
  }

  .ui-carousel__counterColumn {
    transition: none;
  }
}