@mixin scrollbar-base(
  $width: 6px,
  $height: 6px,
  $border-radius: 4px,
) {
  overflow: auto;

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

  &::-webkit-scrollbar-track {
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: $border-radius;
    background-color: rgba(0, 0, 0, 12%);

    &:hover {
      background-color: rgba(0, 0, 0, 25%);
    }
  }

  [data-uikit-theme="dark"] &::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 14%);

    &:hover {
      background-color: rgba(255, 255, 255, 30%);
    }
  }
}

@mixin scrollbar-default {
  @include scrollbar-base();
}

@mixin scrollbar-thin {
  @include scrollbar-base(
    $width: 4px,
    $height: 4px,
    $border-radius: 2px
  );
}

@mixin scrollbar-hidden {
  overflow: auto;
  -ms-overflow-style: none; // IE and Edge
  scrollbar-width: none; // Firefox

  &::-webkit-scrollbar {
    display: none; // Webkit browsers
  }
}

// touch device enhance
@mixin scrollbar-touch-friendly {
  -webkit-overflow-scrolling: touch;

  @include scrollbar-thin();
}