search bar custom styles

scss/atat.scss

@@ -27,6 +27,7 @@
 @import 'components/modal';
 @import 'components/footer';
 @import 'components/progress_menu.scss';
+@import 'components/search_bar';
 
 @import 'sections/login';
 @import 'sections/request_approval';

scss/components/_search_bar.scss

@@ -0,0 +1,72 @@
+.search-bar {
+  @include grid-row;
+  @include panel-base;
+  @include panel-theme-default;
+  @include panel-margin;
+  padding: $gap;
+  flex-wrap: wrap;
+
+  .usa-input {
+    margin: 0;
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: 100%;
+    height: $search-input-height;
+    position: relative;
+    margin-top: $gap;
+
+    @include media($large-screen) {
+      flex-shrink: 1;
+      flex-basis: auto;
+      margin-top: 0;
+      margin-left: $gap;
+    }
+
+    label {
+      @include hide;
+    }
+
+    &:first-child {
+      margin-left: 0;
+      margin-top: 0;
+    }
+  }
+
+  .search-input {
+    @include media($medium-screen) {
+      flex-basis: 50%;
+    }
+
+    @media (min-width:800px) and (max-width:900px) {
+      flex-basis: auto;
+    }
+
+    input[type='search'] {
+      width: auto;
+      height: $search-input-height;
+      width: calc(100% - #{$search-button-width});
+      max-width: none;
+      font-size: 1.6rem;
+    }
+
+    button {
+      position: absolute;
+      top: 0;
+      right: 0;
+      margin: 0;
+      padding: 0;
+      height: $search-input-height;
+      width: $search-button-width;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      text-align: center;
+
+      &:after {
+        content: url('/static/icons/search.svg');
+        display: inline-block;
+        width: 1.6rem;
+        height: 1.6rem;
+      }
+    }
+  }
+}

scss/core/_variables.scss

@@ -8,6 +8,8 @@ $topbar-height:           4.8rem;
 $icon-bar-width:          4.0rem;
 $icon-size-small:         2.4rem;
 $hover-transition-time:   0.2s;
+$search-input-height:     4.4rem;
+$search-button-width:     5.0rem;
 
 /*
  * USWDS Variables