@layer components{.scrollable-region{--scroll-mask-top:oklch(var(--foreground));--scroll-mask-right:oklch(var(--foreground));--scroll-mask-bottom:oklch(var(--foreground));--scroll-mask-left:oklch(var(--foreground))}.scrollable-region[data-fade-top]{--scroll-mask-top:transparent}.scrollable-region[data-fade-right]{--scroll-mask-right:transparent}.scrollable-region[data-fade-bottom]{--scroll-mask-bottom:transparent}.scrollable-region[data-fade-left]{--scroll-mask-left:transparent}.scrollable-region:is([data-fade-top],[data-fade-right],[data-fade-bottom],[data-fade-left]){-webkit-mask-image:linear-gradient(to right, var(--scroll-mask-left), oklch(var(--foreground)) var(--scroll-fade), oklch(var(--foreground)) calc(100% - var(--scroll-fade)), var(--scroll-mask-right)), linear-gradient(to bottom, var(--scroll-mask-top), oklch(var(--foreground)) var(--scroll-fade), oklch(var(--foreground)) calc(100% - var(--scroll-fade)), var(--scroll-mask-bottom));mask-image:linear-gradient(to right, var(--scroll-mask-left), oklch(var(--foreground)) var(--scroll-fade), oklch(var(--foreground)) calc(100% - var(--scroll-fade)), var(--scroll-mask-right)), linear-gradient(to bottom, var(--scroll-mask-top), oklch(var(--foreground)) var(--scroll-fade), oklch(var(--foreground)) calc(100% - var(--scroll-fade)), var(--scroll-mask-bottom));-webkit-mask-composite:source-in;mask-composite:intersect}@media (forced-colors:active),(prefers-contrast:more){.scrollable-region:is([data-fade-top],[data-fade-right],[data-fade-bottom],[data-fade-left]){-webkit-mask-image:none;mask-image:none}}}