packages/styles/scss/components/_scrollshadow.scss

   1 $scrollshadow-height: rem(5) !default;
   2
   3 .scrollshadow {
   4         &-sticky {
   5                 position: sticky;
   6                 display: block;
   7                 block-size: $scrollshadow-height;
   8
   9                 &--top {
  10                         inset-block-start: 0;
  11                         background-image: radial-gradient(farthest-side at 50% 0, var(--background-strong), transparent);
  12                 }
  13
  14                 &--bottom {
  15                         inset-block-end: 0;
  16                         background-image: radial-gradient(farthest-side at 50% 100%, var(--background-strong), transparent);
  17                 }
  18         }
  19
  20         &-static {
  21                 position: absolute;
  22                 display: block;
  23                 inset-inline: 0;
  24                 block-size: $scrollshadow-height;
  25                 background: var(--background-norm);
  26
  27                 &--top {
  28                         inset-block-start: 0;
  29                 }
  30
  31                 &--bottom {
  32                         inset-block-end: 0;
  33                 }
  34         }
  35 }