/* Base class can be replaced by another selector if desired. */
.continuos-slider-loop {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
  -webkit-touch-callout: none;
  -ms-touch-action: pan-y;
  cursor: grab;
}
.continuos-slider-loop.csl-dragging { cursor: grabbing; -webkit-user-select: none; user-select: none; }
.continuos-slider-loop > .csl-track {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  gap: var(--csl-gap, 24px);
  flex: 0 0 auto;
  width: max-content;
  max-width: none;
  will-change: transform;
}
.continuos-slider-loop > .csl-track > * { flex: 0 0 auto; }
.continuos-slider-loop > .csl-track img { -webkit-user-drag: none; }
.continuos-slider-loop.csl-insufficient { cursor: default; }

/* Prevent native image/link dragging on touch while keeping link taps. */
.continuos-slider-loop .csl-track { touch-action: pan-y; }

/* In UX Builder, leave the Stack under the editor's layout control. */
[ng-app="uxBuilder"] .continuos-slider-loop {
  overflow: visible;
  cursor: auto;
  touch-action: auto;
}

/* Safari/iOS: native horizontal gestures must not steal a slider drag.
   Leave pan-y enabled for normal page scrolling. */
.continuos-slider-loop.csl-ready,
.continuos-slider-loop.csl-ready .csl-track,
.continuos-slider-loop.csl-ready .csl-track * {
  touch-action: pan-y;
}
.continuos-slider-loop.csl-dragging,
.continuos-slider-loop.csl-dragging * {
  -webkit-user-select: none;
  user-select: none;
}

/* iOS: suppress selection/callouts inside the draggable area.
   Taps on normal links continue working. */
.continuos-slider-loop.csl-ready .csl-track,
.continuos-slider-loop.csl-ready .csl-track * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}