import { makeStyles } from '@mui/styles';
// copy of @react-sigma/core/lib/react-sigma.min.css
export var useStyles = makeStyles({
    '@global :root': {
        '--sigma-background-color': '#fff',
        '--sigma-controls-background-color': '#fff',
        '--sigma-controls-background-color-hover': 'rgba(0,0,0,0.2)',
        '--sigma-controls-border-color': 'rgba(0,0,0,0.2)',
        '--sigma-controls-color': '#000',
        '--sigma-controls-zindex': '100',
        '--sigma-controls-margin': '5px',
        '--sigma-controls-size': '30px'
    },
    '@global div.react-sigma': {
        height: '100%',
        width: '100%',
        position: 'relative',
        background: 'var(--sigma-background-color)'
    },
    '@global div.sigma-container': { height: '100%', width: '100%' },
    '@global .react-sigma-controls': {
        position: 'absolute',
        zIndex: 'var(--sigma-controls-zindex)',
        border: '2px solid var(--sigma-controls-border-color)',
        borderRadius: '4px',
        color: 'var(--sigma-controls-color)',
        backgroundColor: 'var(--sigma-controls-background-color)'
    },
    '@global .react-sigma-controls.bottom-right': {
        bottom: 'var(--sigma-controls-margin)',
        right: 'var(--sigma-controls-margin)'
    },
    '@global .react-sigma-controls.bottom-left': {
        bottom: 'var(--sigma-controls-margin)',
        left: 'var(--sigma-controls-margin)'
    },
    '@global .react-sigma-controls.top-right': {
        top: 'var(--sigma-controls-margin)',
        right: 'var(--sigma-controls-margin)'
    },
    '@global .react-sigma-controls.top-left': {
        top: 'var(--sigma-controls-margin)',
        left: 'var(--sigma-controls-margin)'
    },
    '@global .react-sigma-controls:first-child': {
        borderTopLeftRadius: '2px',
        borderTopRightRadius: '2px'
    },
    '@global .react-sigma-controls:last-child': {
        borderBottomLeftRadius: '2px',
        borderBottomRightRadius: '2px'
    },
    '@global .react-sigma-control': {
        width: 'var(--sigma-controls-size)',
        height: 'var(--sigma-controls-size)',
        lineHeight: 'var(--sigma-controls-size)',
        backgroundColor: 'var(--sigma-controls-background-color)',
        borderBottom: '1px solid var(--sigma-controls-border-color)'
    },
    '@global .react-sigma-control:last-child': { borderBottom: 'none' },
    '@global .react-sigma-control > *': { boxSizing: 'border-box' },
    '@global .react-sigma-control > button': {
        display: 'block',
        border: 'none',
        margin: '0',
        padding: '0',
        width: 'var(--sigma-controls-size)',
        height: 'var(--sigma-controls-size)',
        lineHeight: 'var(--sigma-controls-size)',
        backgroundPosition: 'center',
        backgroundSize: '50%',
        backgroundRepeat: 'no-repeat',
        backgroundColor: 'var(--sigma-controls-background-color)',
        clip: 'rect(0,0,0,0)'
    },
    '@global .react-sigma-control > button:hover': {
        backgroundColor: 'var(--sigma-controls-background-color-hover)'
    },
    '@global .react-sigma-search': {
        backgroundColor: 'var(--sigma-controls-background-color)'
    },
    '@global .react-sigma-search label': { visibility: 'hidden' },
    '@global .react-sigma-search input': {
        color: 'var(--sigma-controls-color)',
        backgroundColor: 'var(--sigma-controls-background-color)',
        fontSize: '1em',
        width: '100%',
        margin: '0',
        border: 'none',
        padding: 'var(--sigma-controls-margin)',
        boxSizing: 'border-box'
    }
});
