$bgBarColor: rgba(222, 222, 222, 0.5);
$bgThumbColor: rgba(0, 0, 0, 0.3);
$barColor: rgba(0, 0, 0, 0.3);

@mixin _gen-scrollbar($width: 10px, $height: 10px, $outColor: $bgBarColor, $innerColor: $bgThumbColor, $radius: 5px, $shadow: null) {
  /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 */
  &::-webkit-scrollbar {
    width: $width;
    height: $height;
    background-color: $outColor;
  }

  /* 定义滚动条轨道 内阴影+圆角 */
  &::-webkit-scrollbar-track {
    @if ($shadow!=null) {
      -webkit-box-shadow: $shadow;
    }

    @if ($radius!=null) {
      border-radius: $radius;
    }

    background-color: $outColor;
  }

  /* 定义滑块 内阴影+圆角 */
  &::-webkit-scrollbar-thumb {
    @if ($shadow!=null) {
      -webkit-box-shadow: $shadow;
    }

    @if ($radius!=null) {
      border-radius: $radius;
    }

    background-color: $innerColor;
    border: 1px solid $innerColor;

    &:hover {
      background-color: rgba($innerColor, 0.6);
    }

    &:active {
      background-color: rgba($innerColor, 0.8);
    }
  }
}

@mixin custom-scrollbar($cls: app) {
  .#{$cls} {
    @include _gen-scrollbar(8px, 8px, $bgBarColor, $bgThumbColor);

    &::-webkit-scrollbar {
      background-color: $bgBarColor;
      border-radius: 5px;
      transition: all 0.3s ease-in-out;
    }

    &::-webkit-scrollbar-button {
      display: none;
    }

    &::-webkit-scrollbar-track-piece {
      background: white;
    }

    &::-webkit-scrollbar-thumb {
      width: 8px;
      min-height: 15px;
      border-radius: 5px;
      transition: all 0.3s ease-in-out;
    }
  }
}

/**
 *定义滚动条样式 圆角和阴影不需要则传入null
 *	1、$width
 *	2、$height -- 滚动条宽高、圆角
 *	3、$outColor -- 滚动条颜色
 *	4、$innerColor -- 滑块颜色
 *	5、$radius
 *	6、$shadow -- 阴影
 *  example:
 *  .my { @include scrollbar(5px, 8px); }
 */
@mixin scrollbar($width: 10px, $height: 10px, $outColor: $bgBarColor, $innerColor: $bgThumbColor, $radius: 5px, $shadow: null) {
  @include _gen-scrollbar($width, $height, $outColor, $innerColor, $radius, $shadow);
}

/**
 * 定义通用交互滚动条样式 圆角和阴影不需要则传入null
 *  example:
 *  .my { @include pretty-scrollbar(5px, 8px); }
 */
@mixin pretty-scrollbar($width: 10px, $height: 10px, $outColor: $bgBarColor, $innerColor: $bgThumbColor, $radius: 5px, $shadow: null) {
  @include _gen-scrollbar($width, $height, $outColor, $innerColor, $radius, $shadow);

  &::-webkit-scrollbar,
  &::-webkit-scrollbar-track,
  &::-webkit-scrollbar-thumb {
    visibility: hidden;
  }

  // 鼠标悬浮到目标块，才显示滚动条
  &:hover {
    &::-webkit-scrollbar,
    &::-webkit-scrollbar-track,
    &::-webkit-scrollbar-thumb {
      visibility: visible;
    }
  }
}

/**
 * 定义某个选择器之下的通用交互滚动条样式 圆角和阴影不需要则传入null
 *  example:
 *  - 直接在 body 之下：
 *   @include body-scrollbar(5px, 8px);
 *  - 在某个选择器之下：
 *  .my { @include body-scrollbar(5px, 8px); }
 */
@mixin body-scrollbar($width: 10px, $height: 10px, $outColor: $bgBarColor, $innerColor: $bgThumbColor, $radius: 5px, $shadow: null) {
  /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸 */
  ::-webkit-scrollbar {
    width: $width;
    height: $height;
    background-color: $outColor;
  }

  /* 定义滚动条轨道 内阴影+圆角 */
  ::-webkit-scrollbar-track {
    @if ($shadow!=null) {
      -webkit-box-shadow: $shadow;
    }

    @if ($radius!=null) {
      border-radius: $radius;
    }

    background-color: $outColor;
  }

  /* 定义滑块 内阴影+圆角 */
  ::-webkit-scrollbar-thumb {
    @if ($shadow!=null) {
      -webkit-box-shadow: $shadow;
    }

    @if ($radius!=null) {
      border-radius: $radius;
    }

    background-color: $innerColor;
    border: 1px solid $innerColor;
  }
}

/**
 * 定义通用交互滚动条样式无轨道模式
 *	1、$width
 *	2、$height -- 滚动条宽高、圆角
 *	3、$color -- 滚动条颜色
 *  4、$radius
 *  example:
 *  .my { @include pretty-bar(5px, 8px); }
 */
@mixin pretty-bar($width: 6px, $height: 6px, $color: $barColor, $radius: 5px) {
  &::-webkit-scrollbar {
    width: $width;
    height: $height;
    visibility: hidden;
  }

  &::-webkit-scrollbar-thumb {
    height: $height;
    background: transparent;
    border-radius: $radius;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &:hover {
    &::-webkit-scrollbar {
      visibility: visible;
    }

    &::-webkit-scrollbar-thumb {
      background: $color;
    }
  }
}