import { Theme } from '@mui/material' ; import createStyles from '@mui/styles/createStyles' ; import makeStyles from '@mui/styles/makeStyles' ; export const useStyles = makeStyles ( ( theme ) => createStyles ( { resizeHandle : { position : 'absolute' , cursor : 'col-resize' , zIndex : 100 , opacity : 0 , borderLeft : `1px solid ${ theme . palette . primary . light }` , borderRight : `1px solid ${ theme . palette . primary . light }` , height : '50%' , top : '25%' , transition : 'all linear 100ms' , right : - 2 , width : 3 , '&.handleActive' : { opacity : '1' , border : 'none' , backgroundColor : theme . palette . primary . light , height : 'calc(100% - 4px)' , top : '2px' , right : - 1 , width : 1 , } , } , } ) ) ;