// 滚动条整体宽度
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: $B8; // 背景色
}

// 滚动条滑槽样式
::-webkit-scrollbar-track {
  border-radius: 6px;
}

// 滚动条样式
::-webkit-scrollbar-thumb {
  background: $D3;
  border-radius: 6px;
}

// 边角
::-webkit-scrollbar-corner {
  background: $Z9;
}

// 鼠标移入上去
::-webkit-scrollbar-thumb:hover {
  background: $B6;
}

// 鼠标点击
::-webkit-scrollbar-thumb:active {
  background: $B6;
}

// 浏览器失焦的样式
::-webkit-scrollbar-thumb:window-inactive {
  background-color: $D3;
}

.#{$prefixCls}-scrollbar-small {
  & *, & {
    // 滚动条整体宽度
    &::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }

    // 滚动条滑槽样式
    &::-webkit-scrollbar-track {
      border-radius: 4px;
    }

    // 滚动条样式
    &::-webkit-scrollbar-thumb {
      border-radius: 4px;
    }
  }
}

.#{$prefixCls}-scrollbar-small-deep {
  & *, & {
    // 滚动条整体宽度
    ::-webkit-scrollbar {
      width: 4px;
      height: 4px;
      background-color: $B7; // 背景色
    }

    // 滚动条滑槽样式
    ::-webkit-scrollbar-track {
      border-radius: 4px;
    }

    // 滚动条样式
    ::-webkit-scrollbar-thumb {
      border-radius: 4px;
      background: $B9;
    }

    // 边角
    ::-webkit-scrollbar-corner {
      background: $Z10;
    }

    // 鼠标移入上去
    ::-webkit-scrollbar-thumb:hover {
      background: $B6;
    }

    // 鼠标点击
    ::-webkit-scrollbar-thumb:active {
      background: $B6;
    }

    // 浏览器失焦的样式
    ::-webkit-scrollbar-thumb:window-inactive {
      background-color: $B9;
    }
  }
}

.#{$prefixCls}-scrollbar-medium {
  & *, & {
    // 滚动条整体宽度
    &::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    // 滚动条滑槽样式
    &::-webkit-scrollbar-track {
      border-radius: 6px;
    }

    // 滚动条样式
    &::-webkit-scrollbar-thumb {
      border-radius: 6px;
    }
  }
}

.#{$prefixCls}-scrollbar-medium-deep {
  & *, & {
    // 滚动条整体宽度
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
      background-color: $B7; // 背景色
    }

    // 滚动条滑槽样式
    ::-webkit-scrollbar-track {
      border-radius: 6px;
    }

    // 滚动条样式
    ::-webkit-scrollbar-thumb {
      border-radius: 6px;
      background: $B9;
    }

    // 边角
    ::-webkit-scrollbar-corner {
      background: $Z10;
    }

    // 鼠标移入上去
    ::-webkit-scrollbar-thumb:hover {
      background: $B6;
    }

    // 鼠标点击
    ::-webkit-scrollbar-thumb:active {
      background: $B6;
    }

    // 浏览器失焦的样式
    ::-webkit-scrollbar-thumb:window-inactive {
      background-color: $B9;
    }
  }
}

.#{$prefixCls}-scrollbar-large {
  & *, & {
    // 滚动条整体宽度
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    // 滚动条滑槽样式
    &::-webkit-scrollbar-track {
      border-radius: 8px;
    }

    // 滚动条样式
    &::-webkit-scrollbar-thumb {
      border-radius: 8px;
    }
  }
}

.#{$prefixCls}-scrollbar-large-deep {
  & *, & {
    // 滚动条整体宽度
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
      background-color: $B7; // 背景色
    }

    // 滚动条滑槽样式
    ::-webkit-scrollbar-track {
      border-radius: 8px;
    }

    // 滚动条样式
    ::-webkit-scrollbar-thumb {
      border-radius: 8px;
      background: $B9;
    }

    // 边角
    ::-webkit-scrollbar-corner {
      background: $Z10;
    }

    // 鼠标移入上去
    ::-webkit-scrollbar-thumb:hover {
      background: $B6;
    }

    // 鼠标点击
    ::-webkit-scrollbar-thumb:active {
      background: $B6;
    }

    // 浏览器失焦的样式
    ::-webkit-scrollbar-thumb:window-inactive {
      background-color: $B9;
    }
  }
}
