@mixin customScrollBar() {

  &::-webkit-scrollbar {
    width: 6px;
    height: 9px;
  }

  &::-webkit-scrollbar-button:end:increment,
  &::-webkit-scrollbar-button:start:decrement {
    background: 0 0;
    display: none;
  }

  &::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, .04);
  }

  &::-webkit-scrollbar-track-piece:vertical:start {
    border-radius: 3px 3px 0 0;
  }

  &::-webkit-scrollbar-track-piece:vertical:end {
    border-radius: 0 0 3px 3px;
  }

  &::-webkit-scrollbar-track-piece:horizontal:start {
    border-radius: 5px 0 0 5px;
  }

  &::-webkit-scrollbar-track-piece:horizontal:end {
    border-radius: 0 5px 5px 0;
  }

  &::-webkit-scrollbar-thumb,
  &::-webkit-scrollbar-thumb:horizontal,
  &::-webkit-scrollbar-thumb:vertical {
    background-color: #dbd6cd;
  }

  &::-webkit-scrollbar-thumb:vertical {
    border-radius: 3px;
    height: 50px;
  }

  &::-webkit-scrollbar-thumb:horizontal {
    border-radius: 5px;
    width: 50px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: #ccc7bf
  }

  &.small::-webkit-scrollbar {
    width: 3px;
    height: 6px;
  }

  &.dark::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, .25);
  }

  &.dark::-webkit-scrollbar-thumb,
  &.dark::-webkit-scrollbar-thumb:horizontal,
  &.dark::-webkit-scrollbar-thumb:vertical {
    background-color: #444;
  }

  &.dark::-webkit-scrollbar-thumb:hover {
    background-color: #666;
  }
}