styles for multiple options of search blocks

spearhead/assets/sass/block-extends/_search.scss

@@ -1,48 +1,64 @@
 .wp-block-search {
+
+    // wrong class on gutenberg editor, we'll need to change it after that's fixed
+    &.wp-block-search__icon-button.wp-block-search__button-inside { 
+        .wp-block-search__button { 
+            padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+        }
+    }
+
     // wrong class on gutenberg editor, we'll need to change it after that's fixed
-    &.wp-block-search__text-button { 
+    &.wp-block-search__text-button.wp-block-search__button-inside { 
 
         .wp-block-search__inside-wrapper{
             flex-direction: row-reverse;
-            align-items: center;
             padding-left: 0;
+            border: none;
+            border-bottom: var(--form--border-width) solid var(--form--border-color);
         }
 
         .wp-block-search__input {
+            border: none;
             padding: 0 0 0 10px;
             font-size: var(--global--font-size-sm);
         }
 
         .wp-block-search__button { 
             &.has-icon {
-                padding: 0;
                 margin-left: 0;
                 background: transparent;
-                border: none;
-                box-shadow: none;
                 color: var(--entry-header--color);
+                padding: 0;
+                border: none;
                 transform: scaleX(-1);
                 min-width: 14px;
-                width: 14px;
-                height: 14px;
                 svg {
-                    width: 100%;
-                    height: 100%;
+                    width: 14px;
+                    height: 14px;
                 }
             }
         }
     }
 
-    &.wp-block-search__button-inside {
-        .wp-block-search__inside-wrapper {
-            flex-direction: row-reverse;
-            border: none;
-            border-bottom: var(--form--border-width) solid var(--form--border-color);
-            @extend %input-search-style;
+    .wp-block-search__button { 
+        border: none;
+        box-shadow: none;
+        &.has-icon {
+            svg {
+                width: 24px;
+                height: 24px;
+            }
         }
     }
 
+    .wp-block-search__inside-wrapper {
+        align-items: center;
+        @extend %input-search-style;
+    }
+
     .wp-block-search__input {
+        border: none;
+        border-bottom: var(--form--border-width) solid var(--form--border-color);
         @extend %input-search-style;
     }
 }

spearhead/style-rtl.css

@@ -301,42 +301,58 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	margin-top: 0;
 }
 
-.wp-block-search.wp-block-search__text-button .wp-block-search__inside-wrapper {
+.wp-block-search.wp-block-search__icon-button.wp-block-search__button-inside .wp-block-search__button {
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+}
+
+.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__inside-wrapper {
 	flex-direction: row-reverse;
-	align-items: center;
 	padding-right: 0;
+	border: none;
+	border-bottom: var(--form--border-width) solid var(--form--border-color);
 }
 
-.wp-block-search.wp-block-search__text-button .wp-block-search__input {
+.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__input {
+	border: none;
 	padding: 0 10px 0 0;
 	font-size: var(--global--font-size-sm);
 }
 
-.wp-block-search.wp-block-search__text-button .wp-block-search__button.has-icon {
-	padding: 0;
+.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__button.has-icon {
 	margin-right: 0;
 	background: transparent;
-	border: none;
-	box-shadow: none;
 	color: var(--entry-header--color);
+	padding: 0;
+	border: none;
 	transform: scaleX(-1);
 	min-width: 14px;
+}
+
+.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__button.has-icon svg {
 	width: 14px;
 	height: 14px;
 }
 
-.wp-block-search.wp-block-search__text-button .wp-block-search__button.has-icon svg {
-	width: 100%;
-	height: 100%;
+.wp-block-search .wp-block-search__button {
+	border: none;
+	box-shadow: none;
 }
 
-.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
-	flex-direction: row-reverse;
+.wp-block-search .wp-block-search__button.has-icon svg {
+	width: 24px;
+	height: 24px;
+}
+
+.wp-block-search .wp-block-search__inside-wrapper {
+	align-items: center;
+}
+
+.wp-block-search .wp-block-search__input {
 	border: none;
 	border-bottom: var(--form--border-width) solid var(--form--border-color);
 }
 
-.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper, .wp-block-search .wp-block-search__input {
+.wp-block-search .wp-block-search__inside-wrapper, .wp-block-search .wp-block-search__input {
 	background: transparent;
 	color: var(--global--color-secondary);
 }

spearhead/style.css

@@ -301,42 +301,58 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	margin-top: 0;
 }
 
-.wp-block-search.wp-block-search__text-button .wp-block-search__inside-wrapper {
+.wp-block-search.wp-block-search__icon-button.wp-block-search__button-inside .wp-block-search__button {
+	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
+}
+
+.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__inside-wrapper {
 	flex-direction: row-reverse;
-	align-items: center;
 	padding-left: 0;
+	border: none;
+	border-bottom: var(--form--border-width) solid var(--form--border-color);
 }
 
-.wp-block-search.wp-block-search__text-button .wp-block-search__input {
+.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__input {
+	border: none;
 	padding: 0 0 0 10px;
 	font-size: var(--global--font-size-sm);
 }
 
-.wp-block-search.wp-block-search__text-button .wp-block-search__button.has-icon {
-	padding: 0;
+.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__button.has-icon {
 	margin-left: 0;
 	background: transparent;
-	border: none;
-	box-shadow: none;
 	color: var(--entry-header--color);
+	padding: 0;
+	border: none;
 	transform: scaleX(-1);
 	min-width: 14px;
+}
+
+.wp-block-search.wp-block-search__text-button.wp-block-search__button-inside .wp-block-search__button.has-icon svg {
 	width: 14px;
 	height: 14px;
 }
 
-.wp-block-search.wp-block-search__text-button .wp-block-search__button.has-icon svg {
-	width: 100%;
-	height: 100%;
+.wp-block-search .wp-block-search__button {
+	border: none;
+	box-shadow: none;
 }
 
-.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
-	flex-direction: row-reverse;
+.wp-block-search .wp-block-search__button.has-icon svg {
+	width: 24px;
+	height: 24px;
+}
+
+.wp-block-search .wp-block-search__inside-wrapper {
+	align-items: center;
+}
+
+.wp-block-search .wp-block-search__input {
 	border: none;
 	border-bottom: var(--form--border-width) solid var(--form--border-color);
 }
 
-.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper, .wp-block-search .wp-block-search__input {
+.wp-block-search .wp-block-search__inside-wrapper, .wp-block-search .wp-block-search__input {
 	background: transparent;
 	color: var(--global--color-secondary);
 }

spearhead/variables.css

@@ -90,9 +90,12 @@
 	/* Forms */
 	--form--border-color: var(--global--color-secondary);
 	--form--border-width: 1px;
-	--button--padding-vertical: calc(12px - var(--button--border-width));
-	--button--padding-horizontal: var(--button--padding-vertical);
-	--form--border-color: var(--global--color-secondary);
+
+	/* Buttons */
+	--form--spacing-unit: 6px;
+	--button--padding-vertical: var(--form--spacing-unit);
+	--button--padding-horizontal: var(--form--spacing-unit);
+
 }
 
 @media ( prefers-color-scheme: dark ) {