scrollbar.scss

@import "./svg-utils";

@function svg($viewport, $content) {
  @return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="' + $viewport + '">' + $content + '</svg>';
}

@function simple-svg($viewport, $d, $fill) {
  @return svg-encode(svg($viewport, '<path fill="' + $fill + '" d="' + $d + '" />'));
}

$exclude-class: '.native-scroll';

:not(#{$exclude-class})::-webkit-scrollbar {
  $color: #8b8b8b;
  $hover-color: #606060;
  $viewport: '0 0 9 9'; // 9 = 15-3- 3
  $arrow-up: 'm5.7 1.7 3.1 4.2c.6.9-.1 2.1-1.2 2.1H1.4C.3 8-.4 6.8.2 5.9l3.1-4.2c.5-.9 1.9-.9 2.4 0z';
  $arrow-down: 'm5.7 7.3 3.1-4.2C9.4 2.2 8.7 1 7.6 1H1.4C.3 1-.4 2.2.2 3.1l3.1 4.2c.5.9 1.9.9 2.4 0z';
  $arrow-left: 'M1.7 3.3 5.9.2C6.8-.4 8 .3 8 1.4v6.2c0 1.1-1.2 1.8-2.1 1.2L1.7 5.7c-.9-.5-.9-1.9 0-2.4z';
  $arrow-right: 'M7.3 3.3 3.1.2C2.2-.4 1 .3 1 1.4v6.2c0 1.1 1.2 1.8 2.1 1.2l4.2-3.1c.9-.5.9-1.9 0-2.4z';

  width: 15px;
  height: 15px;
  background: #fcfcfc;

  &-thumb {
    background-color: $color;
    border-radius: 10px;
    border: 3px solid transparent;
    background-clip: padding-box;

    &:hover, &:active {
      background-color: $hover-color;
    }
  }

  &-button {
    width: 15px;
    height: 15px;
    border: 3px solid transparent;
    background-clip: padding-box;
    background-position: center;
    background-repeat: no-repeat;

    &:vertical {
      &:decrement {
        background-image: url(simple-svg($viewport, $arrow-up, $color));
      }

      &:increment {
        background-image: url(simple-svg($viewport, $arrow-down, $color));
      }

      &:hover {
        &:decrement {
          background-image: url(simple-svg($viewport, $arrow-up, $hover-color));
        }

        &:increment {
          background-image: url(simple-svg($viewport, $arrow-down, $hover-color));
        }
      }
    }

    &:horizontal {
      &:decrement {
        background-image: url(simple-svg($viewport, $arrow-left, $color));
      }

      &:increment {
        background-image: url(simple-svg($viewport, $arrow-right, $color));
      }

      &:hover {
        &:decrement {
          background-image: url(simple-svg($viewport, $arrow-left, $hover-color));
        }

        &:increment {
          background-image: url(simple-svg($viewport, $arrow-right, $hover-color));
        }
      }
    }
  }
}