/* --reel-space, --reel-item-width and --reel-snap are registered
   non-inheriting, so they must be set ON the .reel and never reach a nested
   reel. syntax "*" with no initial value, so var() falls back when unset (a
   relative initial-value would make every browser drop the rule).
   --reel-thumb stays inherited on purpose: a scrollbar colour is a theme. */
@property --reel-space {
  syntax: "*";
  inherits: false;
}

@property --reel-item-width {
  syntax: "*";
  inherits: false;
}

@property --reel-snap {
  syntax: "*";
  inherits: false;
}

.reel {
  /* --reel-item-width is read by the items, which a non-inheriting knob never
     reaches: resolve it here into a private variable the items inherit. Every
     .reel resets it, so a nested reel's items still get their own default.
     Limit: a reel that is ITSELF a direct item of another reel reads its OWN
     --reel-item-width (or auto), not the outer reel's; wrap it in a plain
     element to give it the outer width. */
  --_reel-item-width: var(--reel-item-width, auto);
  display: flex;
  gap: var(--reel-space, var(--space-xs));
  block-size: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: var(--reel-snap, none); /* opt in: --reel-snap: x mandatory */
  scrollbar-color: var(--reel-thumb, currentcolor) transparent;
}

/* Items never grow or shrink (flex: 0 0), so a text item is as wide as its
   unwrapped text: set --reel-item-width to give such items a width. */
.reel > * {
  flex: 0 0 var(--_reel-item-width, auto);
  scroll-snap-align: start;
}

/* More specific than `.reel > *`: images ignore --reel-item-width and take
   their width from the reel's height and their own aspect ratio. */
.reel > img {
  block-size: 100%;
  flex-basis: auto;
  inline-size: auto;
}

/* Styling hook only. Nothing in the framework sets this class; a script that
   detects overflow may add it. */
.reel.overflowing {
  padding-block-end: var(--reel-space, var(--space-xs));
}