/** Source for this can be found at https://gist.github.com/devinrhode2/2573411 */

/* Turn on custom 8px wide scrollbar */
.grid {
  ::-webkit-scrollbar {
    width: 10px; /* 1px wider than Lion. */
    height: 10px;
    /* This is more usable for users trying to click it. */
    background-color: rgba(0, 0, 0, 0);
  }
  ::-webkit-scrollbar-corner {
    background: transparent;
  }
  ::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
  }
  /* hover effect for both scrollbar area, and scrollbar 'thumb' */
  ::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }

  /* The scrollbar 'thumb' ...that marque oval shape in a scrollbar */
  ::-webkit-scrollbar-thumb:vertical,
  ::-webkit-scrollbar-thumb:horizontal {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 100px;
    background-clip: padding-box;
    border: 2px solid rgba(0, 0, 0, 0);
    min-height: 30px; /*Prevent it from getting too small */
  }

  ::-webkit-scrollbar-thumb:vertical:active,
  ::-webkit-scrollbar-thumb:horizontal:active {
    background: rgba(0, 0, 0, 0.3); /* Some darker color when you click it */
    border: 2px solid rgba(0, 0, 0, 0);
    border-radius: 10px;
  }
}

/* IE11 soln */
html,
body {
  scrollbar-shadow-color: rgba(black, 0);
  scrollbar-face-color: rgba(black, 0.5);
  scrollbar-track-color: rgba(black, 0);
  scrollbar-arrow-color: rgba(black, 0);
}

/* Dark contrast visibility */
.grid.dark {
  &::-webkit-scrollbar-thumb:vertical,
  &::-webkit-scrollbar-thumb:horizontal,
  ::-webkit-scrollbar-thumb:vertical,
  ::-webkit-scrollbar-thumb:horizontal {
    background: rgba(200, 200, 200, 0.4);
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:vertical:active,
  ::-webkit-scrollbar-thumb:horizontal:active {
    background: rgba(200, 200, 200, 0.5); /* Some darker color when you click it */
    -webkit-border-radius: 100px;
  }
  /* hover effect for both scrollbar area, and scrollbar 'thumb' */
  ::-webkit-scrollbar-track:hover {
    background-color: rgba(120, 120, 120, 0.12);
  }
  // .module.focus-active .rich-text-editor {
  //   ::-webkit-scrollbar-thumb:vertical,
  //   ::-webkit-scrollbar-thumb:horizontal {
  //     background: rgba(120, 120, 120, 0.4);
  //     background-clip: padding-box;
  //   }
  //   ::-webkit-scrollbar-thumb:vertical:active,
  //   ::-webkit-scrollbar-thumb:horizontal:active {
  //     background: rgba(120, 120, 120, 0.5); /* Some darker color when you click it */
  //     -webkit-border-radius: 100px;
  //   }
  // }
}
