/**
 * OCO Marquee – Base styles
 *
 * @package Ocoweb
 */

/* ═══════════════════════════════════════════════════════════════════════
   Container
   ═══════════════════════════════════════════════════════════════════════ */

.oco-marquee {
  overflow: hidden;
  display: flex;
  position: relative;
}

.oco-marquee--horizontal {
  width: 100%;
  flex-direction: row;
}

.oco-marquee--vertical {
  height: 100%;
  flex-direction: column;
}

/* ═══════════════════════════════════════════════════════════════════════
   Track (moves via GSAP xPercent / yPercent)
   ═══════════════════════════════════════════════════════════════════════ */

.oco-marquee__track {
  display: flex;
  flex-shrink: 0;
  will-change: transform;
}

.oco-marquee--horizontal .oco-marquee__track {
  flex-direction: row;
  width: max-content;
}

.oco-marquee--vertical .oco-marquee__track {
  flex-direction: column;
  height: max-content;
}

/* ═══════════════════════════════════════════════════════════════════════
   Group (one copy of the children)
   ═══════════════════════════════════════════════════════════════════════ */

.oco-marquee__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.oco-marquee--horizontal .oco-marquee__group {
  flex-direction: row;
}

.oco-marquee--vertical .oco-marquee__group {
  flex-direction: column;
}