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

⚛️ React UI library by GuruHotel

import{styled as t,keyframes as a}from"../theme";import*as o from"@radix-ui/react-tooltip";import{fontSize as n,fontWeight as r,rounded as e}from"../common-variants";const i=a({"0%":{opacity:0,transform:"translateY(2px)"},"100%":{opacity:1,transform:"translateY(0)"}}),m=a({"0%":{opacity:0,transform:"translateX(-2px)"},"100%":{opacity:1,transform:"translateX(0)"}}),s=a({"0%":{opacity:0,transform:"translateY(-2px)"},"100%":{opacity:1,transform:"translateY(0)"}}),d=a({"0%":{opacity:0,transform:"translateX(2px)"},"100%":{opacity:1,transform:"translateX(0)"}});export const StyledContent=t(o.Content,{padding:"10px 15px",backgroundColor:"$text11",color:"$surfaceLight",zIndex:"$tooltip","@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:s},'&[data-side="right"]':{animationName:d},'&[data-side="bottom"]':{animationName:i},'&[data-side="left"]':{animationName:m}}},variants:{fontSize:n,fontWeight:r,rounded:e,shadow:{xs:{boxShadow:"$xs"},sm:{boxShadow:"$sm"},md:{boxShadow:"$md"},lg:{boxShadow:"$lg"},xl:{boxShadow:"$xl"}}},defaultVariants:{fontSize:"sm",fontWeight:"normal",rounded:"sm"}});export const StyledArrow=t(o.Arrow,{fill:"$text11"});