/** @format */

import styled from 'styled-components';

const DropDownStyle = styled.div`
	grid-column: 1/4;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	position: relative;
`;
DropDownStyle.Text = styled.div`
	font-size: 14px;
	display: grid;
	grid-template-columns: 55px 1fr;
	.status {
		color: orange;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	.sfdsdfsd {
		width: 100%;
		height: 1px;
		border-top: 1px dashed orange;
		grid-column: 2/3;
	}
`;
DropDownStyle.Window = styled.div`
	display: ${({ visiblevalue }) => (visiblevalue == 1 ? 'block' : 'none')};
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 99999999;
`;
DropDownStyle.DropDown = styled.div`
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
	padding: 3px 3px 30px 3px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	clip-path: polygon(100% 0, 100% 93%, 57% 93%, 50% 100%, 43% 93%, 0 93%, 0 0);
	z-index: 99999999999;
	/* border-radius: 10px; */
	background-color: #fff;
	position: absolute;
	bottom: 25px;
	left: 50%;
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 150px;
	transition: 0.1s;
	/* padding: 10px 0; */
	.select {
		padding: 5px 10px;
		white-space: nowrap;
		color: #111827;
		font-size: 20px;
		margin: 2px 0;
		border-radius: 10px;
		:hover {
			background-color: #e9e9e9;
			margin: 2px 0;
			border-radius: 10px;
			padding: 5px 10px;
		}
	}
	${({ visiblevalue }) =>
		visiblevalue == 1
			? {
					opacity: '1',
					transform: 'scale(1) translate(-50%, 0)',
			  }
			: {
					opacity: '0',
					transform: 'scale(0) translate(-50%, 0)',
			  }}
`;

export default DropDownStyle;
