import { fade } from "@material-ui/core/styles";

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

const useStyles = makeStyles(
  (theme) => ({
    tabRoot: {
      "@media (min-width: 600px)": {
        minWidth: "unset",
      },
      "&.Mui-selected": {
        background: theme.palette.secondary.main,
        color: theme.palette.primary.main,
      },
      "&:hover": {
        background: fade(theme.palette.secondary.main, 0.6),
      },
      borderRadius: 8,
      minHeight: 40,
      padding: theme.spacing(1, 2),
      textTransform: "unset",
    },
    containerRoot: {
      minHeight: "unset",
    },
    containerFlex: {
      columnGap: theme.spacing(2),
    },
  }),
  {
    name: "PageTab",
  }
);

export default useStyles;