Horizontal Draggable Scroll

const HorizontalDraggableScrollAnatomy = defineStyleAnatomy({
    root: cva([
        "UI-HorizontalDraggableScroll__root",
        "relative flex items-center lg:gap-2",
    ]),
    container: cva([
        "UI-HorizontalDraggableScroll__container",
        "flex max-w-full w-full space-x-3 overflow-x-scroll scrollbar-hide scroll select-none",
    ]),
    chevronOverlay: cva([
        "flex flex-none items-center justify-center cursor-pointer hover:text-[--foreground] absolute bg-gradient-to-r from-[--background] z-40",
        "h-full w-16 opacity-50 hover:opacity-100 transition-opacity",
        "data-[state=hidden]:opacity-0 data-[state=hidden]:pointer-events-none",
        "data-[state=visible]:animate-in data-[state=hidden]:animate-out",
        "data-[state=visible]:fade-in-0 data-[state=hidden]:fade-out-0",
        "data-[state=visible]:duration-600 data-[state=hidden]:duration-600",
    ], {
        variants: {
            side: {
                left: "left-0 bg-gradient-to-r",
                right: "right-0 bg-gradient-to-l",
            },
        },
    }),
    scrollContainer: cva([
        "flex max-w-full w-full space-x-3 overflow-x-scroll scrollbar-hide scroll select-none",
    ]),
    chevronIcon: cva([
        "w-7 h-7 stroke-2 mx-auto",
    ]),
 
})