/**
 * Shared carousel parts: scrolling track, progress line and arrows.
 * Used by the Leadership Carousel and Logo Carousel blocks; behaviour in
 * assets/scripts/carousel.js.
 *
 * Set --carousel-per-view and --carousel-gap on the block root to size the
 * slides.
 *
 * Plain CSS outside the Sass build; loaded on the front end and in the
 * block editor by AssetsServiceProvider.
 */

[data-xpt-carousel] {
  --carousel-ink: #16201d;
  --carousel-green: #00ce7c;
  --carousel-line: #d5deda;
  --carousel-gap: 20px;
  --carousel-per-view: 5;
}

.xpt-carousel__track {
  display: flex;
  gap: var(--carousel-gap);
  margin: 0;
  padding: 4px 0 8px; /* room for the focus ring */
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.xpt-carousel__track::-webkit-scrollbar { display: none; }

.xpt-carousel__track:focus-visible {
  outline: 3px solid var(--carousel-green);
  outline-offset: 4px;
}

.xpt-carousel__track > li {
  flex: 0 0 calc((100% - (var(--carousel-per-view) - 1) * var(--carousel-gap)) / var(--carousel-per-view));
  margin: 0;
  scroll-snap-align: start;
}

.xpt-carousel__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

[data-xpt-carousel].is-static .xpt-carousel__controls { display: none; }

.xpt-carousel__progress {
  position: relative;
  flex: 1;
  height: 2px;
  margin-right: 12px;
  overflow: hidden;
  background: var(--carousel-line);
}

.xpt-carousel__progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 20%;
  background: var(--carousel-ink);
  transition: transform 0.15s linear;
}

/* :not(#xpt-carousel) outranks the theme's
   button:not(.popmake-close):not(:hover):not(:active)... rules. */
.xpt-carousel__arrow:not(#xpt-carousel) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--carousel-ink);
  border-radius: 2px;
  background: transparent;
  color: var(--carousel-ink);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.xpt-carousel__arrow:not(#xpt-carousel) svg { width: 22px; height: 22px; }

.xpt-carousel__arrow:not(#xpt-carousel):hover:not(:disabled) {
  background: var(--carousel-ink);
  color: #fff;
}

.xpt-carousel__arrow:not(#xpt-carousel):focus-visible {
  outline: 3px solid var(--carousel-green);
  outline-offset: 3px;
}

.xpt-carousel__arrow:not(#xpt-carousel):disabled {
  opacity: 0.3;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .xpt-carousel__track { scroll-behavior: auto; }
  .xpt-carousel__progress-bar,
  .xpt-carousel__arrow:not(#xpt-carousel) { transition: none; }
}