/* Lagos Life chip row. Owner 5c. Spec: buttons.html#chip.
   Markup: <div class="ll-chip-row" role="group" aria-label="Things to do" data-fade="end">…chips…</div>
   Scrolls sideways. A 24px fade shows at each side that has more chips (set by chip-row.js via data-fade).
   The fade is a mask, so it works on glass, paper and the world without knowing the colour behind. */

.ll-chip-row {
  --_fade-start: currentColor;
  --_fade-end: currentColor;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--space-1-5);
  /* 6px padding keeps the 3px focus ring + 2px offset inside the scroll box; the margin gives the space back. */
  padding: var(--space-1-5);
  margin: calc(var(--space-1-5) * -1);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--chip-row-fade);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, var(--_fade-start), currentColor var(--chip-row-fade), currentColor calc(100% - var(--chip-row-fade)), var(--_fade-end));
  mask-image: linear-gradient(to right, var(--_fade-start), currentColor var(--chip-row-fade), currentColor calc(100% - var(--chip-row-fade)), var(--_fade-end));
}
.ll-chip-row::-webkit-scrollbar { display: none; }
.ll-chip-row[data-fade="start"], .ll-chip-row[data-fade="both"] { --_fade-start: transparent; }
.ll-chip-row[data-fade="end"], .ll-chip-row[data-fade="both"] { --_fade-end: transparent; }