import {
    DialogActions,
    DialogTitle,
    Paper,
    styled,
    Typography,
} from "@mui/material";

export const ModalRoot = styled('div')(() => ({
    position: 'fixed',
    zIndex: 1300,
    inset: '0px'
}));

export const ModalRootBackdrop = styled('div')(() => ({
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    display: 'flex',
    zIndex: -1,
    position: 'fixed',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    opacity: 1,
    transition: 'opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms'
}));

export const ModalContainer = styled('div')(() => ({
    height: '100%',
    outline: 0,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    opacity: 1,
    transition: 'opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
}));

export const ModalPaper = styled(Paper)(({ theme }) => ({
    margin: '32px',
    position: 'relative',
    overflowY: 'auto',
    display: 'flex',
    flexDirection: 'column',
    maxHeight: 'calc(100% - 64px)',
    height: '100%',
    borderRadius: '4px',
    background: theme.palette.background.default
}));

export const ModalTitle = styled(DialogTitle)(() => ({
    minWidth: '300px',
    display: 'flex',
    alignItems: 'center',
    textTransform: 'uppercase',
    padding: '8px 24px 8px 12px',
}));

export const ModalTitleCaption = styled(Typography)(() => ({
    flex: '1 1 auto',
}));


export const ModalActions = styled(DialogActions)(() => ({
    justifyContent: 'center',
}));