fix spacing and borders, buttons and icons in frontend

kaeizen · kaeizen · commit 06f556ac9db0 · 2025-03-31T17:47:23.000+08:00
diff --git a/src/plugins/global-settings/buttons-and-icons/index.php b/src/plugins/global-settings/buttons-and-icons/index.php
@@ -99,9 +99,18 @@ public function add_global_buttons_and_icons_styles( $current_css ) {
 				return $current_css;
 			}
 
+			if ( $generated_css !== '' ) {
+				add_action( 'body_class', array( $this, 'add_body_class_buttons_and_icons' ) );
+			}
+
 			$current_css .= $generated_css;
 			return apply_filters( 'stackable_frontend_css' , $current_css );
 		}
+
+		public function add_body_class_buttons_and_icons( $classes ) {
+			$classes[] = 'stk-has-design-system-buttons-and-icons';
+			return $classes;
+		}
 	}
 
 	new Stackable_Global_Buttons_And_Icons();
diff --git a/src/plugins/global-settings/spacing-and-borders/index.php b/src/plugins/global-settings/spacing-and-borders/index.php
@@ -100,9 +100,18 @@ public function add_global_spacing_and_borders_styles( $current_css ) {
 				return $current_css;
 			}
 
+			if ( $generated_css !== '' ) {
+				add_action( 'body_class', array( $this, 'add_body_class_spacing_and_borders' ) );
+			}
+
 			$current_css .= $generated_css;
 			return apply_filters( 'stackable_frontend_css' , $current_css );
 		}
+
+		public function add_body_class_spacing_and_borders( $classes ) {
+			$classes[] = 'stk-has-design-system-spacing-and-borders';
+			return $classes;
+		}
 	}
 
 	new Stackable_Global_Spacing_And_Borders();
diff --git a/src/styles/block-design-system-blocks.scss b/src/styles/block-design-system-blocks.scss
@@ -167,11 +167,8 @@ body:not(.wp-admin) .stk-block-columns:has(> .stk-block-content > .stk-block-col
 		}
 
 		&.is-style-ghost .stk-button {
-			&::before {
-				border-width: cssvar(button-ghost-border-width);
-			}
 			&:hover::before {
-				border-width: cssvar(button-ghost-border-width-hover);
+				border-width: var(--stk-button-ghost-border-width-hover, cssvar(button-ghost-border-width));
 			}
 		}
 	}
