.horizontal-scroll-fade{position:relative;width:100%;min-width:0;overflow:visible;--scroll-fade-surface:var(--background)}.horizontal-scroll-fade[data-surface=muted]{--scroll-fade-surface:var(--muted)}.horizontal-scroll-fade[data-surface=card]{--scroll-fade-surface:var(--card)}.horizontal-scroll-fade__scroller{display:flex;width:100%;gap:1rem;overflow-x:auto;align-items:flex-start;padding-block-end:.25rem;-ms-overflow-style:none;scrollbar-width:none}.horizontal-scroll-fade__scroller::-webkit-scrollbar{display:none}.horizontal-scroll-fade:after,.horizontal-scroll-fade:before{content:"";position:absolute;inset-block:0;z-index:30;width:3.5rem;pointer-events:none;border-radius:0;opacity:0;transition:opacity var(--duration-color) var(--easing-color)}@media (min-width:640px){.horizontal-scroll-fade:after,.horizontal-scroll-fade:before{width:5rem}}.horizontal-scroll-fade:before{inset-inline-start:0;background:linear-gradient(to right,hsl(var(--scroll-fade-surface)) 0,hsl(var(--scroll-fade-surface)) 12%,color-mix(in srgb,hsl(var(--scroll-fade-surface)) 72%,transparent) 45%,transparent 100%)}.horizontal-scroll-fade:after{inset-inline-end:0;background:linear-gradient(to left,hsl(var(--scroll-fade-surface)) 0,hsl(var(--scroll-fade-surface)) 12%,color-mix(in srgb,hsl(var(--scroll-fade-surface)) 72%,transparent) 45%,transparent 100%)}.horizontal-scroll-fade[data-fade-left=true]:before,.horizontal-scroll-fade[data-fade-right=true]:after{opacity:1}