fix SCSS theme mixin when multiple selectors are being set

assets/sass/abstracts/_functions.scss

@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "sass:list";
 @use "sass:string";
 
 @use "settings";
@@ -19,6 +20,29 @@
   @return linear-gradient($color-opaque-alpha, $color-opaque-alpha);
 }
 
+// https://stackoverflow.com/a/65853667/1438024
+@function str-split($str, $substr: ",") {
+  // return immediately if this function isn't necessary
+  @if (string.index("#{$str}", "#{$substr}") == null) {
+    @return $str;
+  }
+
+  $list: ();
+
+  @while string.index("#{$str}", "#{$substr}") != null {
+    @if (string.index("#{$str}", "#{$substr}") > 1) {
+      $list: list.append($list, string.slice("#{$str}", 1, string.index("#{$str}", "#{$substr}") - 1));
+    }
+    $str: string.slice("#{$str}", string.index("#{$str}", "#{$substr}") + 1, string.length("#{$str}"));
+  }
+
+  @if (string.slice("#{$str}", 1, string.length("#{$str}")) != "") {
+    $list: list.append($list, string.slice("#{$str}", 1, string.length("#{$str}")));
+  }
+
+  @return $list;
+}
+
 // Web fonts (see components/_typography.scss)
 @mixin font-face(
   $family,

assets/sass/abstracts/_themes.scss

@@ -1,4 +1,7 @@
 @use "sass:map";
+@use "sass:string";
+
+@use "../abstracts/functions";
 
 // Dark & Light Themes
 $themes: (
@@ -165,9 +168,14 @@ $icon-wand: 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000
 // ----------------------------------------
 
 @mixin themed($property, $key) {
+  // hack to allow root (body) theming
+  $selectors: functions.str-split("#{&}");
+
   @each $theme, $map in $themes {
-    @at-root body.#{$theme} #{&} {
+    @each $selector in $selectors {
-      #{$property}: map-get($map, $key);
+      @at-root body.#{$theme} #{$selector} {
+        #{$property}: map.get($map, $key);
+      }
     }
   }
 }

assets/sass/components/_syntax.scss

@@ -1,3 +1,5 @@
+@use "../abstracts/themes";
+
 // all code
 code {
   font-size: 0.925em;
@@ -53,13 +55,18 @@ div.highlight-clipboard-enabled {
     top: 0;
     right: 0;
 
-    width: 5.25em;
+    width: 5.5em;
-    padding: 0.75em 0.25em;
+    padding: 0.6em 0.2em;
     border: 1px solid;
     cursor: pointer;
 
-    font-size: 0.9em;
+    font-size: 0.85em;
     font-weight: 500;
+    line-height: 1;
+
+    &:hover {
+      @include themes.themed(color, "links");
+    }
   }
 }
 

yarn.lock

@@ -3175,17 +3175,17 @@ copy-webpack-plugin@^9.0.1:
     serialize-javascript "^6.0.0"
 
 core-js-compat@^3.14.0, core-js-compat@^3.16.0:
-  version "3.16.1"
+  version "3.16.2"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.16.1.tgz#c44b7caa2dcb94b673a98f27eee1c8312f55bc2d"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.16.2.tgz#442ef1d933ca6fc80859bd5a1db7a3ba716aaf56"
-  integrity sha512-NHXQXvRbd4nxp9TEmooTJLUf94ySUG6+DSsscBpTftN1lQLQ4LjnWvc7AoIo4UjDsFF3hB8Uh5LLCRRdaiT5MQ==
+  integrity sha512-4lUshXtBXsdmp8cDWh6KKiHUg40AjiuPD3bOWkNVsr1xkAhpUqCjaZ8lB1bKx9Gb5fXcbRbFJ4f4qpRIRTuJqQ==
   dependencies:
     browserslist "^4.16.7"
     semver "7.0.0"
 
 core-js@^3.16.1:
-  version "3.16.1"
+  version "3.16.2"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.16.1.tgz#f4485ce5c9f3c6a7cb18fa80488e08d362097249"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.16.2.tgz#3f485822889c7fc48ef463e35be5cc2a4a01a1f4"
-  integrity sha512-AAkP8i35EbefU+JddyWi12AWE9f2N/qr/pwnDtWz4nyUIBGMJPX99ANFFRSw6FefM374lDujdtLDyhN2A/btHw==
+  integrity sha512-P0KPukO6OjMpjBtHSceAZEWlDD1M2Cpzpg6dBbrjFqFhBHe/BwhxaP820xKOjRn/lZRQirrCusIpLS/n2sgXLQ==
 
 core-util-is@~1.0.0:
   version "1.0.2"