import { styled , keyframes } from "@stitches/react" ; import * as TooltipPrimitive from "@radix-ui/react-tooltip" ; 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 StyledTooltipContent = styled ( TooltipPrimitive . Content , { borderRadius : 4 , padding : "10px 15px" , fontSize : "$1" , maxWidth : 240 , color : "$loContrast" , backgroundColor : "$hiContrast" , 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="delayed-open"]' : { '&[data-side="top"]' : { animationName : slideDownAndFade } , '&[data-side="right"]' : { animationName : slideLeftAndFade } , '&[data-side="bottom"]' : { animationName : slideUpAndFade } , '&[data-side="left"]' : { animationName : slideRightAndFade } , } , } , } ) ; const StyledTooltipArrow = styled ( TooltipPrimitive . Arrow , { fill : "$hiContrast" , } ) ; const StyledTooltipTrigger = styled ( TooltipPrimitive . Trigger , { backgroundColor : "transparent" , border : 0 , cursor : "pointer" , } ) ; export const Tooltip = TooltipPrimitive . Root ; export const TooltipTrigger = StyledTooltipTrigger ; export const TooltipContent = StyledTooltipContent ; export const TooltipArrow = StyledTooltipArrow ;