@guruhotel/aura-ui/esm/scroll-area/scroll-area.styles.js

⚛️ React UI library by GuruHotel

import{styled as o}from"../theme";import*as t from"@radix-ui/react-scroll-area";import{rounded as r}from"../common-variants";import{SCROLLBAR_SIZE as e}from"./scroll-area.constants";export const StyledScrollArea=o(t.Root,{width:"$full",height:500,overflow:"hidden",boxShadow:"$md",variants:{rounded:r},defaultVariants:{rounded:"none"}});export const StyledViewport=o(t.Viewport,{width:"100%",height:"100%",borderRadius:"inherit"});export const StyledScrollbar=o(t.Scrollbar,{display:"flex",userSelect:"none",touchAction:"none",padding:2,background:"$blackA6",transition:"background 160ms ease-out","&:hover":{background:"$blackA8"},'&[data-orientation="vertical"]':{width:e},'&[data-orientation="horizontal"]':{flexDirection:"column",height:e}});export const StyledThumb=o(t.Thumb,{flex:1,background:"$gray10",borderRadius:e,position:"relative","&::before":{content:'""',position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:"100%",height:"100%",minWidth:44,minHeight:44}});export const StyledCorner=o(t.Corner,{background:"$blackA8"});