Varia: Make sure separator is always visible with background colour

varia/sass/blocks/separator/_editor.scss

@@ -1,7 +1,7 @@
 .wp-block-separator,
 hr {
-    border-bottom: #{map-deep-get($config-separator, "height")} solid #{map-deep-get($config-global, "color", "border", "default")};
-    clear: both;
+	border-bottom: #{map-deep-get($config-separator, "height")} solid #{map-deep-get($config-global, "color", "border", "default")};
+	clear: both;
 
 	&[style*="text-align:right"],
 	&[style*="text-align: right"] {
@@ -20,4 +20,8 @@ hr {
 			color: #{map-deep-get($config-global, "color", "border", "default")};
 		}
 	}
+
+	[class*="has-background"] & {
+		border-color: currentColor;
+	}
 }

varia/sass/blocks/separator/_style.scss

@@ -27,5 +27,9 @@ hr {
 				padding-left: #{map-deep-get($config-global, "font", "size", "sm")};
 			}
 		}
+
+		[class*="has-background"] & {
+			border-color: currentColor;
+		}
 	}
 }

varia/style-editor.css

@@ -582,6 +582,11 @@ hr.is-style-dots:before {
 	color: #DDDDDD;
 }
 
+[class*="has-background"] .wp-block-separator, [class*="has-background"]
+hr {
+	border-color: currentColor;
+}
+
 table th,
 .wp-block-table th {
 	font-family: sans-serif;

varia/style-rtl.css

@@ -1887,6 +1887,10 @@ hr.wp-block-separator.is-style-dots:before {
 	padding-right: 0.83333rem;
 }
 
+[class*="has-background"] hr.wp-block-separator {
+	border-color: currentColor;
+}
+
 .wp-block-jetpack-slideshow ul {
 	margin-right: 0;
 	margin-left: 0;

varia/style.css

@@ -1887,6 +1887,10 @@ hr.wp-block-separator.is-style-dots:before {
 	padding-left: 0.83333rem;
 }
 
+[class*="has-background"] hr.wp-block-separator {
+	border-color: currentColor;
+}
+
 .wp-block-jetpack-slideshow ul {
 	margin-left: 0;
 	margin-right: 0;