diff --git a/package-lock.json b/package-lock.json
index ba3479fd966..d2670e611e7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,8 +28,8 @@
         "postcss-calc": "8.2.4",
         "postcss-cli": "10.0.0",
         "postcss-custom-media": "8.0.2",
-        "postcss-extend": "1.0.5",
         "postcss-import": "14.1.0",
+        "postcss-mixins": "9.0.3",
         "postcss-nesting": "10.1.10",
         "pug": "3.0.2",
         "serve": "14.0.1",
@@ -1002,6 +1002,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/camelcase-keys": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
@@ -2980,12 +2989,6 @@
         "@sideway/pinpoint": "^2.0.0"
       }
     },
-    "node_modules/js-base64": {
-      "version": "2.6.4",
-      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
-      "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
-      "dev": true
-    },
     "node_modules/js-stringify": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
@@ -4354,60 +4357,6 @@
         "postcss": "^8.3"
       }
     },
-    "node_modules/postcss-extend": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/postcss-extend/-/postcss-extend-1.0.5.tgz",
-      "integrity": "sha512-zplAc8IovPMe/JqV0B9nl6o6sElIX7VX1CP2FbV+lGZud3hcnDMr4clN0S8xdHthQoTNDN2K1Q+z0YEW5FWc8A==",
-      "dev": true,
-      "dependencies": {
-        "postcss": "^5.0.4"
-      }
-    },
-    "node_modules/postcss-extend/node_modules/has-flag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
-      "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/postcss-extend/node_modules/postcss": {
-      "version": "5.2.18",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",
-      "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "^1.1.3",
-        "js-base64": "^2.1.9",
-        "source-map": "^0.5.6",
-        "supports-color": "^3.2.3"
-      },
-      "engines": {
-        "node": ">=0.12"
-      }
-    },
-    "node_modules/postcss-extend/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/postcss-extend/node_modules/supports-color": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
-      "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
     "node_modules/postcss-import": {
       "version": "14.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
@@ -4425,6 +4374,25 @@
         "postcss": "^8.0.0"
       }
     },
+    "node_modules/postcss-js": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
+      "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
+      "dev": true,
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3.3"
+      }
+    },
     "node_modules/postcss-load-config": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
@@ -4454,6 +4422,28 @@
         }
       }
     },
+    "node_modules/postcss-mixins": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-mixins/-/postcss-mixins-9.0.3.tgz",
+      "integrity": "sha512-99r5oYtK38cAdGKNYumVHs84u2G6SfbjWo7HCDF6Mxr0o2lFdnRRYwTl6DTqmfRpRvWAUlgav2iJv0fLXZjDKQ==",
+      "dev": true,
+      "dependencies": {
+        "fast-glob": "^3.2.11",
+        "postcss-js": "^4.0.0",
+        "postcss-simple-vars": "^6.0.3",
+        "sugarss": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
     "node_modules/postcss-nesting": {
       "version": "10.1.10",
       "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-10.1.10.tgz",
@@ -4504,6 +4494,22 @@
         "node": ">=4"
       }
     },
+    "node_modules/postcss-simple-vars": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-simple-vars/-/postcss-simple-vars-6.0.3.tgz",
+      "integrity": "sha512-fkNn4Zio8vN4vIig9IFdb8lVlxWnYR769RgvxCM6YWlFKie/nQaOcaMMMFz/s4gsfHW4/5bJW+i57zD67mQU7g==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.1"
+      }
+    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -5799,6 +5805,22 @@
       "integrity": "sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA==",
       "dev": true
     },
+    "node_modules/sugarss": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-4.0.1.tgz",
+      "integrity": "sha512-WCjS5NfuVJjkQzK10s8WOBY+hhDxxNt/N6ZaGwxFZ+wN3/lKKFSaaKUNecULcTTvE4urLcKaZFQD8vO0mOZujw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3.3"
+      }
+    },
     "node_modules/supports-color": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
@@ -7339,6 +7361,12 @@
       "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
       "dev": true
     },
+    "camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true
+    },
     "camelcase-keys": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
@@ -8871,12 +8899,6 @@
         "@sideway/pinpoint": "^2.0.0"
       }
     },
-    "js-base64": {
-      "version": "2.6.4",
-      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
-      "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
-      "dev": true
-    },
     "js-stringify": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
@@ -9944,50 +9966,6 @@
         "postcss-value-parser": "^4.2.0"
       }
     },
