import { styled } from "@mui/material";

const drawerWidth = 388;

export const FloatingMain = styled('main')(({ theme }) => ({
    height: 'calc(100% - 65px)',
    flexGrow: 1,
    overflow: 'hidden',
    marginTop: 65,
    marginLeft: 65,
    backgroundColor: theme.palette.background.default,
}))

export const SiziableMain = styled('main')(({ theme }) => ({
    height: 'calc(100% - 65px)',
    flexGrow: 1,
    overflow: 'hidden',
    marginTop: 65,
    marginLeft: drawerWidth,
    width: `calc(100% - ${drawerWidth}px)`,
    transition: theme.transitions.create(['width', 'margin'], {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.enteringScreen,
    }),
    backgroundColor: theme.palette.background.default,
}))