/** @format */

import styled from 'styled-components';

const MainBlock = styled.div`
	z-index: 999;
	display: ${({ hidden }) => (hidden ? 'flex' : 'none')};
	transition: 0.3s;
	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	${({ rollUp }) =>
		rollUp
			? {
					position: 'fixed',
					transition: '0.3s',
					width: '175px',
					height: '45px',
					bottom: '115px',
					left: '50px',
					borderRadius: '50px',
					display: 'flex',
					backgroundColor: '#37404bad',
					alignItems: 'center',
					padding: '10px',
			  }
			: {
					transition: '0.3s',
					width: '100%',
					height: '100%',
					position: 'fixed',
					bottom: '0',
					left: '0',
					backgroundColor: '#00000061',
					justifyContent: 'center',
					alignItems: 'center',
			  }}
	.rollUpVesion {
		display: ${({ rollUp }) => (!rollUp ? 'none' : 'flex')};
		justify-content: space-between;
		width: 100%;
	}

	.close {
		background-color: #9d0f23;
		border-radius: 50px;
		padding: 7px 17px;
		font-size: 12px;
		color: #fff;
		font-weight: bold;
	}
	.rollUpUn {
		color: #d0d0d1;
	}
`;

const ModalContainer = styled.div`
	display: ${({ rollUp }) => (rollUp ? 'none' : 'block')};
	background-color: #29303a;
	border-radius: 3px;
	width: 550px;
	hr {
		display: ${({ rollUp }) => (rollUp ? 'none' : 'block')};
		height: 1px;
		border-top: 1px solid #4c515a;
		width: 93%;
		margin: auto;
	}
`;
ModalContainer.Top = styled.div`
	display: ${({ rollUp }) => (rollUp ? 'none' : 'flex')};
	padding: 15px;
	align-items: center;
	justify-content: space-between;
	color: #bdc0c3;
	.rollUpButton {
		cursor: pointer;
	}
`;
ModalContainer.Head = styled.div`
	display: ${({ rollUp }) => (rollUp ? 'none' : 'flex')};
	padding: 15px;
	gap: 10px;
	.round {
		width: 54px;
		height: 54px;
		border-radius: 250px;
		background-color: #ccc;
	}
	.name {
		color: #fff;
		font-size: 18px;
	}
`;
ModalContainer.Body = styled.div`
	display: ${({ rollUp }) => (rollUp ? 'none' : 'block')};
	padding: 15px;
	margin: 15px;
	background-color: #232932;
	padding: 10px 12px;
	.title {
	}
	.description {
	}
`;
ModalContainer.Bottom = styled.div`
	margin: 15px;
	display: ${({ rollUp }) => (rollUp ? 'none' : 'block')};
`;
ModalContainer.Footer = styled.div`
	justify-content: ${({ justify }) => (justify ? justify : 'center')};
	align-items: center;
	padding: 15px;
	gap: 20px;
	color: #fff;
	.outcomingEventStyle {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 15px;
		> div {
			cursor: pointer;
			border: 1px solid #fff;
			border-radius: 250px;
			width: 40px;
			height: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.transferAreaIcon {
		position: relative;
	}
	.openNumpadAreaIcon {
		position: relative;
	}
	.redButton {
		background-color: #9d0f23;
		border-radius: 50px;
		padding: 10px 24px;
		font-size: 12;
		color: #fff;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}
	.greenButton {
		background-color: green;
		border-radius: 50px;
		padding: 10px 24px;
		font-size: 12;
		color: #000;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}
	display: ${({ rollUp }) => (rollUp ? 'none' : 'flex')};
`;
export { ModalContainer };
export default MainBlock;