import { makeStyles } from 'tss-react/mui'

export const usePageStyles = makeStyles({ name: 'Page' })((theme) => ({
  rightModal: {
    '& .lm-content-space': {
      display: 'none'
    }
  },
  rightDrawerPaper: {
    width: theme.drawer.right,
    padding: theme.spacing(2)
  },
  rightContent: {
    overflowY: 'auto'
  },
  content: {
    transition: theme.transitions.create(['margin'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen
    })
  },
  contentWithRight: {
    marginRight: theme.drawer.right
  },
  'right-mobile-sm': {
    [theme.breakpoints.only('xs')]: {
      marginRight: '0 !important'
    }
  },
  'right-mobile-md': {
    [theme.breakpoints.down('md')]: {
      marginRight: 0
    }
  },
  'right-mobile-lg': {
    [theme.breakpoints.down('lg')]: {
      marginRight: 0
    }
  },
  leftShift: {
    marginLeft: theme.drawer.left,
    transition: theme.transitions.create(['margin'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen
    })
  },
  'left-mobile-sm': {
    [theme.breakpoints.only('xs')]: {
      marginLeft: 0
    }
  },
  'left-mobile-md': {
    [theme.breakpoints.down('md')]: {
      marginLeft: 0
    }
  },
  'left-mobile-lg': {
    [theme.breakpoints.down('lg')]: {
      marginLeft: 0
    }
  }
}))