import { makeStyles } from '@material-ui/core/styles' export const positioningStyles = makeStyles(({ palette, ...theme }) => ({ '@global': { '.hidden': { display: 'none' }, '.block': { display: 'block !important' }, '.inline-block': { display: 'inline-block !important' }, '.flex': { display: 'flex' }, '.flex-column': { display: 'flex', flexDirection: 'column' }, '.flex-wrap': { flexWrap: 'wrap' }, '.justify-start': { justifyContent: 'flex-start !important' }, '.justify-center': { justifyContent: 'center' }, '.justify-end': { justifyContent: 'flex-end' }, '.justify-between': { justifyContent: 'space-between !important' }, '.justify-around': { justifyContent: 'space-around' }, '.items-center': { alignItems: 'center' }, '.items-start': { alignItems: 'flex-start' }, '.items-end': { alignItems: 'flex-end' }, '.items-stretch': { alignItems: 'stretch' }, '.flex-grow': { flexGrow: '1' }, '.overflow-auto': { overflow: 'auto !important' }, '.overflow-hidden': { overflow: 'hidden !important' }, '.overflow-unset': { overflow: 'unset !important' }, '.overflow-visible': { overflow: 'visible !important' }, '.scroll-y': { overflowX: 'hidden', overflowY: 'auto' }, '.relative': { position: 'relative' }, '.position-bottom': { position: 'absolute', bottom: '0' }, '.text-center': { textAlign: 'center' }, '.align-middle': { verticalAlign: 'middle' }, '.text-right': { textAlign: 'right' }, '.text-left': { textAlign: 'left' }, '.x-center': { left: '50%', transform: 'translateX(-50%)' }, '.y-center': { top: '50%', transform: 'translateY(-50%)' }, }, }))