import * as PopoverPrimitive from "@radix-ui/react-popover";
import { styled } from "../../theme";

export const StyledRoot = styled(PopoverPrimitive.Root);

export const StyledTrigger = styled(PopoverPrimitive.Trigger, {});

export const StyledPortal = styled(PopoverPrimitive.Portal);

export const StyledContent = styled(PopoverPrimitive.Content, { bg: "$light-chromia-dark" });

export const StyledArrow = styled(PopoverPrimitive.Arrow, { fill: "$light-chromia-dark" });

export const StyledClose = styled(PopoverPrimitive.Close, {
  position: "absolute",
  top: 5,
  right: 5,
});