import { makeStyles } from '@mui/styles';
export var useStyles = makeStyles(function (theme) { return ({
    root: {
        display: 'flex',
        alignContent: 'center',
        flexDirection: 'column'
    },
    main: {
        position: 'relative',
        padding: '0 86px',
        marginTop: 'auto'
    },
    mainImageContainer: {
        display: 'flex',
        alignContent: 'center',
        height: '100%',
        width: '100%'
    },
    mainImage: {
        maxWidth: 'calc(100vw - 512px)',
        maxHeight: 'calc(100vh - 192px)',
        margin: '0 auto',
        userSelect: 'none'
    },
    arrowButton: {
        backgroundColor: theme.palette.divider,
        color: 'white',
        '&:hover': {
            backgroundColor: theme.palette.divider
        }
    },
    arrowButtonPrev: {
        position: 'absolute',
        top: '50%',
        left: '16px',
        transform: 'translateY(-50%)'
    },
    arrowButtonNext: {
        position: 'absolute',
        top: '50%',
        right: '16px',
        transform: 'translateY(-50%)'
    }
}); });
