Varia: Add outline button styles for the frontend.

varia/sass/blocks/button/_style.scss

@@ -16,27 +16,27 @@ input[type="submit"],
 .wp-block-button {
 
 	// Outline Style
-	&.is-style-outline {
+	&.is-style-outline,
+	&.is-style-outline .wp-block-button__link {
 
-		.wp-block-button__link {
-			color: #{map-deep-get($config-button, "color", "background")};
-			background: transparent;
-			border: #{map-deep-get($config-button, "border-width")} solid currentcolor;
-			padding: #{map-deep-get($config-button, "padding", "vertical") - map-deep-get($config-button, "border-width")} #{map-deep-get($config-button, "padding", "horizontal")};
+		color: #{map-deep-get($config-button, "color", "background")};
+		background: transparent;
+		border: #{map-deep-get($config-button, "border-width")} solid currentcolor;
+		padding: #{map-deep-get($config-button, "padding", "vertical") - map-deep-get($config-button, "border-width")} #{map-deep-get($config-button, "padding", "horizontal")};
 
-			&:active {
-				color: #{map-deep-get($config-button, "color", "background")};
-			}
+		&:active {
+			color: #{map-deep-get($config-button, "color", "background")};
+		}
 
-			&:hover,
-			&:focus,
-			&.has-focus {
-				color: #{map-deep-get($config-button, "color", "background-hover")};
-			}
+		&:hover,
+		&:focus,
+		&.has-focus {
+			color: #{map-deep-get($config-button, "color", "background-hover")};
 		}
 	}
 
 	// Squared Style
+	&.is-style-squared,
 	&.is-style-squared .wp-block-button__link {
 		border-radius: 0;
 	}

varia/style-rtl.css

@@ -1432,6 +1432,7 @@ button[data-load-more-btn], .button {
 /**
  * Block Options
  */
+.wp-block-button.is-style-outline,
 .wp-block-button.is-style-outline .wp-block-button__link {
 	color: blue;
 	background: transparent;
@@ -1439,11 +1440,15 @@ button[data-load-more-btn], .button {
 	padding: 14px 16px;
 }
 
+.wp-block-button.is-style-outline:active,
 .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 {
+.wp-block-button.is-style-outline:hover, .wp-block-button.is-style-outline:focus, .wp-block-button.is-style-outline.has-focus,
+.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;
 }
 

varia/style.css

@@ -1432,6 +1432,7 @@ button[data-load-more-btn], .button {
 /**
  * Block Options
  */
+.wp-block-button.is-style-outline,
 .wp-block-button.is-style-outline .wp-block-button__link {
 	color: blue;
 	background: transparent;
@@ -1439,14 +1440,19 @@ button[data-load-more-btn], .button {
 	padding: 14px 16px;
 }
 
+.wp-block-button.is-style-outline:active,
 .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 {
+.wp-block-button.is-style-outline:hover, .wp-block-button.is-style-outline:focus, .wp-block-button.is-style-outline.has-focus,
+.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;
 }
 
+.wp-block-button.is-style-squared,
 .wp-block-button.is-style-squared .wp-block-button__link {
 	border-radius: 0;
 }