@property --scroll-shadow-start-opacity{syntax:"<number>";inherits:false;initial-value:1}@property --scroll-shadow-end-opacity{syntax:"<number>";inherits:false;initial-value:1}.scroll-shadow{--scroll-shadow-size:32px;--scroll-shadow-start-opacity:1;--scroll-shadow-end-opacity:1;transition:--scroll-shadow-start-opacity .18s ease-out,--scroll-shadow-end-opacity .18s ease-out;overflow:auto}.scroll-shadow[data-hide-scrollbar=true]{scrollbar-width:none}.scroll-shadow[data-hide-scrollbar=true]::-webkit-scrollbar{display:none}.scroll-shadow[data-orientation=vertical]{-webkit-mask-image:linear-gradient(to bottom, rgb(0 0 0/var(--scroll-shadow-start-opacity)), black var(--scroll-shadow-size), black calc(100% - var(--scroll-shadow-size)), rgb(0 0 0/var(--scroll-shadow-end-opacity)));mask-image:linear-gradient(to bottom, rgb(0 0 0/var(--scroll-shadow-start-opacity)), black var(--scroll-shadow-size), black calc(100% - var(--scroll-shadow-size)), rgb(0 0 0/var(--scroll-shadow-end-opacity)))}.scroll-shadow[data-orientation=horizontal]{-webkit-mask-image:linear-gradient(to right, rgb(0 0 0/var(--scroll-shadow-start-opacity)), black var(--scroll-shadow-size), black calc(100% - var(--scroll-shadow-size)), rgb(0 0 0/var(--scroll-shadow-end-opacity)));mask-image:linear-gradient(to right, rgb(0 0 0/var(--scroll-shadow-start-opacity)), black var(--scroll-shadow-size), black calc(100% - var(--scroll-shadow-size)), rgb(0 0 0/var(--scroll-shadow-end-opacity)))}.scroll-shadow[data-visibility=top],.scroll-shadow[data-visibility=both]{--scroll-shadow-start-opacity:0}.scroll-shadow[data-visibility=bottom],.scroll-shadow[data-visibility=both]{--scroll-shadow-end-opacity:0}