search input fields with button appearing when terms inserted

src/assets/scss/_settings.scss

@@ -463,7 +463,7 @@ $select-background: $white;
 $select-triangle-color: $primary-color;
 $select-radius: $global-radius;
 $input-color: $primary-color;
-$input-placeholder-color: scale-color($primary-color, $lightness: 60%); //$antracite-grey;
+$input-placeholder-color: scale-color($primary-color, $lightness: 60%);
 $input-font-family: inherit;
 $input-font-size: rem-calc(16);
 $input-font-weight: $global-weight-normal;

src/assets/scss/components/_buttons.scss

@@ -42,7 +42,6 @@ button,.button {
     background-color: $primary-color;
     color: $white;
     border-radius:$global-radius-archive;
-    // padding:0;
     border: none;
   }
 }

src/assets/scss/components/_forms.scss

@@ -1,14 +1,51 @@
 .search{
+  .input-group * {
+    margin: 0;
+  }
+  .input-group {
+    position: relative;
+    border-radius: 4rem;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+  }
+  .input-group .appear {
+    right: 0;
+    position: absolute;
+    height: 100%;
+    padding: 0.3rem 1rem;
+  }
   .button{
     border-color: $primary-color;
   }
-  button.appear{
+  .appear{
     display:none;
   }
-  input:not(:placeholder-shown) {
+  input{
-    + button {
+    &:active{
-      display: block;
+      border-color: $primary-color;
-      z-index: 2;
+      background-color: $input-background-focus;
+    }
+    &:focus,&:focus-within{
+      border-color: $primary-color;
+      background-color: $input-background;
+    }
+    &:not(:placeholder-shown) {
+      border:none;
+      background-color: $input-background-focus;
+      position: relative;
+      right: 2rem;
+      + .appear {
+        display: block;
+        color: $primary-color;
+        background-color: $input-background-focus;
+        z-index: 2;
+        &:hover {
+          color: $white;
+          background-color: $primary-color;
+        }
+
+      }
     }
   }
   .hollow {