-    "postcss-extend": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/postcss-extend/-/postcss-extend-1.0.5.tgz",
-      "integrity": "sha512-zplAc8IovPMe/JqV0B9nl6o6sElIX7VX1CP2FbV+lGZud3hcnDMr4clN0S8xdHthQoTNDN2K1Q+z0YEW5FWc8A==",
-      "dev": true,
-      "requires": {
-        "postcss": "^5.0.4"
-      },
-      "dependencies": {
-        "has-flag": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
-          "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
-          "dev": true
-        },
-        "postcss": {
-          "version": "5.2.18",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",
-          "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
-          "dev": true,
-          "requires": {
-            "chalk": "^1.1.3",
-            "js-base64": "^2.1.9",
-            "source-map": "^0.5.6",
-            "supports-color": "^3.2.3"
-          }
-        },
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "3.2.3",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
-          "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
-          "dev": true,
-          "requires": {
-            "has-flag": "^1.0.0"
-          }
-        }
-      }
-    },
     "postcss-import": {
       "version": "14.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
@@ -9999,6 +9977,15 @@
         "resolve": "^1.1.7"
       }
     },
+    "postcss-js": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
+      "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
+      "dev": true,
+      "requires": {
+        "camelcase-css": "^2.0.1"
+      }
+    },
     "postcss-load-config": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
@@ -10009,6 +9996,18 @@
         "yaml": "^2.1.1"
       }
     },
+    "postcss-mixins": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-mixins/-/postcss-mixins-9.0.3.tgz",
+      "integrity": "sha512-99r5oYtK38cAdGKNYumVHs84u2G6SfbjWo7HCDF6Mxr0o2lFdnRRYwTl6DTqmfRpRvWAUlgav2iJv0fLXZjDKQ==",
+      "dev": true,
+      "requires": {
+        "fast-glob": "^3.2.11",
+        "postcss-js": "^4.0.0",
+        "postcss-simple-vars": "^6.0.3",
+        "sugarss": "^4.0.1"
+      }
+    },
     "postcss-nesting": {
       "version": "10.1.10",
       "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-10.1.10.tgz",
@@ -10043,6 +10042,13 @@
         "util-deprecate": "^1.0.2"
       }
     },
+    "postcss-simple-vars": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-simple-vars/-/postcss-simple-vars-6.0.3.tgz",
+      "integrity": "sha512-fkNn4Zio8vN4vIig9IFdb8lVlxWnYR769RgvxCM6YWlFKie/nQaOcaMMMFz/s4gsfHW4/5bJW+i57zD67mQU7g==",
+      "dev": true,
+      "requires": {}
+    },
     "postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -11112,6 +11118,13 @@
       "integrity": "sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA==",
       "dev": true
     },
+    "sugarss": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-4.0.1.tgz",
+      "integrity": "sha512-WCjS5NfuVJjkQzK10s8WOBY+hhDxxNt/N6ZaGwxFZ+wN3/lKKFSaaKUNecULcTTvE4urLcKaZFQD8vO0mOZujw==",
+      "dev": true,
+      "requires": {}
+    },
     "supports-color": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
diff --git a/package.json b/package.json
index c297f005690..4f6f8ff0afb 100644
--- a/package.json
+++ b/package.json
@@ -60,8 +60,8 @@
     "postcss-calc": "8.2.4",
     "postcss-cli": "10.0.0",
     "postcss-custom-media": "8.0.2",
-    "postcss-extend": "1.0.5",
     "postcss-import": "14.1.0",
+    "postcss-mixins": "9.0.3",
     "postcss-nesting": "10.1.10",
     "pug": "3.0.2",
     "serve": "14.0.1",
diff --git a/postcss.config.js b/postcss.config.js
index f6d3f4ad138..3f62a00465c 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,8 +1,8 @@
 module.exports = {
   plugins: [
+    require('postcss-mixins'),
     require('autoprefixer'),
     require('postcss-import'),
-    require('postcss-extend'),
     require('postcss-nesting'),
     require('postcss-custom-media'),
     require('postcss-calc'),
diff --git a/src/css/base/variables.css b/src/css/base/variables.css
index ed639bb52ea..2c742936f83 100644
--- a/src/css/base/variables.css
+++ b/src/css/base/variables.css
@@ -69,22 +69,21 @@
   --logo-height: calc((100vw - var(--wrap-padding-horizontal) * 2) / 134 * 12);
 }
 
-%dark-theme {
+@define-mixin dark-theme {
   --color-body-text: var(--color-neutral-0);
   --color-body-bg: var(--color-neutral-90);
   --color-card-bg: var(--color-neutral-95);
   --color-overlay-bg: rgba(20, 20, 20, .95);
-  --color-flyout-bg: var(--color-overlay-bg);
   --color-border-light: var(--color-neutral-80);
   --color-border-medium: var(--color-neutral-75);
 }
 
 :root[data-theme="dark"] {
-  @extend %dark-theme;
+  @mixin dark-theme;
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
-    @extend %dark-theme;
+    @mixin dark-theme;
   }
 }