Scroll Area

const ScrollAreaAnatomy = defineStyleAnatomy({
    root: cva([
        "UI-ScrollArea__root",
        "relative overflow-hidden",
    ]),
    viewport: cva([
        "UI-ScrollArea__viewport",
        "h-full w-full rounded-[inherit]",
    ]),
    scrollbar:
        cva([
            "UI-ScrollArea__scrollbar",
            "flex touch-none select-none transition-colors",
        ], {
            variants: {
                orientation: {
                    vertical: "h-full w-2.5 border-l border-l-transparent p-[1px]",
                    horizontal: "h-2.5 flex-col border-t border-t-transparent p-[1px]",
                },
            },
            defaultVariants: {
                orientation: "vertical",
            },
        }),
    thumb: cva([
        "UI-ScrollArea__thumb",
        "relative flex-1 rounded-full bg-[--border]",
    ]),
})