import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import { styled } from "../../theme";
import { typographyVariants } from "../text";

export const StyledProvider = styled(TooltipPrimitive.Provider, {});
export const StyledRoot = styled(TooltipPrimitive.Root, {});
export const StyledTrigger = styled(TooltipPrimitive.Trigger, {});
export const StyledPortal = styled(TooltipPrimitive.Portal);
export const StyledContent = styled(TooltipPrimitive.Content, {
  padding: "$3",
  backgroundColor: "$light-steel-blue",
  color: "$light-off-white",
  borderRadius: "$xs",
  ...typographyVariants.body5,
});
export const StyledArrow = styled(TooltipPrimitive.Arrow, { fill: "$light-steel-blue" });