@use "../mixins/function.scss" as *;
@use "../mixins/mixins.scss" as *;

@include b(scrollbar) {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
  &:hover {
    @include be(scrollbar, scroll-bar) {
      opacity: 1;
      pointer-events: auto;
    }
  }

  @include e(content) {
    flex: 1;
    min-height: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    position: relative;

    &::-webkit-scrollbar {
      display: none;
    }
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  // 通用滚动条样式
  @include e(scroll-bar) {
    position: absolute;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 1;
  }
  @include e(track) {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border-radius: 2px;
  }

  @include e(thumb) {
    position: absolute;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  // 竖向滚动条
  @include e(y) {
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    @include be(scrollbar, thumb) {
      left: 0;
      width: 100%;
      background-color: getCssVar("color", "fill-4");
      &:hover {
        background-color: getCssVar("color", "fill-5");
      }
    }
  }

  // 横向滚动条
  @include e(x) {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 6px;

    @include be(scrollbar, thumb) {
      top: 0;
      height: 100%;
      background-color: getCssVar("color", "fill-4");
      &:hover {
        background-color: getCssVar("color", "fill-5");
      }
    }
  }
  @include m(always) {
    opacity: 1;
    pointer-events: auto;
  }
}