fix(SW-1043): updated country input so whole field is clickable

components/TempDesignSystem/Form/Country/country.module.css

@@ -3,39 +3,31 @@
 }
 
 .comboBoxContainer {
+  position: relative;
+  height: 60px;
+}
+
+.label {
+  position: absolute;
+  left: var(--Spacing-x2);
+  top: var(--Spacing-x-one-and-half);
+  pointer-events: none;
+}
+
+.input {
   background-color: var(--Main-Grey-White);
   border-color: var(--Scandic-Beige-40);
   border-radius: var(--Corner-radius-Medium);
   border-style: solid;
   border-width: 1px;
-  display: grid;
+  padding: var(--Spacing-x4) var(--Spacing-x2) var(--Spacing-x1);
-  gap: var(--Spacing-x-half);
+  width: 100%;
-  grid-template-areas:
+  height: 100%;
-    "label chevron"
-    "input chevron";
-  grid-template-columns: 1fr auto;
-  grid-template-rows: auto auto;
-  height: 60px;
-  padding: var(--Spacing-x1) var(--Spacing-x2);
-}
 
-.comboBoxContainer:has(
+  &[aria-invalid="true"],
-    .input[data-invalid="true"],
+  &[data-invalid="true"] {
-    .input[aria-invalid="true"]
+    border-color: var(--Scandic-Red-60);
-  ) {
+  }
-  border-color: var(--Scandic-Red-60);
-}
-
-.label {
-  grid-area: label;
-}
-
-.input {
-  background-color: var(--Main-Grey-White);
-  border: none;
-  grid-area: input;
-  height: 18px;
-  padding: 0;
 }
 
 .input,
@@ -50,8 +42,12 @@
   grid-area: chevron;
   height: 100%;
   justify-self: flex-end;
-  padding-left: 0;
+  padding-left: var(--Spacing-x2);
   padding-right: var(--Spacing-x2);
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  outline: none;
 }
 
 .popover {