/**
 * REEL PRIMITIVE
 * Based on Every Layout's Reel
 * Creates horizontal scrolling containers for overflow content
 *
 * Features:
 * - Flexbox-based horizontal scrolling layout
 * - Items don't shrink (flex: 0 0 auto)
 * - Margin-based spacing instead of gap for Every Layout consistency
 * - Custom scrollbar styling with webkit pseudo-elements
 * - Special handling for child images to maintain aspect ratio
 * - Overflowing class adds padding for scrollbar space
 * - Logical properties for internationalization
 *
 * Usage:
 * .reel - Basic horizontal scroll container
 * .reel.overflowing - Adds bottom padding when scrollbar present
 * .reel[data-reel="vertical"] - Vertical scrolling variant
 * .reel[data-reel-snap="enabled"] - Scroll snap for item-by-item scrolling
 *
 * Example:
 * <div class="reel">
 *   <img src="1.jpg" alt="">
 *   <img src="2.jpg" alt="">
 *   <img src="3.jpg" alt="">
 * </div>
 */

.reel {
  display: flex;
  block-size: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: var(--txt, #000) var(--mute, #f4f4f4);
}

/* Custom scrollbar styling for webkit browsers */
.reel::-webkit-scrollbar {
  block-size: 1rem;
}

.reel::-webkit-scrollbar-track {
  background-color: var(--mute, #f4f4f4);
}

.reel::-webkit-scrollbar-thumb {
  background-color: var(--txt, #000);
  background-image: linear-gradient(
    var(--txt, #000) 0,
    var(--txt, #000) 0.25rem,
    var(--bg, #fff) 0.25rem,
    var(--bg, #fff) 0.75rem,
    var(--txt, #000) 0.75rem
  );
}

/* Items don't shrink - they maintain their natural size */
.reel > * {
  flex: 0 0 auto;
}

/* Images maintain their height and auto width */
.reel > img {
  block-size: 100%;
  flex-basis: auto;
  width: auto;
}

/* Margin-based spacing between items (Every Layout approach) */
.reel > * + * {
  margin-inline-start: var(--reel-space, 1rem);
}

/* Add padding when scrollbar is present */
.reel.overflowing {
  padding-block-end: 1rem;
}

/* ========================================
   DATA ATTRIBUTE VARIANTS
   Scrolling configurations
   ======================================== */

/* Vertical scrolling - reels can go sideways too */
.reel[data-reel="vertical"] {
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Vertical spacing with margin */
.reel[data-reel="vertical"] > * + * {
  margin-inline-start: 0;
  margin-block-start: var(--reel-space, 1rem);
}

/* Vertical padding when overflowing */
.reel[data-reel="vertical"].overflowing {
  padding-block-end: 0;
  padding-inline-end: 1rem;
}

/* Scroll snap - for item-by-item scrolling */
.reel[data-reel-snap="enabled"] {
  scroll-snap-type: x mandatory;
}
.reel[data-reel-snap="enabled"] > * {
  scroll-snap-align: start;
}

/* Vertical snap */
.reel[data-reel="vertical"][data-reel-snap="enabled"] {
  scroll-snap-type: y mandatory;
}