<script>
	import Icon from '@iconify/svelte';
	let x = 4;
</script>

<div class=" m-auto max-w-6xl">
	<div class="flex flex-row items-center justify-center space-x-4">
		<div class="group relative space-x-2 border-r border-sky-400 px-3 pb-2 text-white">
			<div class="flex flex-row items-center justify-center">
				<div class="flex flex-col items-center">
					<span class="text-2xl">Year</span>
					<span>2023</span>
				</div>

				<div>
					<Icon icon="mdi:chevron-down" class="flex group-hover:hidden" />
					<Icon icon="mdi:chevron-up" class="hidden group-hover:flex" />
				</div>
			</div>

			<div
				class="dropdown absolute top-16 left-[-90px] hidden w-64 rounded-lg border border-sky-500 bg-blue-900 group-hover:flex before:top-[-20px] before:left-[110px]"
			>
				<ul class="w-full p-5">
					<li class="mb-4"></li>
					<li class="my-1 bg-sky-500 px-2 font-bold transition duration-100 hover:bg-sky-600">
						2023
					</li>
					<li class="my-1 bg-sky-500 px-2 font-bold transition duration-100 hover:bg-sky-600">
						2022
					</li>
					<li class="my-1 bg-sky-500 px-2 font-bold transition duration-100 hover:bg-sky-600">
						2021
					</li>
					<li class="my-1 bg-sky-500 px-2 font-bold transition duration-100 hover:bg-sky-600">
						2020
					</li>
					<li class="my-1 bg-sky-500 px-2 font-bold transition duration-100 hover:bg-sky-600">
						2019
					</li>
					<li class="my-1 bg-sky-500 px-2 font-bold transition duration-100 hover:bg-sky-600">
						2018
					</li>
				</ul>
			</div>
		</div>

		<div class="group relative space-x-2 border-r border-sky-400 px-3 pb-2 text-white">
			<div class="flex flex-row items-center justify-center">
				<div class="flex flex-col items-center">
					<span class="text-2xl">Format</span>
					<span>ODI</span>
				</div>

				<div>
					<Icon icon="mdi:chevron-down" />
				</div>
			</div>

			<div
				class="dropdown absolute top-16 left-[-90px] hidden w-64 rounded-lg border border-sky-500 bg-blue-900 group-hover:flex before:top-[-20px] before:left-[115px]"
			>
				<ul class="w-full p-5">
					<li class="mb-4"></li>

					<li class="my-1 bg-sky-500 px-2 font-bold transition duration-100 hover:bg-sky-600">
						Test
					</li>
					<li class="my-1 bg-sky-500 px-2 font-bold transition duration-100 hover:bg-sky-600">
						T20 International
					</li>
					<li class="my-1 bg-sky-500 px-2 font-bold transition duration-100 hover:bg-sky-600">
						One Day International
					</li>
				</ul>
			</div>
		</div>

		<div class="group relative space-x-2 border-r border-sky-400 px-3 pb-2 text-white">
			<div class="flex flex-row items-center justify-center">
				<div class="flex flex-col items-center">
					<span class="text-2xl">Tour</span>
					<span>Afghanistan Tour of India</span>
				</div>

				<div>
					<Icon icon="mdi:chevron-down" />
				</div>
			</div>

			<div
				class="dropdown absolute top-[63px] left-1/2 m-auto hidden w-64 -translate-x-1/2 transform rounded-lg border border-sky-500 bg-blue-900 group-hover:flex before:top-[-20px] before:left-[115px]"
			>
				<ul class="w-full p-5">
					<li class="mb-4">
						<input
							type="text"
							placeholder="Search"
							class=" w-full rounded-full border border-sky-500 bg-transparent px-3 focus:outline-0"
						/>
					</li>

					<li class="my-1 bg-sky-500 px-2 font-bold transition duration-100 hover:bg-sky-600">
						Afghanistan Tour of UAE
					</li>
					<li class="my-1 bg-sky-500 px-2 font-bold transition duration-100 hover:bg-sky-600">
						Ireland Tour of Afghanistan
					</li>
					<li class="my-1 bg-sky-500 px-2 font-bold transition duration-100 hover:bg-sky-600">
						Afghanistan Tour of Sri-Lanka
					</li>
					<li
						class="my-1 line-clamp-1 bg-sky-500 px-2 font-bold transition duration-100 hover:bg-sky-600"
						title="South Africa Tour of Afghanistan"
					>
						South Africa Tour of Afghanistan
					</li>
				</ul>
			</div>
		</div>

		<div class="group relative space-x-2 pb-2 text-white">
			<div class="flex flex-row items-center justify-center">
				<div class="flex flex-col items-center">
					<span class="text-2xl">Venue</span>
					<span>B S L Cricket Stadium, Bokaro</span>
				</div>

				<div>
					<Icon icon="mdi:chevron-down" />
				</div>
			</div>

			<div
				class="dropdown absolute top-[63px] left-1/2 hidden w-64 -translate-x-1/2 transform rounded-lg border border-sky-500 bg-blue-900 group-hover:flex before:top-[-20px] before:left-[115px]"
			>
				<ul class="w-full p-5">
					<li class="mb-4">
						<input
							type="text"
							placeholder="Search"
							class=" w-full rounded-full border border-sky-500 bg-transparent px-3 focus:outline-0"
						/>
					</li>

					<li class="my-1 bg-sky-500 px-2 font-bold transition duration-100 hover:bg-sky-600">
						B S L Cricket Stadium, Bokaro
					</li>
					<li
						class="my-1 line-clamp-1 bg-sky-500 px-2 font-bold transition duration-100 hover:bg-sky-600"
						title="Emerald Heights International School Ground, Indore"
					>
						Emerald Heights International School Ground, Indore
					</li>
					<li class="my-1 bg-sky-500 px-2 font-bold transition duration-100 hover:bg-sky-600">
						Keenan Stadium, Jamshedpur
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>

<style>
	.dropdown::before {
		position: absolute;
		/*top: -20px;*/
		/*left: 65px;*/
		height: 0;
		width: 0;
		transform: rotate(360deg);
		content: ' ';
		pointer-events: none;
		border-width: 0.625rem;
		border-color: rgba(80, 132, 196, 0);
		border-bottom-color: #5084c4;
	}
</style>
