/* ============================================================================
   CrownPreRoll — Scrollbar Badges (production-ready)
   Markup:
     <section class="scrollbar">
       <ul class="scrollbar-badges" data-marquee-speed="60">
         <li class="badge">
           <svg class="icon" aria-hidden="true"><use href="...#leaf"></use></svg>
           <span class="label">THC</span>
         </li>
         ...
       </ul>
     </section>
============================================================================ */

/* ---- Tokens -------------------------------------------------------------- */
:root {
  /* Row layout & visuals */
  --scrollbar-bg: #ffffff;
  --row-pad-y: 0.5rem;
  --row-pad-x: 0;                 /* keep 0 for perfect marquee centering */
  --fade-width: 24px;             /* edge fade for nicer cutoff */

  /* Badge layout */
  --badge-gap: 100px;             /* space between badges */
  --icon-gap: 10px;               /* icon ↔ text gap */
  --icon-size: 18px;
  --stroke-width: 1.8;

  /* Typography */
  --badge-font-size: 15px;
  --badge-color: #0b0b0b;
}

/* ---- Container with edge fade ------------------------------------------- */
.scrollbar {
  background: var(--scrollbar-bg);
  padding: var(--row-pad-y) var(--row-pad-x);
  overflow: hidden;

  /* Edge fade (mask) */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--fade-width),
    #000 calc(100% - var(--fade-width)),
    transparent 100%
  );
          mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--fade-width),
    #000 calc(100% - var(--fade-width)),
    transparent 100%
  );
}

/* ---- Marquee track ------------------------------------------------------- */
.scrollbar-badges {
  display: flex;
  flex-wrap: nowrap;              /* single row */
  gap: var(--badge-gap);
  white-space: nowrap;
  align-items: center;
  will-change: transform;         /* smooth rAF translation */
  backface-visibility: hidden;
  transform: translate3d(0,0,0);  /* JS updates X */
}

/* ---- Badge --------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--icon-gap);
  color: var(--badge-color);
  font-size: var(--badge-font-size);
  line-height: 1;
  white-space: nowrap;
  flex: 0 0 auto;                 /* prevent shrink */
}

.badge .label {
  display: block;
  line-height: 1;
}

/* ---- Icon ---------------------------------------------------------------- */
.icon {
  width: var(--icon-size);
  height: var(--icon-size);
  display: block;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: var(--stroke-width);
  stroke-linecap: round;
  stroke-linejoin: round;
}