@guruhotel/aura-ui/esm/hover-card/hover-card.styles.js

⚛️ React UI library by GuruHotel

import{styled as a,keyframes as t}from"../theme";import*as o from"@radix-ui/react-hover-card";import{rounded as r}from"../common-variants";const n=t({"0%":{opacity:0,transform:"translateY(2px)"},"100%":{opacity:1,transform:"translateY(0)"}}),i=t({"0%":{opacity:0,transform:"translateX(-2px)"},"100%":{opacity:1,transform:"translateX(0)"}}),e=t({"0%":{opacity:0,transform:"translateY(-2px)"},"100%":{opacity:1,transform:"translateY(0)"}}),m=t({"0%":{opacity:0,transform:"translateX(2px)"},"100%":{opacity:1,transform:"translateX(0)"}});export const StyledContent=a(o.Content,{padding:"$6",width:300,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:e},'&[data-side="right"]':{animationName:m},'&[data-side="bottom"]':{animationName:n},'&[data-side="left"]':{animationName:i}}},variants:{rounded:r},defaultVariants:{rounded:"md"}});export const StyledArrow=a(o.Arrow,{fill:"white"});