//
// Text Mixins
//
@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white,  0%)) {

  & {
    scrollbar-color: $foreground-color $background-color; /* thumb and track color */
    scrollbar-width: thin;
  }
    // For Google Chrome
    &::-webkit-scrollbar {
      width:  $size;
      height: $size;
    }
  
    &::-webkit-scrollbar-thumb {
      background: $foreground-color;
      border-radius: 10px;
    }
  
    &::-webkit-scrollbar-track {
      background: $background-color;
      border-radius: 10px;
    }
  
    // For Internet Explorer
    & {
      scrollbar-face-color: $foreground-color;
      scrollbar-track-color: $background-color;
    }
  }