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

⚛️ React UI library by GuruHotel

import{styled as t,keyframes as a}from"../theme";import*as o from"@radix-ui/react-popover";const e=a({"0%":{opacity:0,transform:"translateY(2px)"},"100%":{opacity:1,transform:"translateY(0)"}}),r=a({"0%":{opacity:0,transform:"translateX(-2px)"},"100%":{opacity:1,transform:"translateX(0)"}}),n=a({"0%":{opacity:0,transform:"translateY(-2px)"},"100%":{opacity:1,transform:"translateY(0)"}}),i=a({"0%":{opacity:0,transform:"translateX(2px)"},"100%":{opacity:1,transform:"translateX(0)"}});export const StyledContent=t(o.Content,{borderRadius:4,padding:20,width:"max-content",backgroundColor:"white",boxShadow:"$md","@media (prefers-reduced-motion: no-preference)":{animationDuration:"400ms",animationTimingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",willChange:"transform, opacity",'&[data-state="open"]':{'&[data-side="top"]':{animationName:n},'&[data-side="right"]':{animationName:i},'&[data-side="bottom"]':{animationName:e},'&[data-side="left"]':{animationName:r}}},"&:focus":{boxShadow:"$md"}});export const StyledArrow=t(o.Arrow,{fill:"white"});export const StyledClose=t(o.Close,{all:"unset",borderRadius:"100%",height:25,width:25,display:"inline-flex",alignItems:"center",justifyContent:"center",color:"$gray11",position:"absolute",top:10,right:10,svg:{fontSize:"70%"},"&:hover":{backgroundColor:"$gray4"},"&:focus":{boxShadow:"0 0 0 2px black"}});