Scroll Area code

@props([
    'height' => '16rem',
    'horizontal' => false,
])

@php
    /*
    | Scrollable region with a slim, theme-aware scrollbar. Constrain the
    | region with `height` (any CSS length); set `horizontal` for row scrollers.
    |
    | Usage:
    |   <x-ui.scroll-area height="12rem"> ...long content... </x-ui.scroll-area>
    |   <x-ui.scroll-area horizontal height="auto"> ...wide content... </x-ui.scroll-area>
    */
    $overflow = $horizontal ? 'overflow-x-auto overflow-y-hidden' : 'overflow-y-auto';

    $scrollbar = implode(' ', [
        'overscroll-contain [scrollbar-width:thin]',
        '[scrollbar-color:var(--color-gray-300)_transparent] dark:[scrollbar-color:var(--color-gray-700)_transparent]',
        '[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar]:h-1.5',
        '[&::-webkit-scrollbar-track]:bg-transparent',
        '[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-thumb]:bg-gray-700',
    ]);
@endphp

<div
    {{ $attributes->merge(['class' => "{$overflow} {$scrollbar}"]) }}
    @if (! $horizontal) style="max-height: {{ $height }}" @endif
>
    {{ $slot }}
</div>