/*

The core CSS

A minimal layer to make the carousel work.

Custom properties (or "CSS variables") fall back to default values.

Find examples of how to customize the carousel with CSS here:

[Link to docs - coming soon]

*/

.carosans {
  --position: 0;
  --sumGaps: calc(var(--gapSize, 0rem) * (var(--numOfSlidesInView, 0)));
  --distributableSpace: calc(100% - var(--sumGaps));
  --slideWidth: calc(var(--distributableSpace) / ((var(--numOfSlidesInView, 1) + 1) - (1 - var(--endSlideVis, 0))));
  --distanceToNext: calc(var(--slideWidth) + var(--gapSize, 0rem));
  --lastSlideWidth: calc(var(--slideWidth) * (1 - var(--lastSlideVis, 0)));
  --translateX: calc(-1 * var(--distanceToNext) * var(--position));

  overflow: hidden;
}

.carosans > ul {
  transform: translate3d(var(--translateX), 0, 0);
  list-style: none;
  padding-left: 0;
  display: flex;
  touch-action: pan-y;
}

.carosans > ul > li {
  min-width: calc(var(--slideWidth));
  margin-right: var(--gapSize, 0rem);
}

.carosans > ul > li:last-child {
  margin-right: 0;
}

.carosans img {
  max-width: 100%;
}

.carosans-transitioning {
  transition-property: transform;
  transition-duration: var(--transitionDuration, .3s);
  transition-timing-function: var(--transitionTiming, ease);
}