import { AlignTargetContainer } from '../Creator/Containers';
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
    root: {
        marginTop: 46,
        [theme.breakpoints.down('xs')]: {
            maxHeight: 'calc(100% - 216px)',
        },
        [theme.breakpoints.up('sm')]: {
            [theme.orientation.landscape]: {
                marginTop: 0,
                maxHeight: 'calc(100% - 172px)',
            },
        },
        [theme.orientation.landscape]: {
            maxHeight: 'calc(100% - 136px)',
        },
        [theme.orientation.portrait]: {
            maxHeight: 'calc(100% - 216px)',
            [theme.breakpoints.up('sm')]: {
                maxHeight: 'calc(100% - 216px)',
            },
            [theme.breakpoints.up('md')]: {
                maxHeight: 'calc(100% - 172px)',
                marginTop: 0,
            },
        },
        '@media (min-aspect-ratio: 13/9) and (min-height: 280px) and (max-width: 950px)': {
            maxHeight: '100%',
        },
    },
});
export const DesignerAlignTarget = withStyles(styles, { name: 'DesignerAlignTarget' })(AlignTargetContainer);
