const Switch = (theme) => ({
  MuiSwitch: {
    styleOverrides: {
      root: {
        width: 35,
        height: 16,
        padding: 0,
        marginLeft: theme.spacing(1),
        '& .MuiSwitch-thumb': {
          boxSizing: 'border-box',
          width: 12,
          height: 12,
        },
        '& .MuiSwitch-track': {
          borderRadius: 26 / 2,
          backgroundColor: theme.palette.grey[1],
          opacity: 1,
          transition: theme.transitions.create(['background-color'], {
            duration: 500,
          }),
        },
        '& .MuiSwitch-switchBase': {
          padding: theme.spacing(0),
          margin: theme.spacing(0.2),
          transitionDuration: '300ms',
          '&.Mui-checked': {
            transform: 'translateX(19px)',
            color: theme.palette.grey[0],
            '& + .MuiSwitch-track': {
              opacity: 1,
              border: 0,
            },
            '&.Mui-disabled + .MuiSwitch-track': {
              opacity: 0.5,
            },
          },
        },
      },
    },
  },
});
export default Switch;
