/** @format */

import styled from 'styled-components';

const Block = styled.div`
	height: 100%;
	position: relative;
`;

const Input = styled.div`
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	box-sizing: border-box;
	width: 200px;
	height: 100%;
	max-height: 45px;
	border-radius: 3px;
	background-color: #fff;
	/* border: 0; */
	padding: 0 30px 0 10px;
	font-size: 22px;
	color: #000;
	display: flex;
	align-items: center;

	:focus {
		border-color: inherit;
		-webkit-box-shadow: none;
		box-shadow: none;
		padding: 0 10px;
		font-size: 24px;
		outline: 0 none;
	}

	position: relative;
	margin: 0;
	outline: none;

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

	/* Firefox */

	&[type='number'] {
		-moz-appearance: textfield;
	}
	> p {
		overflow-x: scroll;
		overflow-y: hidden;
		::-webkit-scrollbar {
			height: 5px;
		}

		/* Track */
		::-webkit-scrollbar-track {
			background: #fff0;
		}

		/* Handle */
		::-webkit-scrollbar-thumb {
			background: #abaaaa;
			border-radius: 10px;
		}

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

const ModalDropDown = styled.div`
	width: 200px;
	height: 150px;
	position: absolute;
	background-color: #c9d5d9;
	border-radius: 20px;
	padding: 15px;
	transition: ${({switchAnim})=> typeof switchAnim !== 'undefined' ? switchAnim ? '0.1s' : '0s' : '0.1s' };
	z-index: 15;
	bottom: 60px;
	left: 50%;
	
	${({ visiblevalue }) =>
		visiblevalue
			? {
					opacity: '1',
					transform: 'translate(-50%, 0)',
					display: 'block',
			  }
			: {
					opacity: '0',
					transform: 'translate(-50%, 0)',
					display: 'none',
			  }}
`;
ModalDropDown.Inset = styled.div`
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	::-webkit-scrollbar {
		width: 5px;
	}

	/* Track */
	::-webkit-scrollbar-track {
		background: #fff0;
	}

	/* Handle */
	::-webkit-scrollbar-thumb {
		background: #abaaaa;
		border-radius: 10px;
	}

	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
		background: #555;
	}
`;
ModalDropDown.Item = styled.div`
	font-size: 16px;
	transition: 0.2s;
	padding: 3px 8px;
	margin: 1px 0;
	border-radius: 10px;
	position: relative;
	:hover {
		background-color: #00000014;
	}
	${({ hoverBool }) =>
		hoverBool && {
			backgroundColor: '#00000014',
			padding: '3px 12px',
		}}
	.itemTime {
		position: absolute;
		bottom: 5px;
		right: 5px;
		font-size: 9px;
		color: #333;
		padding: 0;
		margin: 0;
	}
`;
ModalDropDown.FullWindow = styled.div`
	display: ${({ visiblevalue }) => (visiblevalue ? 'block' : 'none')};
	/* width: 100%;
	height: 100%; */
`;

export { Input, ModalDropDown };
export default Block;
