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

⚛️ React UI library by GuruHotel

import{styled as t,keyframes as n}from"../theme";import*as e from"@radix-ui/react-accordion";import{rounded as i}from"../common-variants";const d=n({from:{height:0},to:{height:"var(--radix-accordion-content-height)"}}),o=n({from:{height:"var(--radix-accordion-content-height)"},to:{height:0}});export const StyledItem=t(e.Item,{overflow:"hidden",marginTop:1,"&:first-child":{marginTop:0,borderTopLeftRadius:4,borderTopRightRadius:4},"&:last-child":{borderBottomLeftRadius:4,borderBottomRightRadius:4}});export const StyledHeader=t(e.Header,{all:"unset",display:"flex"});export const StyledTrigger=t(e.Trigger,{all:"unset",flex:1,display:"flex",alignItems:"center",justifyContent:"space-between",fontWeight:"$medium",boxShadow:"0 1px 0 $colors$blackA5",width:"$full",'&[data-state="closed"]':{backgroundColor:"white"},'&[data-state="open"]':{backgroundColor:"white"},"&:hover":{backgroundColor:"$gray2"}});export const StyledContent=t(e.Content,{width:"$full",overflow:"hidden",'&[data-state="open"]':{animation:`${d} 300ms cubic-bezier(0.87, 0, 0.13, 1)`},'&[data-state="closed"]':{animation:`${o} 300ms cubic-bezier(0.87, 0, 0.13, 1)`}});export const StyledAccordion=t(e.Root,{backgroundColor:"$gray2",boxShadow:"$sm",variants:{rounded:i,withAccessibility:{true:{[`& ${StyledItem}`]:{_focusWithin:{position:"relative",zIndex:1,boxShadow:"0 0 0 2px $colors$guru12"}}}},size:{xs:{[`& ${StyledContent}`]:{paddingInlineStart:"$2",paddingInlineEnd:"$2"},[`& ${StyledTrigger}`]:{fontSize:"$xs",height:"$6",paddingInlineStart:"$2",paddingInlineEnd:"$2"}},sm:{[`& ${StyledContent}`]:{paddingInlineStart:"$3",paddingInlineEnd:"$3"},[`& ${StyledTrigger}`]:{fontSize:"$sm",height:"$8",paddingInlineStart:"$3",paddingInlineEnd:"$3"}},md:{[`& ${StyledContent}`]:{paddingInlineStart:"$4",paddingInlineEnd:"$4"},[`& ${StyledTrigger}`]:{fontSize:"$md",height:"$10",paddingInlineStart:"$4",paddingInlineEnd:"$4"}},lg:{[`& ${StyledContent}`]:{paddingInlineStart:"$6",paddingInlineEnd:"$6"},[`& ${StyledTrigger}`]:{fontSize:"$lg",height:"$12",paddingInlineStart:"$6",paddingInlineEnd:"$6"}},xl:{[`& ${StyledContent}`]:{paddingInlineStart:"$8",paddingInlineEnd:"$8"},[`& ${StyledTrigger}`]:{fontSize:"$xl",height:"$14",paddingInlineStart:"$8",paddingInlineEnd:"$8"}}}},defaultVariants:{rounded:"lg",size:"xs"}});