$compare-fade-width: 90px !default;
$compare-fade-bg: $body-bg !default;

.compare-fade {
   display: none;
   pointer-events: none;
   position: absolute;
   right: 0;
   top: 0;
   width: $compare-fade-width;
   height: calc(100% - 5px);
   z-index: 8;
   opacity: 0;

   &.active {
      opacity: 1;
   }

   @media screen and (max-width: $sm - 1) {
      width: 50px;
   }
}

.compare-fade-before {
   background: linear-gradient(to right, rgba($compare-fade-bg, 1), rgba($compare-fade-bg, 0));
   right: 0;
}

.compare-fade-after {
   background: linear-gradient(to left, rgba($compare-fade-bg, 1), rgba($compare-fade-bg, 0));
   right: 0;
}
