import styled from 'styled-components';
import Box from '@mui/material/Box';
import { Typography } from '@mui/material';
import Button from '@mui/material/Button';
import DeleteIcon from '@mui/icons-material/Delete';
import CancelIcon from '@mui/icons-material/Cancel';
import CIcon from '@mui/icons-material/Close';
import SaveIcon from '@mui/icons-material/Save';
export const ZoneSectorAndDeleteButtonWrapper = styled.div`
position: relative;
`;
export const DeleteButton = styled(Button).attrs({
variant: 'outlined',
startIcon: ,
})`
position: absolute;
font-size: 1rem;
font-weight: 600;
color: red;
border: 3px solid red;
padding: 5px 10px;
top: -48px;
:hover {
border: 3px dashed red;
background-color: rgba(255, 0, 0, 0.1);
}
`;
export const RightSideWrapper = styled.div`
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
min-width: 500px;
width: 500px;
position: relative;
`;
export const SaveButton = styled(Button).attrs({
variant: 'contained',
startIcon: ,
})`
position: absolute;
font-size: 1rem;
font-weight: 600;
background-color: ${(props) => props.theme.palette.primary.main};
padding: 8px 15px;
right: 150px;
top: -49px;
:hover {
background-color: ${(props) => props.theme.palette.primary.dark};
}
`;
export const CancelButton = styled(Button).attrs({
variant: 'outlined',
startIcon: ,
})`
position: absolute;
font-size: 1rem;
font-weight: 600;
color: ${(props) => props.theme.palette.third.main};
border: 3px solid ${(props) => props.theme.palette.third.main};
padding: 5px 10px;
right: 0;
top: -48px;
:hover {
border: 3px dashed ${(props) => props.theme.palette.third.main};
background-color: rgba(246, 80, 38, 0.1);
}
`;
export const CloseIcon = styled(CIcon).attrs({
sx: {
color: 'red',
fontSize: '2.5rem',
},
})``;
export const ModalContainer = styled(Box).attrs({
width: 400,
height: 350,
bgcolor: 'background.paper',
boxShadow: 24,
zIndex: 1000,
marginBottom: '10%',
position: 'relative',
})`
padding: 0 25px 16px 25px;
`;
export const ModalTitle = styled(Typography).attrs({
variant: 'h5',
fontWeight: 600,
marginBottom: '20px',
})``;
export const ModalDescription = styled(Typography).attrs({
variant: 'body1',
paddingLeft: '10px',
})``;
export const ButtonsWrapper = styled.div`
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
position: absolute;
bottom: 15px;
left: 0;
padding: 0 20px;
`;
export const ModalButton = styled(Button).attrs((props) => ({
variant: 'contained',
size: 'large',
sx: {
backgroundColor: `${props.theme.palette.primary.main}`,
minWidth: '35%',
maxWidth: '45%',
height: 'auto',
},
}))`
:hover {
background-color: ${(props) => props.theme.palette.primary.dark};
}
`;