{"version":3,"file":"scrollFade.module.mjs","names":[],"sources":["../../../../package/common/styles/scrollFade.module.pcss"],"sourcesContent":["/*\n * The scroll-fade mask, shared by `ScrollFade` and by anything with a scroll port of its own\n * (Modal's body, Carousel's dot strip). Why a mask rather than an overlay, and what that costs:\n * `docs/ScrollFade.md`.\n */\n\n/* Registered so the two alphas can be transitioned: an unregistered custom property has no type\n   for the browser to interpolate, so the fade would snap in and out at each edge. A browser\n   without `@property` keeps them working and simply lands on the old instant switch. */\n@property --custom-scroll-fade-start {\n  syntax: '<number>';\n  inherits: false;\n  initial-value: 1;\n}\n\n@property --custom-scroll-fade-end {\n  syntax: '<number>';\n  inherits: false;\n  initial-value: 1;\n}\n\n/* `inherits: false` so a host setting a length of its own doesn't hand it to a nested\n   `ScrollFade`, and typed so a bare `0` is read as a length instead of voiding the `calc()`\n   below, which would drop the whole mask rather than shorten the fade. */\n@property --custom-scroll-fade-length {\n  syntax: '<length>';\n  inherits: false;\n  initial-value: 24px;\n}\n\n/* Zero specificity, so a host that sets its own length on the same element wins whichever order\n   the bundler emits the two modules in. The `24px` repeats the initial value above for a browser\n   without `@property`, where there is none. */\n:where(.scroll-fade) {\n  --custom-scroll-fade-length: var(--scroll-fade-length, 24px);\n}\n\n.scroll-fade {\n  --custom-scroll-fade-start: 1;\n  --custom-scroll-fade-end: 1;\n\n  /* A fade is not motion, so this stays under `prefers-reduced-motion`. */\n  transition:\n    --custom-scroll-fade-start 0.2s ease,\n    --custom-scroll-fade-end 0.2s ease;\n}\n\n/* One gradient covering the whole port with only its end stops changing, so the four states are\n   two alpha switches rather than four gradients. */\n.scroll-fade-y {\n  -webkit-mask-image: linear-gradient(\n    to bottom,\n    rgb(0 0 0 / var(--custom-scroll-fade-start)) 0,\n    rgb(0 0 0 / 100%) var(--custom-scroll-fade-length),\n    rgb(0 0 0 / 100%) calc(100% - var(--custom-scroll-fade-length)),\n    rgb(0 0 0 / var(--custom-scroll-fade-end)) 100%\n  );\n  mask-image: linear-gradient(\n    to bottom,\n    rgb(0 0 0 / var(--custom-scroll-fade-start)) 0,\n    rgb(0 0 0 / 100%) var(--custom-scroll-fade-length),\n    rgb(0 0 0 / 100%) calc(100% - var(--custom-scroll-fade-length)),\n    rgb(0 0 0 / var(--custom-scroll-fade-end)) 100%\n  );\n}\n\n.scroll-fade-x {\n  -webkit-mask-image: linear-gradient(\n    to right,\n    rgb(0 0 0 / var(--custom-scroll-fade-start)) 0,\n    rgb(0 0 0 / 100%) var(--custom-scroll-fade-length),\n    rgb(0 0 0 / 100%) calc(100% - var(--custom-scroll-fade-length)),\n    rgb(0 0 0 / var(--custom-scroll-fade-end)) 100%\n  );\n  mask-image: linear-gradient(\n    to right,\n    rgb(0 0 0 / var(--custom-scroll-fade-start)) 0,\n    rgb(0 0 0 / 100%) var(--custom-scroll-fade-length),\n    rgb(0 0 0 / 100%) calc(100% - var(--custom-scroll-fade-length)),\n    rgb(0 0 0 / var(--custom-scroll-fade-end)) 100%\n  );\n}\n\n.scroll-fade-faded-start {\n  --custom-scroll-fade-start: 0;\n}\n\n.scroll-fade-faded-end {\n  --custom-scroll-fade-end: 0;\n}\n\n/* Fading text costs contrast at exactly the edge someone may be reading. Anyone who has asked for\n   more of it gets the hard edge back instead — legibility beats the nicer boundary. */\n@media (prefers-contrast: more) {\n  .scroll-fade {\n    --custom-scroll-fade-start: 1;\n    --custom-scroll-fade-end: 1;\n  }\n}\n"],"mappings":""}