base-scrollbar.vue

<template>
  <component :is="tag" :class="classes" :style="style"><slot></slot></component>
</template>

<script>
import { isNumber } from '@/helpers/is'
import { stringToModifiers } from '@/helpers/bem'

export default {
  name: 'BaseScrollbar',

  props: {
    tag: { type: [String, Object], default: 'div' },
    width: { type: [Number, String], default: 8 },
    theme: { type: [String, Array], default: 'default' }
  },

  computed: {
    classes() {
      const themes = stringToModifiers({
        block: 'scrollbar',
        key: 'theme',
        mods: this.theme
      })

      return ['scrollbar', ...themes]
    },
    style() {
      const width = isNumber(this.width) ? `${this.width}px` : this.width

      return {
        '--scrollbar-width': width
      }
    }
  }
}
</script>

<style lang="scss">
.scrollbar {
  $root: &;

  &::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-width);
  }

  &::-webkit-scrollbar-track {
    border-radius: var(--track-radius);
    background: var(--track-background);
    box-shadow: var(--track-shadow);
    transition: box-shadow 0.2s ease-in-out;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: var(--thumb-radius);
    background: var(--thumb-background);
    box-shadow: var(--thumb-shadow);
    transition: background 0.2s linear;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: var(--thumb-background-hover);
  }

  &_theme_default {
    $system-like: inset 7px 10px 12px $ui-200;

    --thumb-radius: 8px;
    --thumb-shadow: none;
    --thumb-background: #{$ui-300};
    --thumb-background-hover: #{$ui-500};
    --track-background: transparent;
    --track-radius: 0;
    --track-shadow: #{$system-like};

    scrollbar-color: #0064a7 #8ea5b5;

    &:hover {
      --thumb-background: #{$ui-400};
    }
  }
}
</style>