.scrollarea{--fade-area:30px}.scrollarea_inner{scrollbar-width:none;scroll-timeline-name:--scroller}@supports (animation-timeline:scroll()){.scrollarea_inner-horizontal{.scrollarea_inner{scroll-timeline-axis:x;&:after,&:before{content:"";position:absolute;top:0;bottom:0;pointer-events:none;width:var(--fade-area);z-index:9;animation-name:fadeHorizontal;animation-duration:1s;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--scroller}&:before{--start:-100%;left:0;background:linear-gradient(to left,rgba(0,0,0,0) 0,var(--background) 120%);transform:translateX(0);animation-range:0 var(--fade-area)}&:after{right:0;background:linear-gradient(to right,rgba(0,0,0,0) 0,var(--background) 120%);transform:translateX(100%);animation-range:calc(100% - var(--fade-area)) 100%}}}@keyframes fadeHorizontal{0%{transform:translateX(var(--start,0))}}.scrollarea_inner-vertical{scroll-timeline-axis:y;.scrollarea_inner{&:after,&:before{content:"";position:absolute;left:0;right:0;pointer-events:none;height:var(--fade-area);z-index:9;animation-name:fadeVertical;animation-duration:1s;animation-fill-mode:both;animation-timing-function:linear;animation-timeline:--scroller}&:before{--start:-100%;top:0;background:linear-gradient(to top,rgba(0,0,0,0) 0,var(--background) 120%);transform:translateY(0);animation-range:0 var(--fade-area)}&:after{bottom:0;background:linear-gradient(to bottom,rgba(0,0,0,0) 0,var(--background) 120%);transform:translateY(100%);animation-range:calc(100% - var(--fade-area)) 100%}}}@keyframes fadeVertical{0%{transform:translateY(var(--start,0))}}}