import { pxToRem } from '../typography';

export default function Link(theme) {
  return {
    MuiLink: {
      styleOverrides: {
        root: {
          cursor: 'pointer',
          textDecorationColor: theme.palette.primary.main,
          '&:hover': {
            color: theme.palette.common.black,
          },
        },
      },
      variants: [
        {
          props: { size: 'small' },
          style: {
            fontSize: pxToRem(7.5),
            [theme.breakpoints.up('md')]: {
              fontSize: pxToRem(7.5),
            },
            [theme.breakpoints.up('lg')]: {
              fontSize: pxToRem(9),
            },
            [theme.breakpoints.up('xl')]: {
              fontSize: pxToRem(15),
            },
          },
        },
        {
          props: { size: 'medium' },
          style: {
            fontSize: pxToRem(13),
            [theme.breakpoints.up('md')]: {
              fontSize: pxToRem(13),
            },
            [theme.breakpoints.up('lg')]: {
              fontSize: pxToRem(16),
            },
            [theme.breakpoints.up('xl')]: {
              fontSize: pxToRem(26),
            },
          },
        },
      ],
    },
  };
}
