.bixi-scroll-y-shadow {
  background-image: linear-gradient(to bottom, @common-scroll-bg 15px, hsla(0, 0%, 100%, 0)),
    radial-gradient(at top, @common-scroll-color, transparent 70%),
    linear-gradient(to top, @common-scroll-bg 15px, hsla(0, 0%, 100%, 0)),
    radial-gradient(at bottom, @common-scroll-color, transparent 70%);
  background-repeat: no-repeat;
  background-position: top center, top center, bottom center, bottom center;
  background-size: 100% 50px, 100% 15px, 100% 50px, 100% 15px;
  background-attachment: local, scroll, local, scroll;
}

.bixi-scroll-x-shadow {
  background-image: linear-gradient(to left, @common-scroll-bg 45px, hsla(0, 0%, 100%, 0)),
    radial-gradient(at right, @common-scroll-color, transparent 70%),
    linear-gradient(to right, @common-scroll-bg 45px, hsla(0, 0%, 100%, 0)),
    radial-gradient(at left, @common-scroll-color, transparent 70%);
  background-repeat: no-repeat;
  background-position: right center, right center, left center, left center;
  background-size: 50px 100%, 15px 100%, 50px 100%, 15px 100%;
  background-attachment: local, scroll, local, scroll;
}