feat(WEB-162): final design edit profile page

components/TempDesignSystem/Form/Input/input.module.css

@@ -1,8 +1,44 @@
-.input {
-  border: 2px solid var(--UI-Grey-60);
-  border-radius: var(--Corner-radius-Small);
-  color: var(--UI-Grey-60);
-  height: 40px;
+.container {
+  align-content: center;
+  background-color: var(--Main-Grey-White);
+  border-color: var(--Scandic-Beige-40);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: var(--Corner-radius-Medium);
+  display: grid;
+  gap: var(--Spacing-x-half);
+  grid-template-rows: auto auto;
+  height: 60px;
   padding: var(--Spacing-x1) var(--Spacing-x2);
-  width: min(280px, 100%);
-}
+  transition: border-color 200ms ease;
+}
+
+.container:has(.input:not(:focus):placeholder-shown) {
+  gap: 0;
+  grid-template-rows: 1fr;
+}
+
+.container:has(.input:active, .input:focus) {
+  border-color: var(--Scandic-Blue-90);
+}
+
+.input {
+  background: none;
+  border: none;
+  color: var(--Main-Grey-100);
+  height: 18px;
+  margin: 0;
+  order: 2;
+  overflow: visible;
+  padding: 0;
+}
+
+.input:not(:active, :focus):placeholder-shown {
+  height: 0px;
+}
+
+.input:focus,
+.input:focus:placeholder-shown {
+  height: 18px;
+  outline: none;
+}