import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
import { styled } from "../../theme";
import { pxToRem } from "../../utils";
import { Text, typographyVariants } from "../text";
import { buttonStyle, buttonVariants, buttonSize } from "../button/button.styled";

export const StyledRoot = styled(RadixNavigationMenu.Root, {});

export const StyledItemList = styled(RadixNavigationMenu.List, {
  display: "flex",
  listStyle: "none",
  gap: "$7",
  alignItems: "baseline",
});

export const StyledMenuItem = styled(RadixNavigationMenu.Item, {});

export const StyledLabel = styled(Text, buttonStyle, buttonVariants, buttonSize);

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

export const StyledLink = styled(
  RadixNavigationMenu.Link,
  buttonStyle,
  buttonVariants,
  buttonSize,
  {
    ...typographyVariants.body1,

    defaultVariants: {
      size: "l",
    },
  }
);

export const StyledContent = styled(RadixNavigationMenu.Content, {
  backgroundColor: "$light-chromia-dark",
  color: "$light-off-white",
});

export const ViewportPosition = styled("div", {
  position: "absolute",
  display: "flex",
  justifyContent: "center",
  backgroundColor: "$light-chromia-dark",
  width: pxToRem(552),
  marginTop: "$3",
  zIndex: 1,
});

export const StyledViewport = styled(RadixNavigationMenu.Viewport, {
  position: "relative",
  padding: "$6 $7",
  width: "100%",
  border: `${pxToRem(1)} solid $gray-1`,
  boxShadow: "$light",
});