Browse Source

disable hover styles on buttons that have a custom background

Maggie Cabrera 4 years ago
parent
commit
e80208752d

+ 8 - 13
seedlet/assets/css/style-editor.css

@@ -354,12 +354,12 @@ a {
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 
-.wp-block-a8c-blog-posts + .button:active {
+.wp-block-a8c-blog-posts + .button:not(.has-background):active {
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 }
 
-.wp-block-a8c-blog-posts + .button:hover, .wp-block-a8c-blog-posts + .button:focus, .wp-block-a8c-blog-posts + .has-focus.button {
+.wp-block-a8c-blog-posts + .button:not(.has-background):hover, .wp-block-a8c-blog-posts + .button:not(.has-background):focus, .wp-block-a8c-blog-posts + .button:not(.has-background).has-focus {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 }
@@ -644,12 +644,12 @@ object {
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 
-.wp-block-file .wp-block-file__button:active {
+.wp-block-file .wp-block-file__button:not(.has-background):active {
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 }
 
-.wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus {
+.wp-block-file .wp-block-file__button:not(.has-background):hover, .wp-block-file .wp-block-file__button:not(.has-background):focus, .wp-block-file .wp-block-file__button:not(.has-background).has-focus {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 }
@@ -909,11 +909,6 @@ dt {
 	font-weight: bold;
 }
 
-.wp-block-media-text .block-editor-inner-blocks {
-	padding-right: var(--global--spacing-horizontal);
-	padding-left: var(--global--spacing-horizontal);
-}
-
 .wp-block-navigation .wp-block-navigation__container {
 	background: var(--global--color-background);
 	padding: 0;
@@ -1151,12 +1146,12 @@ p.has-background {
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 
-.wp-block-search .wp-block-search__button:active {
+.wp-block-search .wp-block-search__button:not(.has-background):active {
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 }
 
-.wp-block-search .wp-block-search__button:hover, .wp-block-search .wp-block-search__button:focus, .wp-block-search .wp-block-search__button.has-focus {
+.wp-block-search .wp-block-search__button:not(.has-background):hover, .wp-block-search .wp-block-search__button:not(.has-background):focus, .wp-block-search .wp-block-search__button:not(.has-background).has-focus {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 }
@@ -2020,12 +2015,12 @@ pre.wp-block-verse {
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 
-.wp-block-a8c-blog-posts + .button:active {
+.wp-block-a8c-blog-posts + .button:not(.has-background):active {
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 }
 
-.wp-block-a8c-blog-posts + .button:hover, .wp-block-a8c-blog-posts + .button:focus, .wp-block-a8c-blog-posts + .has-focus.button {
+.wp-block-a8c-blog-posts + .button:not(.has-background):hover, .wp-block-a8c-blog-posts + .button:not(.has-background):focus, .wp-block-a8c-blog-posts + .button:not(.has-background).has-focus {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 }

+ 30 - 30
seedlet/assets/css/style-woocommerce-rtl.css

@@ -171,40 +171,40 @@ body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 
-body[class*="woocommerce"] #page .site-content #respond input#submit:active,
-body[class*="woocommerce"] #page .site-content a.button:active,
-body[class*="woocommerce"] #page .site-content button.button:active,
-body[class*="woocommerce"] #page .site-content input.button:active,
-body[class*="woocommerce"] #page .site-content .cart .button:active,
-body[class*="woocommerce"] #page .site-content a.added_to_cart:active,
-body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a:active,
-body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a:active {
+body[class*="woocommerce"] #page .site-content #respond input#submit:not(.has-background):active,
+body[class*="woocommerce"] #page .site-content a.button:not(.has-background):active,
+body[class*="woocommerce"] #page .site-content button.button:not(.has-background):active,
+body[class*="woocommerce"] #page .site-content input.button:not(.has-background):active,
+body[class*="woocommerce"] #page .site-content .cart .button:not(.has-background):active,
+body[class*="woocommerce"] #page .site-content a.added_to_cart:not(.has-background):active,
+body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a:not(.has-background):active,
+body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a:not(.has-background):active {
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 }
 
-body[class*="woocommerce"] #page .site-content #respond input#submit:hover,
-body[class*="woocommerce"] #page .site-content a.button:hover,
-body[class*="woocommerce"] #page .site-content button.button:hover,
-body[class*="woocommerce"] #page .site-content input.button:hover,
-body[class*="woocommerce"] #page .site-content .cart .button:hover,
-body[class*="woocommerce"] #page .site-content a.added_to_cart:hover,
-body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a:hover,
-body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a:hover, body[class*="woocommerce"] #page .site-content #respond input#submit:focus,
-body[class*="woocommerce"] #page .site-content a.button:focus,
-body[class*="woocommerce"] #page .site-content button.button:focus,
-body[class*="woocommerce"] #page .site-content input.button:focus,
-body[class*="woocommerce"] #page .site-content .cart .button:focus,
-body[class*="woocommerce"] #page .site-content a.added_to_cart:focus,
-body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a:focus,
-body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a:focus, body[class*="woocommerce"] #page .site-content #respond input.has-focus#submit,
-body[class*="woocommerce"] #page .site-content a.has-focus.button,
-body[class*="woocommerce"] #page .site-content button.has-focus.button,
-body[class*="woocommerce"] #page .site-content input.has-focus.button,
-body[class*="woocommerce"] #page .site-content .cart .has-focus.button,
-body[class*="woocommerce"] #page .site-content a.has-focus.added_to_cart,
-body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a.has-focus,
-body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a.has-focus {
+body[class*="woocommerce"] #page .site-content #respond input#submit:not(.has-background):hover,
+body[class*="woocommerce"] #page .site-content a.button:not(.has-background):hover,
+body[class*="woocommerce"] #page .site-content button.button:not(.has-background):hover,
+body[class*="woocommerce"] #page .site-content input.button:not(.has-background):hover,
+body[class*="woocommerce"] #page .site-content .cart .button:not(.has-background):hover,
+body[class*="woocommerce"] #page .site-content a.added_to_cart:not(.has-background):hover,
+body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a:not(.has-background):hover,
+body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a:not(.has-background):hover, body[class*="woocommerce"] #page .site-content #respond input#submit:not(.has-background):focus,
+body[class*="woocommerce"] #page .site-content a.button:not(.has-background):focus,
+body[class*="woocommerce"] #page .site-content button.button:not(.has-background):focus,
+body[class*="woocommerce"] #page .site-content input.button:not(.has-background):focus,
+body[class*="woocommerce"] #page .site-content .cart .button:not(.has-background):focus,
+body[class*="woocommerce"] #page .site-content a.added_to_cart:not(.has-background):focus,
+body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a:not(.has-background):focus,
+body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a:not(.has-background):focus, body[class*="woocommerce"] #page .site-content #respond input#submit:not(.has-background).has-focus,
+body[class*="woocommerce"] #page .site-content a.button:not(.has-background).has-focus,
+body[class*="woocommerce"] #page .site-content button.button:not(.has-background).has-focus,
+body[class*="woocommerce"] #page .site-content input.button:not(.has-background).has-focus,
+body[class*="woocommerce"] #page .site-content .cart .button:not(.has-background).has-focus,
+body[class*="woocommerce"] #page .site-content a.added_to_cart:not(.has-background).has-focus,
+body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a:not(.has-background).has-focus,
+body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a:not(.has-background).has-focus {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 }

+ 30 - 30
seedlet/assets/css/style-woocommerce.css

@@ -171,40 +171,40 @@ body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 
-body[class*="woocommerce"] #page .site-content #respond input#submit:active,
-body[class*="woocommerce"] #page .site-content a.button:active,
-body[class*="woocommerce"] #page .site-content button.button:active,
-body[class*="woocommerce"] #page .site-content input.button:active,
-body[class*="woocommerce"] #page .site-content .cart .button:active,
-body[class*="woocommerce"] #page .site-content a.added_to_cart:active,
-body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a:active,
-body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a:active {
+body[class*="woocommerce"] #page .site-content #respond input#submit:not(.has-background):active,
+body[class*="woocommerce"] #page .site-content a.button:not(.has-background):active,
+body[class*="woocommerce"] #page .site-content button.button:not(.has-background):active,
+body[class*="woocommerce"] #page .site-content input.button:not(.has-background):active,
+body[class*="woocommerce"] #page .site-content .cart .button:not(.has-background):active,
+body[class*="woocommerce"] #page .site-content a.added_to_cart:not(.has-background):active,
+body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a:not(.has-background):active,
+body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a:not(.has-background):active {
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 }
 
-body[class*="woocommerce"] #page .site-content #respond input#submit:hover,
-body[class*="woocommerce"] #page .site-content a.button:hover,
-body[class*="woocommerce"] #page .site-content button.button:hover,
-body[class*="woocommerce"] #page .site-content input.button:hover,
-body[class*="woocommerce"] #page .site-content .cart .button:hover,
-body[class*="woocommerce"] #page .site-content a.added_to_cart:hover,
-body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a:hover,
-body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a:hover, body[class*="woocommerce"] #page .site-content #respond input#submit:focus,
-body[class*="woocommerce"] #page .site-content a.button:focus,
-body[class*="woocommerce"] #page .site-content button.button:focus,
-body[class*="woocommerce"] #page .site-content input.button:focus,
-body[class*="woocommerce"] #page .site-content .cart .button:focus,
-body[class*="woocommerce"] #page .site-content a.added_to_cart:focus,
-body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a:focus,
-body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a:focus, body[class*="woocommerce"] #page .site-content #respond input.has-focus#submit,
-body[class*="woocommerce"] #page .site-content a.has-focus.button,
-body[class*="woocommerce"] #page .site-content button.has-focus.button,
-body[class*="woocommerce"] #page .site-content input.has-focus.button,
-body[class*="woocommerce"] #page .site-content .cart .has-focus.button,
-body[class*="woocommerce"] #page .site-content a.has-focus.added_to_cart,
-body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a.has-focus,
-body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a.has-focus {
+body[class*="woocommerce"] #page .site-content #respond input#submit:not(.has-background):hover,
+body[class*="woocommerce"] #page .site-content a.button:not(.has-background):hover,
+body[class*="woocommerce"] #page .site-content button.button:not(.has-background):hover,
+body[class*="woocommerce"] #page .site-content input.button:not(.has-background):hover,
+body[class*="woocommerce"] #page .site-content .cart .button:not(.has-background):hover,
+body[class*="woocommerce"] #page .site-content a.added_to_cart:not(.has-background):hover,
+body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a:not(.has-background):hover,
+body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a:not(.has-background):hover, body[class*="woocommerce"] #page .site-content #respond input#submit:not(.has-background):focus,
+body[class*="woocommerce"] #page .site-content a.button:not(.has-background):focus,
+body[class*="woocommerce"] #page .site-content button.button:not(.has-background):focus,
+body[class*="woocommerce"] #page .site-content input.button:not(.has-background):focus,
+body[class*="woocommerce"] #page .site-content .cart .button:not(.has-background):focus,
+body[class*="woocommerce"] #page .site-content a.added_to_cart:not(.has-background):focus,
+body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a:not(.has-background):focus,
+body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a:not(.has-background):focus, body[class*="woocommerce"] #page .site-content #respond input#submit:not(.has-background).has-focus,
+body[class*="woocommerce"] #page .site-content a.button:not(.has-background).has-focus,
+body[class*="woocommerce"] #page .site-content button.button:not(.has-background).has-focus,
+body[class*="woocommerce"] #page .site-content input.button:not(.has-background).has-focus,
+body[class*="woocommerce"] #page .site-content .cart .button:not(.has-background).has-focus,
+body[class*="woocommerce"] #page .site-content a.added_to_cart:not(.has-background).has-focus,
+body[class*="woocommerce"] #page .site-content .woocommerce .widget_shopping_cart .buttons a:not(.has-background).has-focus,
+body[class*="woocommerce"] #page .site-content .woocommerce.widget_shopping_cart .buttons a:not(.has-background).has-focus {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 }

+ 11 - 9
seedlet/assets/sass/base/_extends.scss

@@ -11,16 +11,18 @@
 	text-decoration: none;
 	padding: var(--button--padding-vertical) var(--button--padding-horizontal);
 
-	&:active {
-		color: var(--button--color-text-active);
-		background-color: var(--button--color-background-active);
-	}
+	&:not(.has-background) {
+		&:active {
+			color: var(--button--color-text-active);
+			background-color: var(--button--color-background-active);
+		}
 
-	&:hover,
-	&:focus,
-	&.has-focus {
-		color: var(--button--color-text-hover);
-		background-color: var(--button--color-background-hover);
+		&:hover,
+		&:focus,
+		&.has-focus {
+			color: var(--button--color-text-hover);
+			background-color: var(--button--color-background-hover);
+		}
 	}
 }
 

+ 32 - 32
seedlet/style-rtl.css

@@ -619,24 +619,24 @@ input[type="submit"]:after,
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 
-button:active,
-.button:active,
-input:active[type="submit"],
-.wp-block-button__link:active, .a8c-posts-list__view-all:active {
+button:not(.has-background):active,
+.button:not(.has-background):active,
+input:not(.has-background):active[type="submit"],
+.wp-block-button__link:not(.has-background):active, .a8c-posts-list__view-all:not(.has-background):active {
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 }
 
-button:hover,
-.button:hover,
-input:hover[type="submit"],
-.wp-block-button__link:hover, .a8c-posts-list__view-all:hover, button:focus,
-.button:focus,
-input:focus[type="submit"],
-.wp-block-button__link:focus, .a8c-posts-list__view-all:focus, button.has-focus,
-.has-focus.button,
-input.has-focus[type="submit"],
-.has-focus.wp-block-button__link, .has-focus.a8c-posts-list__view-all {
+button:not(.has-background):hover,
+.button:not(.has-background):hover,
+input:not(.has-background):hover[type="submit"],
+.wp-block-button__link:not(.has-background):hover, .a8c-posts-list__view-all:not(.has-background):hover, button:not(.has-background):focus,
+.button:not(.has-background):focus,
+input:not(.has-background):focus[type="submit"],
+.wp-block-button__link:not(.has-background):focus, .a8c-posts-list__view-all:not(.has-background):focus, button:not(.has-background).has-focus,
+.button:not(.has-background).has-focus,
+input:not(.has-background).has-focus[type="submit"],
+.wp-block-button__link:not(.has-background).has-focus, .a8c-posts-list__view-all:not(.has-background).has-focus {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 }
@@ -1517,12 +1517,12 @@ object {
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 
-.wp-block-file .wp-block-file__button:active {
+.wp-block-file .wp-block-file__button:not(.has-background):active {
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 }
 
-.wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus {
+.wp-block-file .wp-block-file__button:not(.has-background):hover, .wp-block-file .wp-block-file__button:not(.has-background):focus, .wp-block-file .wp-block-file__button:not(.has-background).has-focus {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 }
@@ -2353,12 +2353,12 @@ p.has-text-color a {
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 
-.wp-block-search .wp-block-search__button:active {
+.wp-block-search .wp-block-search__button:not(.has-background):active {
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 }
 
-.wp-block-search .wp-block-search__button:hover, .wp-block-search .wp-block-search__button:focus, .wp-block-search .wp-block-search__button.has-focus {
+.wp-block-search .wp-block-search__button:not(.has-background):hover, .wp-block-search .wp-block-search__button:not(.has-background):focus, .wp-block-search .wp-block-search__button:not(.has-background).has-focus {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 }
@@ -4158,24 +4158,24 @@ input[type="submit"]:after,
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 
-button:active,
-.button:active,
-input:active[type="submit"],
-.wp-block-button__link:active, .a8c-posts-list__view-all:active {
+button:not(.has-background):active,
+.button:not(.has-background):active,
+input:not(.has-background):active[type="submit"],
+.wp-block-button__link:not(.has-background):active, .a8c-posts-list__view-all:not(.has-background):active {
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 }
 
-button:hover,
-.button:hover,
-input:hover[type="submit"],
-.wp-block-button__link:hover, .a8c-posts-list__view-all:hover, button:focus,
-.button:focus,
-input:focus[type="submit"],
-.wp-block-button__link:focus, .a8c-posts-list__view-all:focus, button.has-focus,
-.has-focus.button,
-input.has-focus[type="submit"],
-.has-focus.wp-block-button__link, .has-focus.a8c-posts-list__view-all {
+button:not(.has-background):hover,
+.button:not(.has-background):hover,
+input:not(.has-background):hover[type="submit"],
+.wp-block-button__link:not(.has-background):hover, .a8c-posts-list__view-all:not(.has-background):hover, button:not(.has-background):focus,
+.button:not(.has-background):focus,
+input:not(.has-background):focus[type="submit"],
+.wp-block-button__link:not(.has-background):focus, .a8c-posts-list__view-all:not(.has-background):focus, button:not(.has-background).has-focus,
+.button:not(.has-background).has-focus,
+input:not(.has-background).has-focus[type="submit"],
+.wp-block-button__link:not(.has-background).has-focus, .a8c-posts-list__view-all:not(.has-background).has-focus {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 }

+ 32 - 32
seedlet/style.css

@@ -619,24 +619,24 @@ input[type="submit"]:after,
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 
-button:active,
-.button:active,
-input:active[type="submit"],
-.wp-block-button__link:active, .a8c-posts-list__view-all:active {
+button:not(.has-background):active,
+.button:not(.has-background):active,
+input:not(.has-background):active[type="submit"],
+.wp-block-button__link:not(.has-background):active, .a8c-posts-list__view-all:not(.has-background):active {
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 }
 
-button:hover,
-.button:hover,
-input:hover[type="submit"],
-.wp-block-button__link:hover, .a8c-posts-list__view-all:hover, button:focus,
-.button:focus,
-input:focus[type="submit"],
-.wp-block-button__link:focus, .a8c-posts-list__view-all:focus, button.has-focus,
-.has-focus.button,
-input.has-focus[type="submit"],
-.has-focus.wp-block-button__link, .has-focus.a8c-posts-list__view-all {
+button:not(.has-background):hover,
+.button:not(.has-background):hover,
+input:not(.has-background):hover[type="submit"],
+.wp-block-button__link:not(.has-background):hover, .a8c-posts-list__view-all:not(.has-background):hover, button:not(.has-background):focus,
+.button:not(.has-background):focus,
+input:not(.has-background):focus[type="submit"],
+.wp-block-button__link:not(.has-background):focus, .a8c-posts-list__view-all:not(.has-background):focus, button:not(.has-background).has-focus,
+.button:not(.has-background).has-focus,
+input:not(.has-background).has-focus[type="submit"],
+.wp-block-button__link:not(.has-background).has-focus, .a8c-posts-list__view-all:not(.has-background).has-focus {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 }
@@ -1517,12 +1517,12 @@ object {
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 
-.wp-block-file .wp-block-file__button:active {
+.wp-block-file .wp-block-file__button:not(.has-background):active {
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 }
 
-.wp-block-file .wp-block-file__button:hover, .wp-block-file .wp-block-file__button:focus, .wp-block-file .wp-block-file__button.has-focus {
+.wp-block-file .wp-block-file__button:not(.has-background):hover, .wp-block-file .wp-block-file__button:not(.has-background):focus, .wp-block-file .wp-block-file__button:not(.has-background).has-focus {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 }
@@ -2353,12 +2353,12 @@ p.has-text-color a {
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 
-.wp-block-search .wp-block-search__button:active {
+.wp-block-search .wp-block-search__button:not(.has-background):active {
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 }
 
-.wp-block-search .wp-block-search__button:hover, .wp-block-search .wp-block-search__button:focus, .wp-block-search .wp-block-search__button.has-focus {
+.wp-block-search .wp-block-search__button:not(.has-background):hover, .wp-block-search .wp-block-search__button:not(.has-background):focus, .wp-block-search .wp-block-search__button:not(.has-background).has-focus {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 }
@@ -4179,24 +4179,24 @@ input[type="submit"]:after,
 	margin-top: -calc(.5em * var(--button--line-height) + -.39);
 }
 
-button:active,
-.button:active,
-input:active[type="submit"],
-.wp-block-button__link:active, .a8c-posts-list__view-all:active {
+button:not(.has-background):active,
+.button:not(.has-background):active,
+input:not(.has-background):active[type="submit"],
+.wp-block-button__link:not(.has-background):active, .a8c-posts-list__view-all:not(.has-background):active {
 	color: var(--button--color-text-active);
 	background-color: var(--button--color-background-active);
 }
 
-button:hover,
-.button:hover,
-input:hover[type="submit"],
-.wp-block-button__link:hover, .a8c-posts-list__view-all:hover, button:focus,
-.button:focus,
-input:focus[type="submit"],
-.wp-block-button__link:focus, .a8c-posts-list__view-all:focus, button.has-focus,
-.has-focus.button,
-input.has-focus[type="submit"],
-.has-focus.wp-block-button__link, .has-focus.a8c-posts-list__view-all {
+button:not(.has-background):hover,
+.button:not(.has-background):hover,
+input:not(.has-background):hover[type="submit"],
+.wp-block-button__link:not(.has-background):hover, .a8c-posts-list__view-all:not(.has-background):hover, button:not(.has-background):focus,
+.button:not(.has-background):focus,
+input:not(.has-background):focus[type="submit"],
+.wp-block-button__link:not(.has-background):focus, .a8c-posts-list__view-all:not(.has-background):focus, button:not(.has-background).has-focus,
+.button:not(.has-background).has-focus,
+input:not(.has-background).has-focus[type="submit"],
+.wp-block-button__link:not(.has-background).has-focus, .a8c-posts-list__view-all:not(.has-background).has-focus {
 	color: var(--button--color-text-hover);
 	background-color: var(--button--color-background-hover);
 }