import { styled , keyframes } from "@stitches/react" ; import * as HoverCardPrimitive from "@radix-ui/react-hover-card" ; const slideUpAndFade = keyframes ( { "0%" : { opacity : 0 , transform : "translateY(2px)" } , "100%" : { opacity : 1 , transform : "translateY(0)" } , } ) ; const slideRightAndFade = keyframes ( { "0%" : { opacity : 0 , transform : "translateX(-2px)" } , "100%" : { opacity : 1 , transform : "translateX(0)" } , } ) ; const slideDownAndFade = keyframes ( { "0%" : { opacity : 0 , transform : "translateY(-2px)" } , "100%" : { opacity : 1 , transform : "translateY(0)" } , } ) ; const slideLeftAndFade = keyframes ( { "0%" : { opacity : 0 , transform : "translateX(2px)" } , "100%" : { opacity : 1 , transform : "translateX(0)" } , } ) ; const StyledContent = styled ( HoverCardPrimitive . Content , { boxShadow : "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px" , "@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 : slideDownAndFade } , '&[data-side="right"]' : { animationName : slideLeftAndFade } , '&[data-side="bottom"]' : { animationName : slideUpAndFade } , '&[data-side="left"]' : { animationName : slideRightAndFade } , } , } , } ) ; const StyledArrow = styled ( HoverCardPrimitive . Arrow , { fill : "white" , } ) ; export const Root = HoverCardPrimitive . Root ; export const Trigger = HoverCardPrimitive . Trigger ; export const Content = StyledContent ; export const Arrow = StyledArrow ;