import { Theme, createStyles } from '@material-ui/core';

export const styles = (theme: Theme) => createStyles({
    root: {
        width: '100%',
        height: '100%',
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'cover',
        top: 0,
        left: 0,
        position: "absolute",
        [theme.breakpoints.up('sm')]: {
            paddingTop: theme.spacing.unit * 4,
            paddingLeft: '25%',
            paddingRight: '25%',
        },
        [theme.breakpoints.up('lg')]: {
            paddingTop: theme.spacing.unit * 12,
            paddingLeft: '35%',
            paddingRight: '35%',
        }
    },
    titleBarRoot: {
        top: 0,
        left: 0,
        height: 24,
        width: '100%',
        backgroundColor: "rgba(0, 0, 0, 0.2)",
        textAlign: 'center',
        zIndex: 1000,
        verticalAlign: 'middle',
        WebkitUserSelect: 'none',
        WebkitAppRegion: "drag",
        position: "absolute"
    },
    titleBarText: {
        color: theme.palette.common.white,
        fontSize: 12,
        paddingTop: 2,
        paddingBottom: 1
    },
    paper: {
        height: '100%',
        [theme.breakpoints.up('sm')]: {
            height: 'auto',
            paddingLeft: theme.spacing.unit * 8,
            paddingRight: theme.spacing.unit * 8,
            paddingTop: theme.spacing.unit * 6,
        },
        paddingTop: theme.spacing.unit * 12,
        paddingLeft: theme.spacing.unit * 4,
        paddingRight: theme.spacing.unit * 4,
        paddingBottom: theme.spacing.unit * 6,
        textAlign: 'center',
    },
    welcomeLink: {
        color: theme.palette.primary.light
    },
    flexGrow: {
        flexGrow: 1
    },
    middlePadding: {
        height: theme.spacing.unit * 6
    },
    logo: {
        [theme.breakpoints.up('sm')]: {
            height: 64,
            width: "auto"
        },
    }
});