/* PRE scroll fade (assets/js/scroll-fade.js). The mask only exists once the script has measured the
   element (data-psf), so without JavaScript nothing is hidden. Mask layers, top first: vertical
   scrollbar strip, horizontal scrollbar strip, horizontal fade, vertical fade. Fades intersect, the
   strips are added back so a classic scrollbar is never faded. Note that borders on the scroller
   itself fade with the content: put a visible border on a wrapper instead. */
.pre-scroll-fade[data-psf] {
  --psf-v: linear-gradient(to bottom, transparent 0, #000 var(--psf-top, 0px), #000 calc(100% - var(--psf-bottom, 0px)), transparent 100%);
  --psf-h: linear-gradient(to right, transparent 0, #000 var(--psf-left, 0px), #000 calc(100% - var(--psf-right, 0px)), transparent 100%);
  --psf-solid: linear-gradient(#000, #000);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.pre-scroll-fade[data-psf="y"] {
  -webkit-mask-image: var(--psf-solid), var(--psf-v);
  mask-image: var(--psf-solid), var(--psf-v);
  -webkit-mask-size: var(--psf-gutter-y, 0px) 100%, 100% 100%;
  mask-size: var(--psf-gutter-y, 0px) 100%, 100% 100%;
  -webkit-mask-position: var(--psf-gutter-y-at, right top), 0 0;
  mask-position: var(--psf-gutter-y-at, right top), 0 0;
}
.pre-scroll-fade[data-psf="x"] {
  -webkit-mask-image: var(--psf-solid), var(--psf-h);
  mask-image: var(--psf-solid), var(--psf-h);
  -webkit-mask-size: 100% var(--psf-gutter-x, 0px), 100% 100%;
  mask-size: 100% var(--psf-gutter-x, 0px), 100% 100%;
  -webkit-mask-position: left bottom, 0 0;
  mask-position: left bottom, 0 0;
}
.pre-scroll-fade[data-psf="xy"] {
  -webkit-mask-image: var(--psf-solid), var(--psf-solid), var(--psf-h), var(--psf-v);
  mask-image: var(--psf-solid), var(--psf-solid), var(--psf-h), var(--psf-v);
  -webkit-mask-size: var(--psf-gutter-y, 0px) 100%, 100% var(--psf-gutter-x, 0px), 100% 100%, 100% 100%;
  mask-size: var(--psf-gutter-y, 0px) 100%, 100% var(--psf-gutter-x, 0px), 100% 100%, 100% 100%;
  -webkit-mask-position: var(--psf-gutter-y-at, right top), left bottom, 0 0, 0 0;
  mask-position: var(--psf-gutter-y-at, right top), left bottom, 0 0, 0 0;
  -webkit-mask-composite: source-over, source-over, source-in, source-over;
  mask-composite: add, add, intersect, add;
}