@use 'sass:math';
@use '../mixins/var' as *;
@use '../mixins/function' as *;
@use '../common/var' as *;

// Scrollbar
@mixin scrollbar($width: 6px) {
  $scrollbar-width: $width;
  $scrollbar-thumb-background: #dce0e8;
  $scrollbar-track-background: getCssVar('fill-color', 'blank');
  $scrollbar-thumb-hover-color: #b5bdce;

  /* 修改滚动条样式 */
  &::-webkit-scrollbar {
    z-index: 11;
    width: $scrollbar-width;

    // 定义滚动条滑块的样式和背景颜色（里面装有Thumb）
    &-thumb {
      width: $scrollbar-width;
      background: $scrollbar-thumb-background;

      // 定义滚动条滑块 hover 的样式和背景颜色
      border-radius: calc($scrollbar-width - 1px);

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

    // 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
    // &-button {
    // }

    // 内层轨道，滚动条中间部分（除去）
    // &-track-piece {
    // }

    // 边角，即两个滚动条的交汇处
    &-corner {
      background: $scrollbar-track-background;
    }

    /* 定义滚动条轨道 内阴影+圆角 */
    // 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
    &-track {
      background: $scrollbar-track-background;

      &-piece {
        width: $scrollbar-width;
        background: $scrollbar-track-background;
      }
    }

    // &-resizer {
    // }
  }

  &::-webkit-scrollbar:horizontal {
    height: $scrollbar-width;
  }
}