Update separator styles

Author: aaronrobertshaw

packages/block-library/src/separator/editor.scss

@@ -2,11 +2,4 @@
 	// Prevent margin collapsing so the area to select the separator is bigger.
 	padding-top: 0.1px;
 	padding-bottom: 0.1px;
-
-	// This is also set in style.scss, but needs a higher specificity in editor
-	// due to the way that color block supports adds additional background color styles.
-	&.wp-block-separator.is-style-dots {
-		background: none !important;
-		border: none;
-	}
 }

packages/block-library/src/separator/style.scss

@@ -1,28 +1,4 @@
 .wp-block-separator {
-	// Dots style
-	&.is-style-dots {
-		// Override any background themes often set on the hr tag for this style.
-		// also override the color set in the editor since it's intented for normal HR
-		background: none !important;
-		border: none;
-		text-align: center;
-		line-height: 1;
-		height: auto;
-
-		&::before {
-			content: "\00b7 \00b7 \00b7";
-			color: currentColor;
-			font-size: 1.5em;
-			letter-spacing: 2em;
-			/*rtl:ignore*/
-			padding-left: 2em;
-			font-family: serif;
-		}
-	}
-}
-
-// Lowest specificity to avoid overriding global styles.
-:where(.wp-block-separator) {
 	border-top: 2px solid currentColor;
 	// Default, thin style, is stored in theme.scss so it can be opted out of
 
@@ -31,3 +7,24 @@
 	border-right: none;
 	border-bottom: none;
 }
+
+// Dots block style variation
+:root :where(.wp-block-separator.is-style-dots) {
+	// Override any background themes often set on the hr tag for this style.
+	// also override the color set in the editor since it's intended for normal HR
+	background: none !important;
+	border: none;
+	text-align: center;
+	line-height: 1;
+	height: auto;
+
+	&::before {
+		content: "\00b7 \00b7 \00b7";
+		color: currentColor;
+		font-size: 1.5em;
+		letter-spacing: 2em;
+		/*rtl:ignore*/
+		padding-left: 2em;
+		font-family: serif;
+	}
+}