import { makeStyles } from "..";

const useStyles = makeStyles(
  (theme) => ({
    boxLinkTitle: {
      fontWeight: 500,
      transition: "color .2s ease",
    },
    boxLinkText: {
      marginTop: theme.spacing(1),
    },
    icon: {
      "& svg": {
        height: 32,
        width: 32,
      },
      transition: theme.transitions.create("color", {
        duration: theme.transitions.duration.shorter,
      }),
    },
    card: {
      "&:hover": {
        boxShadow: theme.shadows[16],
        color: theme.palette.primary.main,
      },
      boxShadow: theme.shadows[0],
      textDecoration: "none",
      transition: theme.transitions.create(["color", "box-shadow"], {
        duration: theme.transitions.duration.shorter,
      }),
    },
    cardContent: {
      "&&": {
        padding: theme.spacing(4),
      },
    },
    content: {
      display: "flex",
      columnGap: theme.spacing(2),
    },
  }),
  { name: "NavigationCard" }
);

export default useStyles;