fixed searchbar

assets/sass/_theme/_utils.sass

@@ -267,7 +267,7 @@
     appearance: none
     background: transparent
     border: none
-    border-radius: none
+    border-radius: 0
     cursor: pointer
     user-select: none
     &:active,

assets/sass/_theme/design-system/search.sass

 .pagefind-ui__toggle, 
+.pagefind-ui__button, 
 .search__close
     @include button-reset
     @include meta
@@ -13,8 +14,9 @@
         width: 100%
 .search__close
     @include icon-block(close, after)
-    position: absolute
+    position: fixed
     right: $spacing3
+    z-index: 9
     @include media-breakpoint-down(md)
         right: 0
         top: half($spacing0)
@@ -37,35 +39,45 @@
     &[aria-hidden=true]
         display: none
     .pagefind-ui
+        &::before
+            content: ""
+            background: $color-background
+            height: calc(#{$spacing3} + #{$spacing1} + #{$spacing4})
+            width: 100%
+            position: fixed
+            top: 0
+            left: 0
+            z-index: 5
+            @include media-breakpoint-down(md)
+                height: calc(#{$spacing3} + #{half($spacing0)} + #{$spacing4})
         &__search-input
             border-left: 0
             border-right: 0
             border-radius: 0
             border-top: 0
             padding-right: $spacing1 !important
-            position: relative
+            position: fixed
+            z-index: 6
             @include media-breakpoint-down(md)
-                width: 100%
                 margin-bottom: $spacing1
         &__button[type="button"]
-            background: $color-text
-            border-radius: 0
-            color: $color-background
-            display: block
-            margin: $spacing4 auto 0
-            @include media-breakpoint-down(md)
-                margin-top: $spacing2
+            @include button-reset
+            @include link($color-text)
+            margin-top: $spacing2
+            padding: 0
         &__message
             @include meta
             color: $color-text-alt
             text-align: right
+            z-index: 11
+            position: fixed
+            top: calc(#{$spacing2} + #{$spacing4})
         &__search-clear,
         &__suppressed
             display: none
             pointer-events: none
         &__drawer
             position: relative
-            z-index: 99
         &__result
             list-style: none
             position: relative
@@ -90,13 +102,19 @@
             @include stretched-link
         @include media-breakpoint-up(md)
             &__form
-                position: relative
+            position: relative
                 width: col(8)
             &__search-input,
             &__message
                 width: col(8,8)
+            &__results-area
+                padding-top: $spacing4
+            &__search-input,
+            &__message
+                width: col(8)
+        @include media-breakpoint-down(md)
+            &__search-input,
             &__message
-                position: absolute
-                top: $spacing0
+                width: calc(100% - #{$spacing2})
             &__results-area
-                padding-top: $spacing3
\ No newline at end of file
+                padding-top: calc(#{$spacing3} + #{half($spacing0)})
\ No newline at end of file