Varia: Fix button styles to work alongside Gutenberg 7.9

varia/sass/blocks/button/_editor.scss

@@ -1,26 +1,24 @@
-.wp-block-button {
-
-	/* Default Style */
-	.wp-block-button__link {
-		color: #{map-deep-get($config-button, "color", "text")};
-		font-weight: #{map-deep-get($config-button, "font", "weight")};
-		@include font-family( map-deep-get($config-button, "font", "family") );
-		font-size: (strip-unit(map-deep-get($config-button, "font", "size")) + 0em);
-		line-height: #{map-deep-get($config-button, "font", "line-height")};
-		background-color: #{map-deep-get($config-button, "color", "background")};
-		border-radius: #{map-deep-get($config-button, "border-radius")};
-		padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};
+/* Default Style */
+.wp-block-button__link {
+	color: #{map-deep-get($config-button, "color", "text")};
+	font-weight: #{map-deep-get($config-button, "font", "weight")};
+	@include font-family( map-deep-get($config-button, "font", "family") );
+	font-size: (strip-unit(map-deep-get($config-button, "font", "size")) + 0em);
+	line-height: #{map-deep-get($config-button, "font", "line-height")};
+	background-color: #{map-deep-get($config-button, "color", "background")};
+	border-radius: #{map-deep-get($config-button, "border-radius")};
+	padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};
 
-		&:hover,
-		&:focus,
-		&.has-focus {
-			color: #{map-deep-get($config-button, "color", "text-hover")};
-			background-color: #{map-deep-get($config-button, "color", "background-hover")};
-		}
+	&:hover,
+	&:focus,
+	&.has-focus {
+		color: #{map-deep-get($config-button, "color", "text-hover")};
+		background-color: #{map-deep-get($config-button, "color", "background-hover")};
 	}
 
 	/* Outline Style */
-	&.is-style-outline {
+	&.is-style-outline,
+	.is-style-outline & {
 
 		.wp-block-button__link {
 			color: #{map-deep-get($config-button, "color", "background")};
@@ -36,7 +34,8 @@
 	}
 
 	/* Squared Style */
-	&.is-style-squared .wp-block-button__link {
+	&.is-style-squared,
+	.is-style-squared & {
 		border-radius: 0;
 	}
 }

varia/style-editor.css

@@ -528,13 +528,8 @@ object {
 	color: currentColor;
 }
 
-.wp-block-button {
-	/* Default Style */
-	/* Outline Style */
-	/* Squared Style */
-}
-
-.wp-block-button .wp-block-button__link {
+/* Default Style */
+.wp-block-button__link {
 	color: white;
 	font-weight: bold;
 	font-family: sans-serif;
@@ -544,24 +539,31 @@ object {
 	background-color: blue;
 	border-radius: 9px;
 	padding: 16px 16px;
+	/* Outline Style */
+	/* Squared Style */
 }
 
-.wp-block-button .wp-block-button__link:hover, .wp-block-button .wp-block-button__link:focus, .wp-block-button .wp-block-button__link.has-focus {
+.wp-block-button__link:hover, .wp-block-button__link:focus, .wp-block-button__link.has-focus {
 	color: white;
 	background-color: indigo;
 }
 
-.wp-block-button.is-style-outline .wp-block-button__link {
+.wp-block-button__link.is-style-outline .wp-block-button__link,
+.is-style-outline .wp-block-button__link .wp-block-button__link {
 	color: blue;
 	background: transparent;
 	border: 2px solid currentcolor;
 }
 
-.wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:focus, .wp-block-button.is-style-outline .wp-block-button__link.has-focus {
+.wp-block-button__link.is-style-outline .wp-block-button__link:hover, .wp-block-button__link.is-style-outline .wp-block-button__link:focus, .wp-block-button__link.is-style-outline .wp-block-button__link.has-focus,
+.is-style-outline .wp-block-button__link .wp-block-button__link:hover,
+.is-style-outline .wp-block-button__link .wp-block-button__link:focus,
+.is-style-outline .wp-block-button__link .wp-block-button__link.has-focus {
 	color: indigo;
 }
 
-.wp-block-button.is-style-squared .wp-block-button__link {
+.wp-block-button__link.is-style-squared,
+.is-style-squared .wp-block-button__link {
 	border-radius: 0;
 }
 

varia/style-rtl.css

@@ -1439,6 +1439,10 @@ button[data-load-more-btn], .button {
 	padding: 14px 16px;
 }
 
+.wp-block-button.is-style-outline .wp-block-button__link:active {
+	color: blue;
+}
+
 .wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:focus, .wp-block-button.is-style-outline .wp-block-button__link.has-focus {
 	color: indigo;
 }