/* 滚动条外道样式
  ::-webkit-scrollbar    //滚动条整体部分
  ::-webkit-scrollbar-button   //滚动条两端的按钮
  ::-webkit-scrollbar-track   // 外层轨道
  ::-webkit-scrollbar-track-piece    //内层轨道，滚动条中间部分（除去）
  ::-webkit-scrollbar-thumb //滚动条里面可以拖动的那个
  ::-webkit-scrollbar-corner   //边角
  ::-webkit-resizer   // 定义右下角拖动块的样式
 -------------------------- */

@mixin scrollbar($props: ()) {
  $_props: map-merge($--scrollbar-props-map, $props);

  &::-webkit-scrollbar {
    width: map-get($_props, 'width');
    height: map-get($_props, 'height');
    background: map-get($_props, 'backgroundColor');
  }

  &::-webkit-scrollbar-thumb {
    width: map-get($_props, 'width');
    border-radius: map-get($_props, 'radius');
    background: map-get($_props, 'thumbColor');

    &:hover {
      background: map-get($_props, 'hoverThumbColor');
    }
  }
}