import makeStyles from '@mui/styles/makeStyles';
import type { Theme } from '../@styles/theme-provider';

const createClasses = makeStyles<Theme>(theme => {
  return {
    searchField: {
      width: theme.spacing(39)
    },
    label: {
      ...theme.typography.h6,
      marginBottom: theme.spacing(1)
    },
    toggleFiltersButton: {
      margin: theme.spacing(0, 2)
    },
    // < 1366px   -> 3 columns, inner-P(24px,16px,0), field-P(0,8px,24px)  -> down('customsm')
    // 1366..1680 -> 3 columns, inner-P(24px,16px,0), field-P(0,12px,24px) -> between('customsm', 'customlg')
    // > 1680px   -> 4 columns, inner-P(24px,16px,0), field-P(0,12px,24px) -> up('customlg')
    filtersContainerInner: {
      marginTop: theme.spacing(4),
      backgroundColor: theme.palette.background.filters,
      borderRadius: theme.spacing(1),
      padding: theme.spacing(3, 1, 0),
      [theme.breakpoints.up('customsm')]: {
        padding: theme.spacing(3, 0.5, 0)
      }
    },
    fieldContainer: {
      padding: theme.spacing(0, 1, 3),
      [theme.breakpoints.up('customsm')]: {
        padding: theme.spacing(0, 1.5, 3)
      },
      [theme.breakpoints.up('customlg')]: {
        WebkitFlex: '0 25%',
        flex: '0 25%',
        maxWidth: '25%'
      }
    },
    actionFiltersButtonsContainer: {
      display: 'flex',
      alignItems: 'flex-end',
      paddingBottom: theme.spacing(3.5)
    },
    actionFiltersButton: {
      height: theme.spacing(4),
      marginRight: theme.spacing(0.25),
      padding: theme.spacing(1)
    }
  };
});

export default createClasses;