import { makeStyles } from "@mui/styles";
import { appColor } from "./appColor";

export const useStyles = makeStyles({
  cancelButton: {
    backgroundColor: "#b71c1c",
    textTransform: "none",
    boxShadow: "none",
    "&:hover": {
      backgroundColor: "#b71c1c",
      boxShadow: "none",
    },
    "&:active": {
      backgroundColor: "#b71c1c",
      boxShadow: "none",
    },
  },

  saveButton: {
    backgroundColor: "green",
    textTransform: "none",
    boxShadow: "none",
    "&:hover": {
      backgroundColor: "green",
      boxShadow: "none",
    },
    "&:active": {
      backgroundColor: "green",
      boxShadow: "none",
    },
  },

  indexButton: {
    backgroundColor: "green",
    textTransform: "none",
    boxShadow: "none",
    fontSize: 16,
    "& .MuiSvgIcon-root": {
      fontSize: 26,
    },
    "&:hover": {
      backgroundColor: "green",
      boxShadow: "none",
    },
    "&:active": {
      backgroundColor: "green",
      boxShadow: "none",
    },
  },

  indexBox: {
    backgroundColor: "#e0e0e0",
    minHeight: "100vh",
    width: "100%",
  },

  outlierBox: {
    backgroundColor: "#e0e0e0",
    p: 2,
    width: "100%",
  },

  grid1: {
    mt: 2,
    maxHeight: "100%",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  },

  searchButton: {
    backgroundColor: appColor.blue[100],
    textTransform: "none",
    boxShadow: "none",
    "&:hover": {
      backgroundColor: appColor.blue[100],
      boxShadow: "none",
    },
    "&:active": {
      backgroundColor: appColor.blue[100],
      boxShadow: "none",
    },
  },

  resetButton: {
    backgroundColor: appColor.grey[90],
    textTransform: "none",
    boxShadow: "none",
    "&:hover": {
      backgroundColor: appColor.grey[90],
      boxShadow: "none",
    },
    "&:active": {
      backgroundColor: appColor.grey[90],
      boxShadow: "none",
    },
  },

  addButton: {
    backgroundColor: "green",
    color: "white",
    borderRadius: 0,
    border: 1,
    borderColor: "green",
    "&:hover": {
      backgroundColor: "green",
    },
    "&:active": {
      backgroundColor: "green",
    },
  },

  tableContainer: {
    borderRadius: 10,
  },

  table: {
    minWidth: 650,
    overflowX: "auto",
  },

  tableHeaderRow: {
    height: 50,
    background: appColor.black,
    borderBottom: "5px solid green",
  },

  tableHeaderCell: {
    fontSize: "1.1rem",
    color: appColor.white,
    textAlign: "left",
  },

  tableHeaderCellRight: {
    fontSize: "1.1rem",
    color: appColor.white,
    textAlign: "right",
  },

  tableCell: {
    fontSize: "16px",
    fontWeight: 600,
  },

  actionsButton: {
    display: "flex",
    justifyContent: "center",
    border: "1px solid green",
    borderRadius: 8,
    cursor: "pointer",
    mr: 0.5,
    p: 0.5,
    minWidth: "45px",
    alignItems: "center",
    color: "green",
  },

  backButton: {
    display: "flex",
    justifyContent: "center",
    // border: "1px solid green",
    // borderRadius: 8,
    cursor: "pointer",
    mr: 0.5,
    p: 0.5,
    minWidth: "45px",
    alignItems: "center",
    color: "green",
  },

  tablePagination: {
    "& .MuiTablePagination-selectLabel, .MuiTablePagination-displayedRows, .MuiTablePagination-select":
      {
        fontSize: 14,
      },
  },

  cardTitleGrid: {
    borderColor: appColor.greenSmoke[20],
  },

  cardTitleTypography: {
    display: "flex",
    alignItems: "center",
    fontWeight: 500,
    fontSize: "21px",
    color: appColor.black,
  },

  typography: {
    fontWeight: 400,
    fontSize: 14,
  },

  boxImg: {
    border: '1px solid #d3d3d3', 
    borderRadius: '4px',
    display: 'flex',
    justifyContent: 'flex-end',
    alignItems: 'center',
    padding: '8px', 
    width: "100%",
  },

  image: {
    maxWidth: '200px',
    maxHeight: '200px',
    marginRight: 'auto',
  },

  boxColor: {
    border: '1px solid #d3d3d3', 
    borderRadius: '4px', 
    display: 'flex',
    justifyContent: 'flex-start',
    alignItems: 'center',
    padding: '8px', 
  },

  boxColorWithin: {
    width: '50px',
    height: '50px',
    backgroundColor: '#ffffff', 
    marginLeft: '8px', 
    border: '1px solid #d3d3d3',
  },

  cardTitleProfileVieTypography: {
    display: "flex",
    alignItems: "center",
    fontWeight: 500,
    fontSize: "24px",
    color: appColor.black,
  },
  
  CustomerViewtypography: {
    fontWeight: 400,
    fontSize: 16,
  },
});
