fix: consistent height and focus states

apps/scandic-web/components/TempDesignSystem/Form/Country/country.module.css

@@ -3,6 +3,7 @@
   border: 1px solid var(--Border-Interactive-Default);
   border-radius: var(--Corner-radius-md);
   position: relative;
+  height: 56px;
 
   &[data-required] .label::after {
     content: " *";
@@ -15,7 +16,8 @@
   }
 
   &[data-focused] {
-    border-color: var(--Border-Interactive-Focus);
+    outline-offset: -2px;
+    outline: 2px solid var(--Border-Interactive-Focus);
 
     .button,
     .input {
@@ -54,9 +56,9 @@
   box-sizing: border-box;
   display: flex;
   gap: var(--Space-x1);
-  height: 56px;
   padding: var(--Space-x15);
   width: 100%;
+  height: 100%;
 }
 
 .displayText {