.scroll-shadow {
  position: relative;
  display: block;
  height: 100%;

  &:after,
  &:before {
    content: '';
    position: absolute;
    z-index: 2;
    pointer-events: none;
  }

  &.direction--vertical {
    &:after,
    &:before {
      width: 100%;
      left: 0;
    }
    &:before {
      top: 0;
    }
    &:after {
      bottom: 0;
    }
    &.size--xs {
      &:after,
      &:before {
        height: $size-xs;
      }
    }

    &.size--s {
      &:after,
      &:before {
        height: $size-s;
      }
    }

    &.size--xl {
      &:after,
      &:before {
        height: $size-xl;
      }
    }
  }

  &.direction--horizontal {
    &:after,
    &:before {
      height: 100%;
      top: 0;
    }
    &:before {
      left: 0;
    }
    &:after {
      right: 0;
    }
    &.size--xs {
      &:after,
      &:before {
        width: $size-xs;
      }
    }

    &.size--s {
      &:after,
      &:before {
        width: $size-s;
      }
    }

    &.size--xl {
      &:after,
      &:before {
        width: $size-xl;
      }
    }
  }

  &.color--background {
    &.shadow-top:before {
      background: linear-gradient(180deg, $color-background 0%, rgba(22, 23, 33, 0) 100%);
    }
    &.shadow-bottom:after {
      background: linear-gradient(180deg, rgba(22, 23, 30, 0) 0%, $color-background 100%);
    }
    &.shadow-left:before {
      background: linear-gradient(90deg, $color-background 0%, rgba(22, 23, 33, 0) 100%);
    }
    &.shadow-right:after {
      background: linear-gradient(90deg, rgba(22, 23, 30, 0) 0%, $color-background 100%);
    }
  }

  &.color--panel {
    &.shadow-top:before {
      background: linear-gradient(180deg, $color-panel 0%, rgba(22, 23, 33, 0) 100%);
    }
    &.shadow-bottom:after {
      background: linear-gradient(180deg, rgba(22, 23, 30, 0) 0%, $color-panel 100%);
    }
    &.shadow-left:before {
      background: linear-gradient(90deg, $color-panel 0%, rgba(22, 23, 33, 0) 100%);
    }
    &.shadow-right:after {
      background: linear-gradient(90deg, rgba(22, 23, 30, 0) 0%, $color-panel 100%);
    }
  }

  &.direction--vertical {
    .scroll-container {
      height: 100%;
      overflow-y: auto;
    }
    &.scroll--outside {
      .scroll-container {
        margin-right: -$spacing-xs;
        padding-right: $spacing-xs;
      }
    }
  }
  &.direction--horizontal {
    .scroll-container {
      width: 100%;
      overflow-x: auto;
    }
    &.scroll--outside {
      .scroll-container {
        margin-bottom: -$spacing-xs;
        padding-bottom: $spacing-xs;
      }
    }
  }
}