@layer ui-components{@property --fade-top-end{syntax:"<percentage>";inherits:false;initial-value:0%}@property --fade-bottom-start{syntax:"<percentage>";inherits:false;initial-value:91%}.scroll-fade{--timeline-self:scroll(self);-webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 var(--fade-top-end), #000 var(--fade-bottom-start), transparent 99%);mask-image:linear-gradient(to bottom, transparent 0%, #000 var(--fade-top-end), #000 var(--fade-bottom-start), transparent 99%);animation:linear both scroll-fade-top,linear both scroll-fade-bottom;animation-timeline:var(--timeline-self), var(--timeline-self);animation-range:0 40px,90% 100%;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}@keyframes scroll-fade-top{0%{--fade-top-end:0%}to{--fade-top-end:9%}}@keyframes scroll-fade-bottom{0%{--fade-bottom-start:91%}to{--fade-bottom-start:100%}}@property --fade-left-end{syntax:"<percentage>";inherits:false;initial-value:0%}@property --fade-right-start{syntax:"<percentage>";inherits:false;initial-value:91%}.scroll-fade-x{--timeline-self-x:scroll(self inline);-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 var(--fade-left-end), #000 var(--fade-right-start), transparent 99%);mask-image:linear-gradient(to right, transparent 0%, #000 var(--fade-left-end), #000 var(--fade-right-start), transparent 99%);animation:linear both scroll-fade-left,linear both scroll-fade-right;animation-timeline:var(--timeline-self-x), var(--timeline-self-x);animation-range:0 40px,90% 100%;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}@keyframes scroll-fade-left{0%{--fade-left-end:0%}to{--fade-left-end:9%}}.scroll-fade-manual{animation:none}@keyframes scroll-fade-right{0%{--fade-right-start:91%}to{--fade-right-start:100%}}}