.scroll-area{--scroll-fade-bg:var(--bg-1);min-width:0;min-height:0;position:relative}.scroll-area-v{overscroll-behavior:contain;border-radius:var(--r-md);outline:none}.scroll-area-v:focus-visible{box-shadow:var(--f4-ring-tight);outline:2px solid #0000}.scroll-area:before,.scroll-area:after{content:"";pointer-events:none;opacity:0;transition:opacity var(--dur-fast) var(--ease);z-index:1;position:absolute}.scroll-area:not([data-h]):before,.scroll-area:not([data-h]):after{height:22px;left:0;right:0}.scroll-area:not([data-h]):before{background:linear-gradient(var(--scroll-fade-bg), transparent);top:0}.scroll-area:not([data-h]):after{background:linear-gradient(transparent, var(--scroll-fade-bg));bottom:0}.scroll-area[data-h]:before,.scroll-area[data-h]:after{width:22px;top:0;bottom:0}.scroll-area[data-h]:before{background:linear-gradient(to right, var(--scroll-fade-bg), transparent);left:0}.scroll-area[data-h]:after{background:linear-gradient(to left, var(--scroll-fade-bg), transparent);right:0}.scroll-area[data-edge~=s]:before,.scroll-area[data-edge=se]:before,.scroll-area[data-edge=s]:before,.scroll-area[data-edge$=e]:after,.scroll-area[data-edge=e]:after,.scroll-area[data-edge=se]:after{opacity:1}@media (prefers-reduced-motion:reduce){.scroll-area:before,.scroll-area:after{transition:none}}