Varia: add extends import for button extend

varia/sass/blocks/blog-posts/_editor.scss

@@ -147,6 +147,7 @@
 		}
 	}
 
+	@import "../../base/extends";
 	& + .button {
 	// Extend button style
 	@extend %button-style;

varia/sass/blocks/blog-posts/_style.scss

@@ -149,6 +149,7 @@
 	}
 }
 
+@import "../../base/extends";
 button[data-load-more-btn] {
 	// Extend button style
 	@extend %button-style;

varia/style-editor.css

@@ -300,6 +300,21 @@ object {
  * - In the future the Block styles may get compiled to individual .css
  *   files and conditionally loaded
  */
+.wp-block-a8c-blog-posts {
+	/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+	/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+}
+
 .wp-block-a8c-blog-posts.image-aligntop .post-thumbnail {
 	margin-bottom: 16px;
 }
@@ -459,6 +474,40 @@ object {
 	color: currentColor;
 }
 
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: bold;
+	font-family: sans-serif;
+	font-family: var(--font-headings, sans-serif);
+	font-size: 1.2rem;
+	background-color: blue;
+	border-radius: 9px;
+	border-width: 0;
+	padding: 16px 16px;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:before, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:before, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:after, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:before, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:before, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:before {
+	margin-bottom: -0.12em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:after, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:after, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:after {
+	margin-top: -0.11em;
+}
+
+.wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:hover, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:hover, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:hover, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .button:focus, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .button:focus, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .button:focus, .wp-block-a8c-blog-posts .wp-block-a8c-blog-posts + .has-focus.button, .wp-block-a8c-blog-posts .fse-template-part .main-navigation .has-focus.button, .fse-template-part .main-navigation .wp-block-a8c-blog-posts .has-focus.button {
+	color: white;
+	background-color: indigo;
+}
+
 .wp-block-a8c-blog-posts + .button {
 	display: inline-block;
 	font-size: 1.2em;

varia/style.css

@@ -1355,6 +1355,84 @@ object {
 	color: currentColor;
 }
 
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button[data-load-more-btn], button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: bold;
+	font-family: sans-serif;
+	font-family: var(--font-headings, sans-serif);
+	font-size: 1.2rem;
+	background-color: blue;
+	border-radius: 9px;
+	border-width: 0;
+	padding: 16px 16px;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button[data-load-more-btn]:before, button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button[data-load-more-btn]:after, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: indigo;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 button[data-load-more-btn] {
 	display: inline-block;
 }