/**
 * Mixin to customize scrollbars
 * Beware, this does not work in all browsers
 *
 * @author Hugo Giraude
 *
 * @param {Length} $size - Horizontal scrollbar's height and vertical scrollbar's width
 * @param {Color} $foreground-color - Scrollbar's color
 * @param {Color} $background-color [mix($foreground-color, white, 50%)] - Scrollbar's color
 * @example scss - Scrollbar styling
 *   @include scrollbars(.5em, slategray);
 *
 * @see https://css-tricks.com/snippets/sass/custom-scrollbars-mixin/
 */
 @mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white,  50%)) {
  // For Google Chrome
  &::-webkit-scrollbar {
    width:  $size !important;;
    height: $size !important;;
  }

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

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

  // For Internet Explorer
  scrollbar-face-color: $foreground-color !important;
  scrollbar-track-color: $background-color !important;

  // For Firefox
  scrollbar-color: $foreground-color $background-color !important;
  @if $size == 0 {
    scrollbar-width: none;
    scrollbar-height: none;
  } @else if $size < 1em {
    scrollbar-width: thin;
    scrollbar-height: thin;
  } @else {
    scrollbar-width: auto;
    scrollbar-height: auto;
  }
}