import { makeStyles } from '@mui/styles';
import { svg2Url } from '@reltio/mdm-sdk';
import { RESIZE_ICON } from './resize.inline.svg';
export var useStyles = makeStyles(function (_) { return ({
    gridLayout: {
        position: 'relative',
        width: '100%',
        '& .react-grid-item': {
            '&.react-grid-placeholder': {
                background: 'rgba(0, 0, 0, 0.03)',
                border: '2px dashed rgba(0, 0, 0, 0.3)',
                borderRadius: '3px',
                transitionDuration: '100ms',
                zIndex: 7,
                userSelect: 'none',
                '& .react-resizable-handle': {
                    display: 'none'
                }
            },
            '&.static .react-resizable-handle': {
                display: 'none'
            },
            '&.customView .react-resizable-handle': {
                width: '10px',
                height: '10px'
            },
            '&.cssTransforms': {
                transitionProperty: 'transform'
            },
            '&.react-draggable-dragging': {
                transition: 'none',
                zIndex: 8,
                willChange: 'transform',
                '& .react-resizable-handle': {
                    backgroundImage: 'none'
                }
            },
            '& .react-resizable-handle': {
                position: 'absolute',
                width: '14px',
                height: '14px',
                bottom: 0,
                right: 0,
                zIndex: 20,
                backgroundImage: "url('".concat(svg2Url(RESIZE_ICON), "')"),
                backgroundRepeat: 'no-repeat',
                backgroundOrigin: 'content-box',
                boxSizing: 'border-box',
                cursor: 'se-resize'
            },
            '&.fullscreen': {
                visibility: 'visible',
                position: 'unset',
                width: '100% !important',
                height: '100% !important',
                transform: 'translate(0) !important'
            }
        }
    },
    gridFullscreen: {
        height: '100% !important',
        overflowY: 'hidden',
        '& .react-resizable-handle, & .react-grid-item': {
            visibility: 'hidden'
        }
    },
    isResizing: {
        zIndex: 9,
        willChange: 'width, height',
        pointerEvents: 'none'
    }
}); });
