import { makeStyles } from '@mui/styles';
export var useStyles = makeStyles(function () { return ({
    '@global .rst__node': {
        minWidth: '100%',
        whiteSpace: 'nowrap',
        position: 'relative',
        textAlign: 'left'
    },
    '@global .rst__node.rst__rtl': {
        textAlign: 'right'
    },
    '@global .rst__nodeContent': {
        position: 'absolute',
        top: 0,
        bottom: 0
    },
    /* ==========================================================================
       Scaffold
    
        Line-overlaid blocks used for showing the tree structure
       ========================================================================== */
    '@global .rst__lineBlock, .rst__absoluteLineBlock': {
        height: '100%',
        position: 'relative',
        display: 'inline-block'
    },
    '@global .rst__absoluteLineBlock': {
        position: 'absolute',
        top: 0
    },
    '@global .rst__lineHalfHorizontalRight::before, .rst__lineFullVertical::after, .rst__lineHalfVerticalTop::after, .rst__lineHalfVerticalBottom::after': {
        position: 'absolute',
        content: '',
        backgroundColor: 'black'
    },
    /**
     * +-----+
     * |     |
     * |  +--+
     * |     |
     * +-----+
     */
    '@global .rst__lineHalfHorizontalRight::before': {
        height: '1px',
        top: '50%',
        right: 0,
        width: '50%'
    },
    '@global .rst__rtl.rst__lineHalfHorizontalRight::before': {
        left: 0,
        right: 'initial'
    },
    /**
     * +--+--+
     * |  |  |
     * |  |  |
     * |  |  |
     * +--+--+
     */
    '@global .rst__lineFullVertical::after, .rst__lineHalfVerticalTop::after, .rst__lineHalfVerticalBottom::after': {
        width: '1px',
        left: '50%',
        top: 0,
        height: '100%'
    },
    /**
     * +--+--+
     * |  |  |
     * |  |  |
     * |  |  |
     * +--+--+
     */
    '@global .rst__rtl.rst__lineFullVertical::after, .rst__rtl.rst__lineHalfVerticalTop::after, .rst__rtl.rst__lineHalfVerticalBottom::after': {
        right: '50%',
        left: 'initial'
    },
    /**
     * +-----+
     * |  |  |
     * |  +  |
     * |     |
     * +-----+
     */
    '@global .rst__lineHalfVerticalTop::after': {
        height: '50%'
    },
    /**
     * +-----+
     * |     |
     * |  +  |
     * |  |  |
     * +-----+
     */
    '@global .rst__lineHalfVerticalBottom::after': {
        top: 'auto',
        bottom: 0,
        height: '50%'
    },
    /* Highlight line for pointing to dragged row destination
       ========================================================================== */
    /**
     * +--+--+
     * |  |  |
     * |  |  |
     * |  |  |
     * +--+--+
     */
    '@global .rst__highlightLineVertical': {
        zIndex: 3
    },
    '@global .rst__highlightLineVertical::before': {
        position: 'absolute',
        content: '',
        backgroundColor: '#36c2f6',
        width: '8px',
        marginLeft: '-4px',
        left: '50%',
        top: 0,
        height: '100%'
    },
    '@global .rst__rtl.rst__highlightLineVertical::before': {
        marginLeft: 'initial',
        marginRight: '-4px',
        left: 'initial',
        right: '50%'
    },
    '@keyframes arrow-pulse': {
        '0%': {
            transform: 'translate(0, 0)',
            opacity: 0
        },
        '30%': {
            transform: 'translate(0, 300%)',
            opacity: 1
        },
        '70%': {
            transform: 'translate(0, 700%)',
            opacity: 1
        },
        '100%': {
            transform: 'translate(0, 1000%)',
            opacity: 0
        }
    },
    '@global .rst__highlightLineVertical::after': {
        content: '',
        position: 'absolute',
        height: 0,
        marginLeft: '-4px',
        left: '50%',
        top: 0,
        borderLeft: '4px solid transparent',
        borderRight: '4px solid transparent',
        borderTop: '4px solid white',
        animation: 'arrow-pulse 1s infinite linear both'
    },
    '@global .rst__rtl.rst__highlightLineVertical::after': {
        marginLeft: 'initial',
        marginRight: '-4px',
        right: '50%',
        left: 'initial'
    },
    /**
     * +-----+
     * |     |
     * |  +--+
     * |  |  |
     * +--+--+
     */
    '@global .rst__highlightTopLeftCorner::before': {
        zIndex: 3,
        content: '',
        position: 'absolute',
        borderTop: 'solid 8px #36c2f6',
        borderLeft: 'solid 8px #36c2f6',
        boxSizing: 'border-box',
        height: 'calc(50% + 4px)',
        top: '50%',
        marginTop: '-4px',
        right: 0,
        width: 'calc(50% + 4px)'
    },
    '@global .rst__rtl.rst__highlightTopLeftCorner::before': {
        borderRight: 'solid 8px #36c2f6',
        borderLeft: 'none',
        left: 0,
        right: 'initial'
    },
    /**
     * +--+--+
     * |  |  |
     * |  |  |
     * |  +->|
     * +-----+
     */
    '@global .rst__highlightBottomLeftCorner': {
        zIndex: 3
    },
    '@global .rst__highlightBottomLeftCorner::before': {
        content: '',
        position: 'absolute',
        borderBottom: 'solid 8px #36c2f6',
        borderLeft: 'solid 8px #36c2f6',
        boxSizing: 'border-box',
        height: 'calc(100% + 4px)',
        top: 0,
        right: '12px',
        width: 'calc(50% - 8px)'
    },
    '@global .rst__rtl.rst__highlightBottomLeftCorner::before': {
        borderRight: 'solid 8px #36c2f6',
        borderLeft: 'none',
        left: '12px',
        right: 'initial'
    },
    '@global .rst__highlightBottomLeftCorner::after': {
        content: '',
        position: 'absolute',
        height: 0,
        right: 0,
        top: '100%',
        marginTop: '-12px',
        borderTop: '12px solid transparent',
        borderBottom: '12px solid transparent',
        borderLeft: '12px solid #36c2f6'
    },
    '@global .rst__rtl.rst__highlightBottomLeftCorner::after': {
        left: 0,
        right: 'initial',
        borderRight: '12px solid #36c2f6',
        borderLeft: 'none'
    }
}); });
