@guruhotel/aura-ui/esm/slider/slider.styles.js

⚛️ React UI library by GuruHotel

import{styled as o}from"../theme";import*as t from"@radix-ui/react-slider";export const StyledSlider=o(t.Root,{position:"relative",display:"flex",alignItems:"center",userSelect:"none",touchAction:"none",width:200,'&[data-orientation="horizontal"]':{height:20},'&[data-orientation="vertical"]':{flexDirection:"column",width:20,height:100}});export const StyledTrack=o(t.Track,{backgroundColor:"$guru6",position:"relative",flexGrow:1,borderRadius:"$full",'&[data-orientation="horizontal"]':{height:3},'&[data-orientation="vertical"]':{width:3}});export const StyledRange=o(t.Range,{position:"absolute",backgroundColor:"$guru9",borderRadius:"$full",boxShadow:"$sm",height:"100%"});export const StyledThumb=o(t.Thumb,{all:"unset",display:"block",width:20,height:20,backgroundColor:"$guru10",boxShadow:"$xl",borderRadius:10,"&:hover":{filter:"brightness(85%)"},"&:focus":{boxShadow:"0 0 0 5px $colors$blackA8"}});