scrollbar styling

scrollbar-styling.scss

@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white,  50%)) {
  // For Google Chrome
  &::-webkit-scrollbar {
    width:  $size;
    height: $size;
  }

  &::-webkit-scrollbar-thumb {
    background: $foreground-color;
  }

  &::-webkit-scrollbar-track {
    background: $background-color;
  }

  // For Internet Explorer
  & {
    scrollbar-face-color: $foreground-color;
    scrollbar-track-color: $background-color;
  }
}

/* Usage: */

body {
  @include scrollbars(10px, pink, red);
}
.custom-area {
  @include scrollbars(.5em, slategray);
}

/* https://css-tricks.com/snippets/sass/custom-scrollbars-mixin/ */