From 8e7f88632cb7ba43379a7f562d3b891f6e394097 Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Thu, 1 Feb 2024 18:22:27 +0100
Subject: [PATCH] introducing countryselect component

---
 src/assets/css/components/CountrySelect.scss | 46 +++++++++++++++++++-
 1 file changed, 44 insertions(+), 2 deletions(-)

diff --git a/src/assets/css/components/CountrySelect.scss b/src/assets/css/components/CountrySelect.scss
index c4668dc..4107b3d 100644
--- a/src/assets/css/components/CountrySelect.scss
+++ b/src/assets/css/components/CountrySelect.scss
@@ -1,11 +1,53 @@
 .country-select {
-	@apply bg-white border border-neutral-300 border-solid max-h-64 overflow-y-auto rounded-lg shadow-lg text-white w-fit;
+	@apply w-80 relative;
+	&__toggle,
 	&__country-list {
+		@apply bg-white  border-neutral-300 border border-solid  w-full;
+	}
+
+	&__toggle {
+		@apply rounded-md py-3
+		text-neutral-800
+		capitalize
+		text-base
+		flex
+		pl-8
+		my-0
+		cursor-pointer
+		items-center;
+
+		.flag {
+			@apply pr-4;
+		}
+
+		&:after {
+			@apply block w-4 h-4  absolute right-5
+			bg-center bg-no-repeat bg-contain;
+			content: "";
+			background-image: url("../../img/select_deploy_icon.svg");
+		}
+		&:hover {
+			&:after {
+				filter: invert(88%) sepia(38%) saturate(1041%) hue-rotate(341deg) brightness(108%)
+					contrast(88%);
+			}
+		}
+	}
+
+	&__country-list {
+		&[aria-hidden="true"] {
+			@apply hidden;
+		}
+		@apply max-h-64 my-0 absolute
+		z-10	
+		pl-8 overflow-y-auto rounded-b-lg shadow-lg w-full;
+		box-sizing: border-box;
 		overflow-y: scroll;
 		@apply list-none;
 	}
+
 	li {
-		@apply flex items-center text-neutral-800 py-1;
+		@apply flex items-center text-neutral-800 my-3 cursor-pointer;
 		.flag {
 			@apply pr-4;
 		}