/* live-website-lw6: a sideways scrolling row of pills (nv-scrollrow.js). The edge where more pills wait fades out over 32 px, so the
   partly visible pill reads as "there is more" and nothing is cut off silently; at the very start or end that edge is sharp. Only the
   mask changes, never the pills' own colours. Right to left mirrors the edges. */
[data-scrollrow]{--nv-fade:32px;scroll-behavior:auto;overscroll-behavior-inline:contain;scroll-padding-inline:24px}
[data-scrollrow][data-more-end]{-webkit-mask-image:linear-gradient(to right,black calc(100% - var(--nv-fade)),transparent);mask-image:linear-gradient(to right,black calc(100% - var(--nv-fade)),transparent)}
[data-scrollrow][data-more-start]{-webkit-mask-image:linear-gradient(to left,black calc(100% - var(--nv-fade)),transparent);mask-image:linear-gradient(to left,black calc(100% - var(--nv-fade)),transparent)}
[data-scrollrow][data-more-start][data-more-end]{-webkit-mask-image:linear-gradient(to right,transparent,black var(--nv-fade),black calc(100% - var(--nv-fade)),transparent);mask-image:linear-gradient(to right,transparent,black var(--nv-fade),black calc(100% - var(--nv-fade)),transparent)}
[dir=rtl] [data-scrollrow][data-more-end]{-webkit-mask-image:linear-gradient(to left,black calc(100% - var(--nv-fade)),transparent);mask-image:linear-gradient(to left,black calc(100% - var(--nv-fade)),transparent)}
[dir=rtl] [data-scrollrow][data-more-start]{-webkit-mask-image:linear-gradient(to right,black calc(100% - var(--nv-fade)),transparent);mask-image:linear-gradient(to right,black calc(100% - var(--nv-fade)),transparent)}
[dir=rtl] [data-scrollrow][data-more-start][data-more-end]{-webkit-mask-image:linear-gradient(to right,transparent,black var(--nv-fade),black calc(100% - var(--nv-fade)),transparent);mask-image:linear-gradient(to right,transparent,black var(--nv-fade),black calc(100% - var(--nv-fade)),transparent)}