<template>
  <div class="scroll-container">
    <slot />
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'ScrollContainer',
})
</script>

<style scoped>
.scroll-container {
  overflow: auto;
  position: relative;
  padding-right: 4px;
  padding-bottom: 4px;
}

.scroll-container::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.scroll-container.is-scrolling::-webkit-scrollbar {
  opacity: 1;
}

.scroll-container::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(150, 150, 150, 0.5);
  transition: background-color 0.3s ease;
  border: none;
  background-clip: padding-box;
}
</style>
