@media (min-width: $size-md) {

  // the entire scrollbar.
  ::-webkit-scrollbar {
    position: absolute;
    right: 7px;
    width: 7px;
  }

  //  the buttons on the scrollbar (arrows pointing upwards and downwards).
  // ::-webkit-scrollbar-button {}

  // the draggable scrolling handle.
  ::-webkit-scrollbar-thumb {
    background-color: lighten($bg-color, 5);
  }

  // the track (progress bar) of the scrollbar.
  ::-webkit-scrollbar-track {
    background-color: transparent;
  }

  // the draggable resizing handle that appears at the bottom corner of some elements.
  // ::-webkit-resizer {}

  .theme-default-local {
    ::-webkit-scrollbar-thumb {
      background-color: darken($bg-color-dark, 5);
    }
  }
}