@guruhotel/aura-ui/esm/radio-group/radio-group.styles.js

⚛️ React UI library by GuruHotel

import{styled as o}from"../theme";import*as t from"@radix-ui/react-radio-group";export const StyledRadio=o(t.Item,{all:"unset",backgroundColor:"$guru9",borderRadius:"100%",border:"solid",borderWidth:"2px",borderColor:"$guru9",transition:".2s ease",_disabled:{opacity:.5,cursor:"no-drop"},'&[data-state="unchecked"]':{backgroundColor:"$surfaceLight"},"&:hover":{backgroundColor:"$guru4",'&[data-state="checked"]':{backgroundColor:"$guru9"}},_focusVisible:{boxShadow:"0 0 0 1px $colors$surfaceLight, 0 0 0 3px $colors$guru12"}});export const StyledIndicator=o(t.Indicator,{display:"flex",alignItems:"center",justifyContent:"center",width:"100%",height:"100%",position:"relative","&::after":{content:'""',display:"block",padding:"25%",borderRadius:"50%",backgroundColor:"$surfaceLight"}});export const StyledRadioGroup=o(t.Root,{variants:{size:{xs:{[`& ${StyledRadio}`]:{width:16,height:16}},sm:{[`& ${StyledRadio}`]:{width:20,height:20}},md:{[`& ${StyledRadio}`]:{width:24,height:24}},lg:{[`& ${StyledRadio}`]:{width:28,height:28}},xl:{[`& ${StyledRadio}`]:{width:32,height:32}}}},defaultVariants:{size:"sm"}});export const RadioGroupItem=StyledRadio;export const RadioGroupIndicator=StyledIndicator;