/// Mixin to customize scrollbars
/// Beware, this does not work in all browsers
/// @author Hugo Giraudel
/// @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);
@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;
        border-radius: $size/2;
    }
  
    ::-webkit-scrollbar-track {
        background: $background-color;
    }
  
    // For Internet Explorer
    body {
      scrollbar-face-color: $foreground-color;
      scrollbar-track-color: $background-color;
    }
  }