@use '../../../style/util.scss' as *;

/* 滚动条主题变量 */
@mixin set-scrollbar-var($var) {
  @include set-ele-var('scrollbar', $var);
}

/* 滚动条样式 */
@mixin scrollbar-style() {
  * {
    scrollbar-width: thin;
    scrollbar-color: eleVar('scrollbar', 'color') eleVar('scrollbar', 'bg');
  }

  ::-webkit-scrollbar {
    width: eleVar('scrollbar', 'size');
    height: eleVar('scrollbar', 'size');
  }

  ::-webkit-scrollbar-thumb {
    border: eleVar('scrollbar', 'padding') solid transparent;
    border-radius: eleVar('scrollbar', 'radius');
    background-color: eleVar('scrollbar', 'color');
    background-clip: padding-box;

    &:hover {
      background-color: eleVar('scrollbar', 'hover-color');
    }
  }

  ::-webkit-scrollbar-track {
    background: eleVar('scrollbar', 'bg');
  }

  ::-webkit-scrollbar-corner {
    background: transparent;
  }
}

/* 美化滚动条样式 */
@mixin set-scrollbar-style($selector) {
  @if $selector == '' {
    @include scrollbar-style();

    html.is-webkit,
    html.is-webkit * {
      scrollbar-width: auto;
      scrollbar-color: auto;
    }
  } @else if $selector == 'pc' {
    @media (hover: hover) and (pointer: fine) {
      @include scrollbar-style();

      html.is-webkit,
      html.is-webkit * {
        scrollbar-width: auto;
        scrollbar-color: auto;
      }
    }
  } @else if $selector != 'never' {
    #{$selector} {
      @include scrollbar-style();

      &.is-webkit * {
        scrollbar-width: auto;
        scrollbar-color: auto;
      }
    }
  }
}