/** @format */

import styled from 'styled-components';

const Block = styled.div`
	transition: 0.3s;
	${({ hiddenState }) =>
		hiddenState
			? {
					width: '0',
					height: '0',
					padding: '0',
			  }
			: {
					width: '280px',
					height: '250px',
					padding: '60px 3px 5px 0',
			  }}

	position: absolute;
	bottom: 45px;
	left: 50%;
	transform: translate(-50%, 0);
	background-color: #232932f2;
	border-radius: 10px;
	/* width */
	::-webkit-scrollbar {
		width: 10px !important;
	}

	/* Track */
	::-webkit-scrollbar-track {
		background: #ffffff00 !important;
	}

	/* Handle */
	::-webkit-scrollbar-thumb {
		background: #ffffff4a !important;
		border-radius: 20px;
	}

	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
		background: #ffffff4a !important;
	}
`;

Block.Inset = styled.div`
	${({ hiddenState }) => (hiddenState ? { padding: '0' } : { padding: '5px' })}
	padding: 0 2px 0 5px;
	height: 100%;
	width: 100%;

	overflow-y: scroll;

	border-radius: 10px;
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 5px;
`;
Block.Section = styled.div`
	border-radius: 15px;
	width: 100%;
	height: 30px;
	background-color: #ffffff8a;
	padding: 0 8px;
	display: grid;
	grid-template-columns: 1fr 30px;
	align-items: center;
	grid-gap: 10px;
	p {
		margin: 0;
		padding: 0;
	}
	display: flex;
	justify-content: space-between;
	.name {
		font-size: 14px;
	}
	.phone_number {
		font-size: 12px;
		background-color: #a0c13d;
		padding: 2px 5px;
		min-width: 40px;
		border-radius: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
`;
Block.Input = styled.input`
	${({ hiddenState }) =>
		hiddenState ? { display: 'none' } : { display: 'block' }}
	color: #fff;
	position: absolute;
	width: 258px;
	height: 40px;
	top: 3px;
	background-color: #ffffff1c;
	transform: translate(5px, 10px);
	border-radius: 10px;
	padding: 3px;
	font-size: 20px;
	:focus {
		border-color: inherit;
		-webkit-box-shadow: none;
		box-shadow: none;
		padding: 0 10px;
		font-size: 24px;
		outline: 0 none;
	}
	outline: none;

	&::-webkit-outer-spin-button,
	&::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	/* Firefox */
	&[type='number'] {
		-moz-appearance: textfield;
	}
`;

export default Block;
