scroller with padding on both sides

scroller.scss

@mixin _scrollerThumb($size, $color) {
  &::-webkit-scrollbar-thumb {
    border: ($size / 3) var(--border-style) transparent;
    border-radius: var(--border-radius-small);
    background-color: $color;
    background-clip: content-box;
    -webkit-background-clip: content-box;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-clip: border-box;
    -webkit-background-clip: border-box;
  }
}

@mixin scroller($width: 4px, $color: var(--color-gainsboro)) {
  &::-webkit-scrollbar {
    width: $width * 1.5;
  }

  @include _scrollerThumb($width, $color);
}

@mixin scrollerHorizontal($height: 4px, $color: var(--color-gainsboro)) {
  &::-webkit-scrollbar {
    height: $height;
    width: 0;
  }

  @include _scrollerThumb($height, $color);
}

usage.scss

@import './scroller.scss';

.my-stuff {
  @include scroller($color: var(--icon-color));
}