import {
    Button,
    styled, 
    TextField,
    TableCell,
    TableContainer,
} from "@mui/material";

export const ExcelUploadContainer = styled('div')(() => ({
    display: 'flex',
    width: '100%',
    height: 'calc(100% + 40px)',
    overflow: 'hidden',
    minWidth: '900px',
    position: 'relative',
}));

export const ExcelUploadLeft = styled('div')(({theme}) => ({
    display: 'flex',
    flexDirection: 'column',
    flexGrow: '1',
    height: '100%',
    overflow: 'hidden',
    maxWidth: '400px',
    borderRightWidth: '1px',
    borderRightStyle: 'solid',
    borderColor: theme.palette.divider
}));

export const ExcelUploadLeftContent = styled('form')(() => ({
    display: 'flex',
    flexDirection: 'column',
    height: '100%',
    alignItems: 'center',
}));

export const ExcelUploadContent = styled('div')(() => ({
    flexGrow: 1,
    padding: '20px',
}));

export const ExcelUploadContentRow = styled('div')(() => ({
    display: 'flex',
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    margin: '40px 0px',
}));

export const ExcelUploadRowTextField = styled(TextField)(() => ({
    width: '250px',
}));

export const ExcelUploadCellTextField = styled(TextField)(() => ({
    width: '100%',
}));

export const ExcelUploadButton = styled(Button)(() => ({
    marginTop: '16px !important',
    marginBottom: '20px !important',
}));

export const ExcelUploadRight = styled('div')(() => ({
    display: 'flex',
    flexDirection: 'column',
    flexGrow: '1',
    height: '100%',
    overflow: 'hidden',
}));

export const ExcelUploadTable = styled(TableContainer)(() => ({
    width: '100%',
}));

export const ExcelUploadCell = styled(TableCell)(() => ({
    width: '50%',
}));