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

const useStyles = makeStyles(
  (theme) => ({
    close: {
      "&:hover": {
        color: theme.palette.text.primary,
      },
      color: theme.palette.text.secondary,
      position: "absolute",
      right: theme.spacing(-2),
      top: theme.spacing(-1),
    },
    closeNoContent: {
      "&$close": {
        top: 2,
      },
    },
    container: {
      columnGap: theme.spacing(2),
      display: "grid",
      gridTemplateColumns: "40px 1fr",
    },
    content: {
      padding: theme.spacing(0, 1),
    },
    icon: {
      "& $error": {
        color: theme.palette.alert.icon.error,
      },
      "& $warning": {
        color: theme.palette.alert.icon.warning,
      },
      "& $success": {
        color: theme.palette.alert.icon.success,
      },
    },
    root: {},
    titleBar: {
      marginTop: 6,
      marginBottom: theme.spacing(1),
      position: "relative",
    },
    error: {
      background: theme.palette.alert.paper.error,
    },
    warning: {
      background: theme.palette.alert.paper.warning,
    },
    success: {
      background: theme.palette.alert.paper.success,
    },
  }),
  {
    name: "Alert",
  }
);

export default useStyles;