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

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

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

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

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

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

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

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

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

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

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

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

    // 滚动条样式
    &::-webkit-scrollbar-thumb {
      border-radius: 2px;
      background: $NA1;
    }

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

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

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

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

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

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

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

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

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

    // 滚动条样式
    &::-webkit-scrollbar-thumb {
      border-radius: 2px;
      background: $NA1;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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