@@ -182,13 +179,13 @@ body:not(.wp-admin) .stk-block-columns:has(> .stk-block-content > .stk-block-col
 
 	:where(.stk-hover-parent:hover) .stk-block:is(.stk-block-button, .stk-block-icon-button, .stk-block-pagination) {
 		&:not(.is-style-link, .is-style-ghost) .stk-button::before {
-			border-width: cssvar(button-border-width-parent-hover);
-			box-shadow: cssvar(button-box-shadow-parent-hover);
+			border-width: var(--stk-button-border-width-parent-hover, cssvar(button-border-width));
+			box-shadow: var(--stk-button-box-shadow-parent-hover, cssvar(button-box-shadow));
 
 		}
 		&.is-style-ghost .stk-button::before {
-			border-width: cssvar(button-ghost-border-width-parent-hover);
-			box-shadow: cssvar(button-box-shadow-parent-hover);
+			border-width: var(--stk-button-ghost-border-width-parent-hover, cssvar(button-ghost-border-width));
+			box-shadow: var(--stk-button-box-shadow-parent-hover, cssvar(button-box-shadow));
 		}
 	}
 
@@ -209,13 +206,13 @@ body:not(.wp-admin) .stk-block-columns:has(> .stk-block-content > .stk-block-col
 		border-width: cssvar(container-border-width);
 
 		&:hover {
-			border-width: cssvar(container-border-width-hover);
-			box-shadow: cssvar(container-box-shadow-hover);
+			border-width: var(--stk-container-border-width-hover, cssvar(container-border-width));
+			box-shadow: var(--stk-container-box-shadow-hover, cssvar(container-box-shadow));
 		}
 	}
 	:where(.stk-hover-parent:hover) .stk-container:not(.stk--no-background) {
-		border-width: cssvar(container-border-width-parent-hover);
-		box-shadow: cssvar(container-box-shadow-parent-hover);
+		border-width: var(--stk-container-border-width-parent-hover, cssvar(container-border-width));
+		box-shadow: var(--stk-container-box-shadow-parent-hover, cssvar(container-box-shadow));
 	}
 	// .stk-container-padding {
 	// &:hover {
@@ -244,14 +241,14 @@ body:not(.wp-admin) .stk-block-columns:has(> .stk-block-content > .stk-block-col
 		border-style: cssvar(block-background-border-style);
 		border-width: cssvar(block-background-border-width);
 		&:hover {
-			border-width: cssvar(block-background-border-width-hover);
-			box-shadow: cssvar(block-background-box-shadow-hover);
+			border-width: var(--stk-block-background-border-width-hover, cssvar(block-background-border-width));
+			box-shadow: var(--stk-block-background-box-shadow-hover, cssvar(block-background-box-shadow));
 		}
 	}
 
 	:where(.stk-hover-parent:hover) .stk-block.stk-block-background {
-		border-width: cssvar(block-background-border-width-parent-hover);
-		box-shadow: cssvar(block-background-box-shadow-parent-hover);
+		border-width: var(--stk-block-background-border-width-parent-hover, cssvar(block-background-border-width));
+		box-shadow: var(--stk-block-background-box-shadow-parent-hover, cssvar(block-background-box-shadow));
 		// &:not(.stk--no-padding) {
 		// 	padding: cssvar(block-background-padding-parent-hover);
 		// }
@@ -262,15 +259,15 @@ body:not(.wp-admin) .stk-block-columns:has(> .stk-block-content > .stk-block-col
 	.stk-img-wrapper {
 		filter: drop-shadow(cssvar(image-drop-shadow));
 		&:hover {
-			filter: drop-shadow(cssvar(image-drop-shadow-hover));
+			filter: drop-shadow(var(--stk-image-drop-shadow-hover, cssvar(image-drop-shadow)));
 		}
 
 		img {
 			border-radius: cssvar(image-border-radius);
 		}
 	}
 	:where(.stk-hover-parent:hover) .stk-img-wrapper {
-		filter: drop-shadow(cssvar(image-drop-shadow-parent-hover));
+		filter: drop-shadow(var(--stk-image-drop-shadow-parent-hover, cssvar(image-drop-shadow)));
 	}
 
 	// Icons
diff --git a/src/styles/editor-block-design-system.scss b/src/styles/editor-block-design-system.scss
@@ -24,22 +24,22 @@
 	// Buttons
 	.stk--is-hovered.stk-block:is(.stk-block-button, .stk-block-icon-button, .stk-block-pagination) {
 		&:not(.is-style-link, .is-style-ghost) .stk-button::before {
-			border-width: cssvar(button-border-width-hover);
-			box-shadow: cssvar(button-box-shadow-hover);
+			border-width: var(--stk-button-border-width-hover, cssvar(button-border-width));
+			box-shadow: var(--stk-button-box-shadow-hover, cssvar(button-box-shadow));
 		}
 		&.is-style-ghost .stk-button::before {
-			border-width: cssvar(button-ghost-border-width-hover);
-			box-shadow: cssvar(button-box-shadow-hover);
+			border-width: var(--stk-button-ghost-border-width-hover, cssvar(button-ghost-border-width));
+			box-shadow: var(--stk-button-box-shadow-hover, cssvar(button-box-shadow));
 		}
 	}
 	.is-selected .stk--is-hovered :where(.stk-hover-parent [data-type^="stackable/"]) :is(.stk-block-button, .stk-block-icon-button, .stk-block-pagination) {
 		&:not(.is-style-link, .is-style-ghost) .stk-button::before {
-			border-width: cssvar(button-border-width-parent-hover);
-			box-shadow: cssvar(button-box-shadow-parent-hover);
+			border-width: var(--stk-button-border-width-parent-hover, cssvar(button-border-width));
+			box-shadow: var(--stk-button-box-shadow-parent-hover, cssvar(button-box-shadow));
 		}
 		&.is-style-ghost .stk-button::before {
-			border-width: cssvar(button-ghost-border-width-parent-hover);
-			box-shadow: cssvar(button-box-shadow-parent-hover);
+			border-width: var(--stk-button-ghost-border-width-parent-hover, cssvar(button-ghost-border-width));
+			box-shadow: var(--stk-button-box-shadow-parent-hover, cssvar(button-box-shadow));
 		}
 	}
 	// Containers
@@ -49,60 +49,60 @@
 	}
 
 	:where(.stk-hover-parent:hover) [data-type^="stackable/"] .stk-container:not(.stk--no-background) {
-		border-width: cssvar(container-border-width-parent-hover);
-		box-shadow: cssvar(container-box-shadow-parent-hover);
+		border-width: var(--stk-container-border-width-parent-hover, cssvar(container-border-width));
+		box-shadow: var(--stk-container-box-shadow-parent-hover, cssvar(container-box-shadow));
 	}
 
 	.is-selected .stk--is-hovered .stk-hover-parent [data-type^="stackable/"] .stk-container:not(.stk--no-padding),
 	.is-selected .stk--is-hovered .stk-hover-parent [data-type^="stackable/"] .stk-container-padding {
-		padding: cssvar(container-padding-parent-hover);
+		padding: var(--stk-container-padding-parent-hover, cssvar(container-padding));
 	}
 
 	.stk--is-hovered .stk-container:not(.stk--no-padding),
 	.stk--is-hovered .stk-container-padding {
-		padding: cssvar(container-padding-hover);
+		padding: var(--stk-container-padding-hover, cssvar(container-padding));
 	}
 
 	.is-selected .stk--is-hovered .stk-hover-parent [data-type^="stackable/"] .stk-container:not(.stk--no-background) {
-		box-shadow: cssvar(container-box-shadow-parent-hover);
-		border-width: cssvar(container-border-width-parent-hover);
+		box-shadow: var(--stk-container-box-shadow-parent-hover, cssvar(container-box-shadow));
+		border-width: var(--stk-container-border-width-parent-hover, cssvar(container-border-width));
 	}
 
 	.stk--is-hovered .stk-container:not(.stk--no-background) {
-		box-shadow: cssvar(container-box-shadow-hover);
-		border-width: cssvar(container-border-width-hover);
+		box-shadow: var(--stk-container-box-shadow-hover, cssvar(container-box-shadow));
+		border-width: var(--stk-container-border-width-hover, cssvar(container-border-width));
 	}
 
 	// Block Backgrounds
 	[data-type^="stackable/"] .stk-block.stk-block-background {
 		border-style: cssvar(block-background-border-style);
 		border-width: cssvar(block-background-border-width);
 		&:hover {
-			border-width: cssvar(block-background-border-width-hover);
-			box-shadow: cssvar(block-background-box-shadow-hover);
+			border-width: var(--stk-block-background-border-width-hover, cssvar(block-background-border-width));
+			box-shadow: var(--stk-block-background-box-shadow-hover, cssvar(block-background-box-shadow));
 		}
 	}
 	.stk-hover-parent:hover .stk-block-background {
-		border-width: cssvar(block-background-border-width-parent-hover);
-		box-shadow: cssvar(block-background-box-shadow-parent-hover);
+		border-width: var(--stk-block-background-border-width-parent-hover, cssvar(block-background-border-width));
+		box-shadow: var(--stk-block-background-box-shadow-parent-hover, cssvar(block-background-box-shadow));
 	}
 
 	.is-selected .stk--is-hovered .stk-hover-parent [data-type^="stackable/"] .stk-block-background {
-		border-width: cssvar(block-background-border-width-parent-hover);
-		box-shadow: cssvar(block-background-box-shadow-parent-hover);
+		border-width: var(--stk-block-background-border-width-parent-hover, cssvar(block-background-border-width));
+		box-shadow: var(--stk-block-background-box-shadow-parent-hover, cssvar(block-background-box-shadow));
 	}
 
 	[data-type^="stackable/"] .stk--is-hovered.stk-block-background {
-		border-width: cssvar(block-background-border-width-hover);
-		box-shadow: cssvar(block-background-box-shadow-hover);
+		border-width: var(--stk-block-background-border-width-hover, cssvar(block-background-border-width));
+		box-shadow: var(--stk-block-background-box-shadow-hover, cssvar(block-background-box-shadow));
 	}
 
 	// Images
 	.stk--is-hovered .stk-img-wrapper {
-		filter: drop-shadow(cssvar(image-drop-shadow-hover));
+		filter: drop-shadow(var(--stk-image-drop-shadow-hover, cssvar(image-drop-shadow)));
 	}
 	.is-selected .stk--is-hovered .stk-hover-parent .stk-img-wrapper {
-		filter: drop-shadow(cssvar(image-drop-shadow-parent-hover));
+		filter: drop-shadow(var(--stk-image-drop-shadow-parent-hover, cssvar(image-drop-shadow)));
 	}
 }
 

Original file line number	Diff line number	Diff line change
`@@ -99,9 +99,18 @@ public function add_global_buttons_and_icons_styles( $current_css ) {`
`99`	`99`	`return $current_css;`
`100`	`100`	`}`
`101`	`101`
	`102`	`+ if ( $generated_css !== '' ) {`
	`103`	`+ add_action( 'body_class', array( $this, 'add_body_class_buttons_and_icons' ) );`
	`104`	`+ }`
	`105`	`+`
`102`	`106`	`$current_css .= $generated_css;`
`103`	`107`	`return apply_filters( 'stackable_frontend_css' , $current_css );`
`104`	`108`	`}`
	`109`	`+`
	`110`	`+ public function add_body_class_buttons_and_icons( $classes ) {`
	`111`	`+ $classes[] = 'stk-has-design-system-buttons-and-icons';`
	`112`	`+ return $classes;`
	`113`	`+ }`
`105`	`114`	`}`
`106`	`115`
`107`	`116`	`new Stackable_Global_Buttons_And_Icons();`
Original file line number	Diff line number	Diff line change
`@@ -100,9 +100,18 @@ public function add_global_spacing_and_borders_styles( $current_css ) {`
`100`	`100`	`return $current_css;`
`101`	`101`	`}`
`102`	`102`
	`103`	`+ if ( $generated_css !== '' ) {`
	`104`	`+ add_action( 'body_class', array( $this, 'add_body_class_spacing_and_borders' ) );`
	`105`	`+ }`
	`106`	`+`
`103`	`107`	`$current_css .= $generated_css;`
`104`	`108`	`return apply_filters( 'stackable_frontend_css' , $current_css );`
`105`	`109`	`}`
	`110`	`+`
	`111`	`+ public function add_body_class_spacing_and_borders( $classes ) {`
	`112`	`+ $classes[] = 'stk-has-design-system-spacing-and-borders';`
	`113`	`+ return $classes;`
	`114`	`+ }`
`106`	`115`	`}`
`107`	`116`
`108`	`117`	`new Stackable_Global_Spacing_And_Borders();`
Original file line number	Diff line number	Diff line change
`@@ -167,11 +167,8 @@ body:not(.wp-admin) .stk-block-columns:has(> .stk-block-content > .stk-block-col`
`167`	`167`	`}`
`168`	`168`
`169`	`169`	`&.is-style-ghost .stk-button {`
`170`		`- &::before {`
`171`		`- border-width: cssvar(button-ghost-border-width);`
`172`		`- }`
`173`	`170`	`&:hover::before {`
`174`		`- border-width: cssvar(button-ghost-border-width-hover);`
	`171`	`+ border-width: var(--stk-button-ghost-border-width-hover, cssvar(button-ghost-border-width));`
`175`	`172`	`}`
`176`	`173`	`}`
`177`	`174`	`}`
`@@ -182,13 +179,13 @@ body:not(.wp-admin) .stk-block-columns:has(> .stk-block-content > .stk-block-col`
`182`	`179`
`183`	`180`	`:where(.stk-hover-parent:hover) .stk-block:is(.stk-block-button, .stk-block-icon-button, .stk-block-pagination) {`
`184`	`181`	`&:not(.is-style-link, .is-style-ghost) .stk-button::before {`
`185`		`- border-width: cssvar(button-border-width-parent-hover);`
`186`		`- box-shadow: cssvar(button-box-shadow-parent-hover);`
	`182`	`+ border-width: var(--stk-button-border-width-parent-hover, cssvar(button-border-width));`
	`183`	`+ box-shadow: var(--stk-button-box-shadow-parent-hover, cssvar(button-box-shadow));`
`187`	`184`
`188`	`185`	`}`
`189`	`186`	`&.is-style-ghost .stk-button::before {`
`190`		`- border-width: cssvar(button-ghost-border-width-parent-hover);`
`191`		`- box-shadow: cssvar(button-box-shadow-parent-hover);`
	`187`	`+ border-width: var(--stk-button-ghost-border-width-parent-hover, cssvar(button-ghost-border-width));`
	`188`	`+ box-shadow: var(--stk-button-box-shadow-parent-hover, cssvar(button-box-shadow));`
`192`	`189`	`}`
`193`	`190`	`}`
`194`	`191`
`@@ -209,13 +206,13 @@ body:not(.wp-admin) .stk-block-columns:has(> .stk-block-content > .stk-block-col`
`209`	`206`	`border-width: cssvar(container-border-width);`
`210`	`207`
`211`	`208`	`&:hover {`
`212`		`- border-width: cssvar(container-border-width-hover);`
`213`		`- box-shadow: cssvar(container-box-shadow-hover);`
	`209`	`+ border-width: var(--stk-container-border-width-hover, cssvar(container-border-width));`
	`210`	`+ box-shadow: var(--stk-container-box-shadow-hover, cssvar(container-box-shadow));`
`214`	`211`	`}`
`215`	`212`	`}`
`216`	`213`	`:where(.stk-hover-parent:hover) .stk-container:not(.stk--no-background) {`
`217`		`- border-width: cssvar(container-border-width-parent-hover);`
`218`		`- box-shadow: cssvar(container-box-shadow-parent-hover);`
	`214`	`+ border-width: var(--stk-container-border-width-parent-hover, cssvar(container-border-width));`
	`215`	`+ box-shadow: var(--stk-container-box-shadow-parent-hover, cssvar(container-box-shadow));`
`219`	`216`	`}`
`220`	`217`	`// .stk-container-padding {`
`221`	`218`	`// &:hover {`
`@@ -244,14 +241,14 @@ body:not(.wp-admin) .stk-block-columns:has(> .stk-block-content > .stk-block-col`
`244`	`241`	`border-style: cssvar(block-background-border-style);`
`245`	`242`	`border-width: cssvar(block-background-border-width);`
`246`	`243`	`&:hover {`
`247`		`- border-width: cssvar(block-background-border-width-hover);`
`248`		`- box-shadow: cssvar(block-background-box-shadow-hover);`
	`244`	`+ border-width: var(--stk-block-background-border-width-hover, cssvar(block-background-border-width));`
	`245`	`+ box-shadow: var(--stk-block-background-box-shadow-hover, cssvar(block-background-box-shadow));`
`249`	`246`	`}`
`250`	`247`	`}`
`251`	`248`
`252`	`249`	`:where(.stk-hover-parent:hover) .stk-block.stk-block-background {`
`253`		`- border-width: cssvar(block-background-border-width-parent-hover);`
`254`		`- box-shadow: cssvar(block-background-box-shadow-parent-hover);`
	`250`	`+ border-width: var(--stk-block-background-border-width-parent-hover, cssvar(block-background-border-width));`
	`251`	`+ box-shadow: var(--stk-block-background-box-shadow-parent-hover, cssvar(block-background-box-shadow));`
`255`	`252`	`// &:not(.stk--no-padding) {`
`256`	`253`	`// padding: cssvar(block-background-padding-parent-hover);`
`257`	`254`	`// }`
`@@ -262,15 +259,15 @@ body:not(.wp-admin) .stk-block-columns:has(> .stk-block-content > .stk-block-col`
`262`	`259`	`.stk-img-wrapper {`
`263`	`260`	`filter: drop-shadow(cssvar(image-drop-shadow));`
`264`	`261`	`&:hover {`
`265`		`- filter: drop-shadow(cssvar(image-drop-shadow-hover));`
	`262`	`+ filter: drop-shadow(var(--stk-image-drop-shadow-hover, cssvar(image-drop-shadow)));`
`266`	`263`	`}`
`267`	`264`
`268`	`265`	`img {`
`269`	`266`	`border-radius: cssvar(image-border-radius);`
`270`	`267`	`}`
`271`	`268`	`}`
`272`	`269`	`:where(.stk-hover-parent:hover) .stk-img-wrapper {`
`273`		`- filter: drop-shadow(cssvar(image-drop-shadow-parent-hover));`
	`270`	`+ filter: drop-shadow(var(--stk-image-drop-shadow-parent-hover, cssvar(image-drop-shadow)));`
`274`	`271`	`}`
`275`	`272`
`276`	`273`	`// Icons`
Original file line number	Diff line number	Diff line change
`@@ -24,22 +24,22 @@`
`24`	`24`	`// Buttons`
`25`	`25`	`.stk--is-hovered.stk-block:is(.stk-block-button, .stk-block-icon-button, .stk-block-pagination) {`
`26`	`26`	`&:not(.is-style-link, .is-style-ghost) .stk-button::before {`
`27`		`- border-width: cssvar(button-border-width-hover);`
`28`		`- box-shadow: cssvar(button-box-shadow-hover);`
	`27`	`+ border-width: var(--stk-button-border-width-hover, cssvar(button-border-width));`
	`28`	`+ box-shadow: var(--stk-button-box-shadow-hover, cssvar(button-box-shadow));`
`29`	`29`	`}`
`30`	`30`	`&.is-style-ghost .stk-button::before {`
`31`		`- border-width: cssvar(button-ghost-border-width-hover);`
`32`		`- box-shadow: cssvar(button-box-shadow-hover);`
	`31`	`+ border-width: var(--stk-button-ghost-border-width-hover, cssvar(button-ghost-border-width));`
	`32`	`+ box-shadow: var(--stk-button-box-shadow-hover, cssvar(button-box-shadow));`
`33`	`33`	`}`
`34`	`34`	`}`
`35`	`35`	`.is-selected .stk--is-hovered :where(.stk-hover-parent [data-type^="stackable/"]) :is(.stk-block-button, .stk-block-icon-button, .stk-block-pagination) {`
`36`	`36`	`&:not(.is-style-link, .is-style-ghost) .stk-button::before {`
`37`		`- border-width: cssvar(button-border-width-parent-hover);`
`38`		`- box-shadow: cssvar(button-box-shadow-parent-hover);`
	`37`	`+ border-width: var(--stk-button-border-width-parent-hover, cssvar(button-border-width));`
	`38`	`+ box-shadow: var(--stk-button-box-shadow-parent-hover, cssvar(button-box-shadow));`
`39`	`39`	`}`
`40`	`40`	`&.is-style-ghost .stk-button::before {`
`41`		`- border-width: cssvar(button-ghost-border-width-parent-hover);`
`42`		`- box-shadow: cssvar(button-box-shadow-parent-hover);`
	`41`	`+ border-width: var(--stk-button-ghost-border-width-parent-hover, cssvar(button-ghost-border-width));`
	`42`	`+ box-shadow: var(--stk-button-box-shadow-parent-hover, cssvar(button-box-shadow));`
`43`	`43`	`}`
`44`	`44`	`}`
`45`	`45`	`// Containers`
`@@ -49,60 +49,60 @@`
`49`	`49`	`}`
`50`	`50`
`51`	`51`	`:where(.stk-hover-parent:hover) [data-type^="stackable/"] .stk-container:not(.stk--no-background) {`
`52`		`- border-width: cssvar(container-border-width-parent-hover);`
`53`		`- box-shadow: cssvar(container-box-shadow-parent-hover);`
	`52`	`+ border-width: var(--stk-container-border-width-parent-hover, cssvar(container-border-width));`
	`53`	`+ box-shadow: var(--stk-container-box-shadow-parent-hover, cssvar(container-box-shadow));`
`54`	`54`	`}`
`55`	`55`
`56`	`56`	`.is-selected .stk--is-hovered .stk-hover-parent [data-type^="stackable/"] .stk-container:not(.stk--no-padding),`
`57`	`57`	`.is-selected .stk--is-hovered .stk-hover-parent [data-type^="stackable/"] .stk-container-padding {`
`58`		`- padding: cssvar(container-padding-parent-hover);`
	`58`	`+ padding: var(--stk-container-padding-parent-hover, cssvar(container-padding));`
`59`	`59`	`}`
`60`	`60`
`61`	`61`	`.stk--is-hovered .stk-container:not(.stk--no-padding),`
`62`	`62`	`.stk--is-hovered .stk-container-padding {`
`63`		`- padding: cssvar(container-padding-hover);`
	`63`	`+ padding: var(--stk-container-padding-hover, cssvar(container-padding));`
`64`	`64`	`}`
`65`	`65`
`66`	`66`	`.is-selected .stk--is-hovered .stk-hover-parent [data-type^="stackable/"] .stk-container:not(.stk--no-background) {`
`67`		`- box-shadow: cssvar(container-box-shadow-parent-hover);`
`68`		`- border-width: cssvar(container-border-width-parent-hover);`
	`67`	`+ box-shadow: var(--stk-container-box-shadow-parent-hover, cssvar(container-box-shadow));`
	`68`	`+ border-width: var(--stk-container-border-width-parent-hover, cssvar(container-border-width));`
`69`	`69`	`}`
`70`	`70`
`71`	`71`	`.stk--is-hovered .stk-container:not(.stk--no-background) {`
`72`		`- box-shadow: cssvar(container-box-shadow-hover);`
`73`		`- border-width: cssvar(container-border-width-hover);`
	`72`	`+ box-shadow: var(--stk-container-box-shadow-hover, cssvar(container-box-shadow));`
	`73`	`+ border-width: var(--stk-container-border-width-hover, cssvar(container-border-width));`
`74`	`74`	`}`
`75`	`75`
`76`	`76`	`// Block Backgrounds`
`77`	`77`	`[data-type^="stackable/"] .stk-block.stk-block-background {`
`78`	`78`	`border-style: cssvar(block-background-border-style);`
`79`	`79`	`border-width: cssvar(block-background-border-width);`
`80`	`80`	`&:hover {`
`81`		`- border-width: cssvar(block-background-border-width-hover);`
`82`		`- box-shadow: cssvar(block-background-box-shadow-hover);`
	`81`	`+ border-width: var(--stk-block-background-border-width-hover, cssvar(block-background-border-width));`
	`82`	`+ box-shadow: var(--stk-block-background-box-shadow-hover, cssvar(block-background-box-shadow));`
`83`	`83`	`}`
`84`	`84`	`}`
`85`	`85`	`.stk-hover-parent:hover .stk-block-background {`
`86`		`- border-width: cssvar(block-background-border-width-parent-hover);`
`87`		`- box-shadow: cssvar(block-background-box-shadow-parent-hover);`
	`86`	`+ border-width: var(--stk-block-background-border-width-parent-hover, cssvar(block-background-border-width));`
	`87`	`+ box-shadow: var(--stk-block-background-box-shadow-parent-hover, cssvar(block-background-box-shadow));`
`88`	`88`	`}`
`89`	`89`
`90`	`90`	`.is-selected .stk--is-hovered .stk-hover-parent [data-type^="stackable/"] .stk-block-background {`
`91`		`- border-width: cssvar(block-background-border-width-parent-hover);`
`92`		`- box-shadow: cssvar(block-background-box-shadow-parent-hover);`
	`91`	`+ border-width: var(--stk-block-background-border-width-parent-hover, cssvar(block-background-border-width));`
	`92`	`+ box-shadow: var(--stk-block-background-box-shadow-parent-hover, cssvar(block-background-box-shadow));`
`93`	`93`	`}`
`94`	`94`
`95`	`95`	`[data-type^="stackable/"] .stk--is-hovered.stk-block-background {`
`96`		`- border-width: cssvar(block-background-border-width-hover);`
`97`		`- box-shadow: cssvar(block-background-box-shadow-hover);`
	`96`	`+ border-width: var(--stk-block-background-border-width-hover, cssvar(block-background-border-width));`
	`97`	`+ box-shadow: var(--stk-block-background-box-shadow-hover, cssvar(block-background-box-shadow));`
`98`	`98`	`}`
`99`	`99`
`100`	`100`	`// Images`
`101`	`101`	`.stk--is-hovered .stk-img-wrapper {`
`102`		`- filter: drop-shadow(cssvar(image-drop-shadow-hover));`
	`102`	`+ filter: drop-shadow(var(--stk-image-drop-shadow-hover, cssvar(image-drop-shadow)));`
`103`	`103`	`}`
`104`	`104`	`.is-selected .stk--is-hovered .stk-hover-parent .stk-img-wrapper {`
`105`		`- filter: drop-shadow(cssvar(image-drop-shadow-parent-hover));`
	`105`	`+ filter: drop-shadow(var(--stk-image-drop-shadow-parent-hover, cssvar(image-drop-shadow)));`
`106`	`106`	`}`
`107`	`107`	`}`
`108`	`108`