const red = "#c50505";
const blue = "#0479a8";

export const theme = {
  props: {
    MuiButton: {
      color: "secondary",
    },
    MuiLink: {
      color: "secondary",
    },
  },
  overrides: {
    MuiOutlinedInput: {
      root: {
        "&:hover $notchedOutline": {
          borderColor: blue,
        },
        "@media (hover: none)": {
          "&:hover $notchedOutline": {
            blue,
          },
        },
        "&$focused $notchedOutline": {
          borderColor: blue,
        },
      },
    },
    MuiListSubheader: {
      root: {
        color: "#adadad",
        fontWeight: "bolder",
      },
    },
  },
  palette: {
    type: "light",
    primary: {
      main: red,
    },
    secondary: {
      main: blue,
    },
    text: {
      primary: "#282728",
    },
  },
};