<script>
import { OverlayScrollbars } from 'overlayscrollbars'

function setupScrollbar() {
  // Add scrollbar to body
  const bodyElement = document.body
  if (!bodyElement.hasAttribute('data-scrollbar-initialized')) {
    OverlayScrollbars({
      target: bodyElement,
      cancel: {
        nativeScrollbarsOverlaid: true,
      },
    }, {
      scrollbars: {
        theme: 'scrollbar-body',
        autoHide: 'scroll',
        autoHideDelay: 800,
      },
      overflow: {
        x: 'hidden',
      },
    })

    bodyElement.setAttribute('data-scrollbar-initialized', 'true')
  }

  // Add scrollbar to code blocks
  const preElements = document.querySelectorAll('pre')
  preElements.forEach((pre) => {
    if (!pre.hasAttribute('data-scrollbar-initialized')) {
      OverlayScrollbars({
        target: pre,
      }, {
        scrollbars: {
          theme: 'scrollbar-widget',
          autoHide: 'leave',
          autoHideDelay: 500,
        },
        overflow: {
          y: 'hidden',
        },
      })

      pre.setAttribute('data-scrollbar-initialized', 'true')
    }
  })

  // Add scrollbar to TOC content
  const tocElement = document.getElementById('toc-content')
  if (tocElement && !tocElement.hasAttribute('data-scrollbar-initialized')) {
    OverlayScrollbars({
      target: tocElement,
    }, {
      scrollbars: {
        theme: 'scrollbar-widget',
        autoHide: 'never',
      },
      overflow: {
        x: 'hidden',
      },
    })

    tocElement.setAttribute('data-scrollbar-initialized', 'true')
  }
}

setupScrollbar()
document.addEventListener('astro:after-swap', setupScrollbar)
</script>

<style is:global>
@import 'overlayscrollbars/overlayscrollbars.css';

.scrollbar-body {
  --os-size: 0.8rem;
  --os-padding-perpendicular: 0.15rem;
  --os-padding-axis: 0.2rem;
  --os-handle-border-radius: 99rem;
  --os-handle-perpendicular-size: 75%;
  --os-handle-perpendicular-size-hover: 100%;
  --os-handle-perpendicular-size-active: 100%;
  --os-handle-interactive-area-offset: 0.2rem;
  --os-handle-bg: oklch(var(--un-preset-theme-colors-secondary) / 0.25);
  --os-handle-bg-hover: oklch(var(--un-preset-theme-colors-secondary) / 0.40);
  --os-handle-bg-active: oklch(var(--un-preset-theme-colors-secondary) / 0.40);
  --os-handle-max-size: 80%;
  --os-handle-min-size: 12%;
}

.scrollbar-widget {
  --os-size: 0.4rem;
  --os-padding-perpendicular: 0;
  --os-padding-axis: 0.05rem;
  --os-handle-border-radius: 99rem;
  --os-handle-perpendicular-size: 75%;
  --os-handle-perpendicular-size-hover: 100%;
  --os-handle-perpendicular-size-active: 100%;
  --os-handle-interactive-area-offset: 0.2rem;
  --os-handle-bg: oklch(var(--un-preset-theme-colors-secondary) / 0.15);
  --os-handle-bg-hover: oklch(var(--un-preset-theme-colors-secondary) / 0.30);
  --os-handle-bg-active: oklch(var(--un-preset-theme-colors-secondary) / 0.30);
  --os-handle-min-size: 12%;
}

@media (min-width: 1536px) {
  #toc-content .os-scrollbar {
    --at-apply: 'hidden';
  }
}
</style>
