import { styled } from "../../theme";

export const linkVariants = {
  primary: {
    fontSize: "$3",
    "&:hover": {
      textDecoration: "underline",
    },
  },
  secondary: {
    fontSize: "$3",
    "&:hover": {
      color: "$light-orange",
      textDecoration: "underline",
    },
  },
  ghost: { fontSize: "$3", textDecoration: "none" },
};

export const StyledLink = styled("a", {
  textDecoration: "none",
  fontFamily: "$text",
  fontWeight: "$regular",
  color: "$light-off-white",

  variants: {
    variant: linkVariants,
  },
});