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

const useStyles = makeStyles(
  (theme) => ({
    menuContent: {
      minWidth: 220,
      padding: theme.spacing(2),
    },
    menuHeader: {
      textTransform: "uppercase",
    },
    menuPaper: {
      borderRadius: 0,
    },

    filter: {
      alignItems: "center",
      display: "flex",
      columnGap: theme.spacing(2),
      marginBottom: theme.spacing(2),
    },
    filterChip: {
      borderRadius: 8,
      background: theme.palette.primary.main,
      color: theme.palette.primary.contrastText,
    },
    filterChipContainer: {
      display: "flex",
      columnGap: theme.spacing(1),
    },
    filterDelete: {
      marginLeft: "auto",
    },
    filterName: {
      width: 180,
    },
    filterValue: {
      height: 51,
      width: 400,
    },
    filterRange: {
      width: 115,
    },
    filterInputInner: {
      "&&": {
        padding: theme.spacing(2),
      },
    },
    filterConjunction: {
      minWidth: 80,
    },
    filterValueCheckbox: {
      paddingLeft: 0,
    },
    filterValueSelected: {
      color: theme.palette.primary.main,
      fontWeight: 500,
    },
    filterRangeLabel: {
      margin: theme.spacing(0, 1),
    },
    filterRangeValueContainer: {
      display: "flex",
      alignItems: "center",
    },

    bar: {
      minWidth: 600,
    },

    selectPaper: {
      borderRadius: 0,
      marginTop: `calc(48px + ${theme.spacing(1)})`,
    },
  }),
  {
    name: "Filter",
  }
);
export default useStyles;