1 files changed, 28 insertions, 27 deletions
diff --git a/src/components/organisms/forms/search-form/search-form.module.scss b/src/components/organisms/forms/search-form/search-form.module.scss
index f6570ce..1a440f0 100644
--- a/src/components/organisms/forms/search-form/search-form.module.scss
+++ b/src/components/organisms/forms/search-form/search-form.module.scss
@@ -10,52 +10,53 @@
   transition: all 0.3s ease-in-out 0s;
 }
 
-.btn {
-  background: var(--color-bg-tertiary);
-  border: fun.convert-px(2) solid var(--color-border);
-  box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow);
-  transition: all 0.25s linear 0s;
+.form {
+  display: flex;
+  flex-flow: row nowrap;
+
+  /* It needs to be nested because of wrong CSS ordering on production build. */
+  .btn {
+    background: var(--color-bg-tertiary);
+    border: fun.convert-px(2) solid var(--color-border);
+    box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow);
+    transition: all 0.25s linear 0s;
+  }
+
+  &--no-label {
+    .btn {
+      align-self: stretch;
+    }
+  }
+
+  &--has-label {
+    .btn {
+      align-self: flex-end;
+      height: fun.convert-px(52);
+    }
+  }
 
-  &:hover,
-  &:focus {
+  .btn:hover,
+  .btn:focus {
     .icon {
       transform: scale(0.85) rotate(20deg) translateX(#{fun.convert-px(2)})
         translateY(#{fun.convert-px(3)});
     }
   }
 
-  &:focus {
+  .btn:focus {
     outline: none;
     border-color: var(--color-primary);
     box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0
       var(--color-primary-dark);
   }
 
-  &:active {
+  .btn:active {
     .icon {
       transform: scale(0.7);
     }
   }
 }
 
-.form {
-  display: flex;
-  flex-flow: row nowrap;
-
-  &--no-label {
-    .btn {
-      align-self: stretch;
-    }
-  }
-
-  &--has-label {
-    .btn {
-      align-self: flex-end;
-      height: fun.convert-px(52);
-    }
-  }
-}
-
 .field {
   min-width: 0;