diff --git a/packages/calcite-components/src/components/scrim/scrim.scss b/packages/calcite-components/src/components/scrim/scrim.scss
index 10620e5b889..d15973b4144 100644
--- a/packages/calcite-components/src/components/scrim/scrim.scss
+++ b/packages/calcite-components/src/components/scrim/scrim.scss
@@ -3,10 +3,11 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-scrim-background: Specifies the background color of the scrim.
+ * @prop --calcite-scrim-background: [Deprecated] Use the `--calcite-scrim-background-color` property instead. Specifies the background color of the component.
+ * @prop --calcite-scrim-background-color: Specifies the background color of the component.
  */
 :host {
-  --calcite-scrim-background: var(--calcite-color-transparent-scrim);
+  --calcite-scrim-background-color: var(--calcite-scrim-background, var(--calcite-color-transparent-scrim));
 }
 
 :host {
@@ -39,7 +40,7 @@
   justify-center
   overflow-hidden;
   animation: calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;
-  background-color: var(--calcite-scrim-background, var(--calcite-color-transparent-scrim));
+  background-color: var(--calcite-scrim-background-color);
 }
 
 .content {
diff --git a/packages/calcite-components/src/components/scrim/scrim.stories.ts b/packages/calcite-components/src/components/scrim/scrim.stories.ts
index 9ac377c2bba..bc6a7c56585 100644
--- a/packages/calcite-components/src/components/scrim/scrim.stories.ts
+++ b/packages/calcite-components/src/components/scrim/scrim.stories.ts
@@ -82,3 +82,73 @@ export const noContent_TestOnly = (): string =>
   html` <div tabindex="0" style="position: relative; width: 400px; height: 400px">
     <calcite-scrim></calcite-scrim>
   </div>`;
+
+export const theming_TestOnly = (): string => html`
+  <div tabindex="0" style="position: relative; width: 400px; height: 400px">
+    <calcite-scrim
+      dir="rtl"
+      class="calcite-mode-dark"
+      ${boolean("loading", false)}
+      style="--calcite-scrim-background-color: purple"
+    ></calcite-scrim>
+    <div style="width: 400px; height: 400px; overflow: auto">
+      <p>
+        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
+        quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean
+        ultricies mi vitae est. Mauris placerat eleifend leo.
+      </p>
+      <ul>
+        <li>
+          Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed
+          arcu. Cras consequat.
+        </li>
+        <li>
+          Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.
+          Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
+        </li>
+        <li>
+          Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetur ligula vulputate sem tristique cursus.
+          Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
+        </li>
+        <li>
+          Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
+        </li>
+      </ul>
+    </div>
+  </div>
+`;
+
+export const themingDeprecatedFallback_TestOnly = (): string => html`
+  <div tabindex="0" style="position: relative; width: 400px; height: 400px">
+    <calcite-scrim
+      dir="rtl"
+      class="calcite-mode-dark"
+      ${boolean("loading", false)}
+      style="--calcite-scrim-background: purple"
+    ></calcite-scrim>
+    <div style="width: 400px; height: 400px; overflow: auto">
+      <p>
+        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
+        quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean
+        ultricies mi vitae est. Mauris placerat eleifend leo.
+      </p>
+      <ul>
+        <li>
+          Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed
+          arcu. Cras consequat.
+        </li>
+        <li>
+          Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat.
+          Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
+        </li>
+        <li>
+          Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetur ligula vulputate sem tristique cursus.
+          Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
+        </li>
+        <li>
+          Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
+        </li>
+      </ul>
+    </div>
+  </div>
+`;
diff --git a/packages/calcite-components/src/demos/scrim.html b/packages/calcite-components/src/demos/scrim.html
index f8b89acc2f6..9646aeefabf 100644
--- a/packages/calcite-components/src/demos/scrim.html
+++ b/packages/calcite-components/src/demos/scrim.html
@@ -1,256 +1,247 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Scrim</title>
 
-    <style>
-      .parent {
-        display: flex;
-        flex-wrap: wrap;
-        width: 70%;
-        margin-left: 5%;
-      }
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <title>Scrim</title>
 
-      .child {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        flex: 1 1 auto;
-        color: var(--calcite-color-text-3);
-        font-family: var(--calcite-sans-family);
-        font-size: var(--calcite-font-size-0);
-        font-weight: var(--calcite-font-weight-medium);
-        padding: 1rem;
-        margin-bottom: 2rem;
-      }
-    </style>
-    <script src="./_assets/head.js"></script>
-  </head>
+  <style>
+    .parent {
+      display: flex;
+      flex-wrap: wrap;
+      width: 70%;
+      margin-left: 5%;
+    }
 
-  <body>
-    <demo-dom-swapper>
-      <h1 style="margin: 0 auto; text-align: center">Scrim</h1>
+    .child {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      flex: 1 1 auto;
+      color: var(--calcite-color-text-3);
+      font-family: var(--calcite-sans-family);
+      font-size: var(--calcite-font-size-0);
+      font-weight: var(--calcite-font-weight-medium);
+      padding: 1rem;
+      margin-bottom: 2rem;
+    }
+  </style>
+  <script src="./_assets/head.js"></script>
+</head>
 
-      <!-- simple panel example -->
-      <div class="parent">
-        <div class="child">
-          Default
-          <div
-            tabindex="0"
-            style="position: relative; width: 400px; height: 400px; padding: 25px; resize: both; overflow: auto"
-          >
-            <calcite-scrim></calcite-scrim>
-            <div style="width: 100%; height: 100%; overflow: auto">
-              <p>
-                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
-                tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
-                semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
-              </p>
-              <ul>
-                <li>
-                  Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in,
-                  diam. Sed arcu. Cras consequat.
-                </li>
-                <li>
-                  Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu
-                  erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
-                </li>
-                <li>
-                  Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem
-                  tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
-                </li>
-                <li>
-                  Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate,
-                  nunc.
-                </li>
-              </ul>
-            </div>
+<body>
+  <demo-dom-swapper>
+    <h1 style="margin: 0 auto; text-align: center">Scrim</h1>
+
+    <!-- simple panel example -->
+    <div class="parent">
+      <div class="child">
+        Default
+        <div tabindex="0"
+          style="position: relative; width: 400px; height: 400px; padding: 25px; resize: both; overflow: auto">
+          <calcite-scrim></calcite-scrim>
+          <div style="width: 100%; height: 100%; overflow: auto">
+            <p>
+              Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
+              tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
+              semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+            </p>
+            <ul>
+              <li>
+                Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in,
+                diam. Sed arcu. Cras consequat.
+              </li>
+              <li>
+                Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu
+                erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
+              </li>
+              <li>
+                Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem
+                tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
+              </li>
+              <li>
+                Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate,
+                nunc.
+              </li>
+            </ul>
           </div>
         </div>
+      </div>
 
-        <!-- loading scrim panel -->
-        <div class="child">
-          Loading
-          <div
-            tabindex="0"
-            style="position: relative; width: 400px; height: 400px; padding: 25px; resize: both; overflow: auto"
-          >
-            <calcite-scrim loading></calcite-scrim>
-            <div style="width: 100%; height: 100%; overflow: auto">
-              <p>
-                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
-                tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
-                semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
-              </p>
-              <ul>
-                <li>
-                  Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in,
-                  diam. Sed arcu. Cras consequat.
-                </li>
-                <li>
-                  Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu
-                  erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
-                </li>
-                <li>
-                  Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem
-                  tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
-                </li>
-                <li>
-                  Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate,
-                  nunc.
-                </li>
-              </ul>
-            </div>
+      <!-- loading scrim panel -->
+      <div class="child">
+        Loading
+        <div tabindex="0"
+          style="position: relative; width: 400px; height: 400px; padding: 25px; resize: both; overflow: auto">
+          <calcite-scrim loading></calcite-scrim>
+          <div style="width: 100%; height: 100%; overflow: auto">
+            <p>
+              Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
+              tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
+              semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+            </p>
+            <ul>
+              <li>
+                Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in,
+                diam. Sed arcu. Cras consequat.
+              </li>
+              <li>
+                Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu
+                erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
+              </li>
+              <li>
+                Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem
+                tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
+              </li>
+              <li>
+                Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate,
+                nunc.
+              </li>
+            </ul>
           </div>
         </div>
-        <div class="child">
-          Simple text content in default slot
-          <div tabindex="0" style="position: relative; width: 400px; height: 400px; padding: 25px">
-            <calcite-scrim> This is just text. </calcite-scrim>
-            <div style="width: 400px; height: 400px; overflow: auto">
-              <p>
-                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
-                tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
-                semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
-              </p>
-              <ul>
-                <li>
-                  Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in,
-                  diam. Sed arcu. Cras consequat.
-                </li>
-                <li>
-                  Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu
-                  erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
-                </li>
-                <li>
-                  Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem
-                  tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
-                </li>
-                <li>
-                  Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate,
-                  nunc.
-                </li>
-              </ul>
-            </div>
+      </div>
+      <div class="child">
+        Simple text content in default slot
+        <div tabindex="0" style="position: relative; width: 400px; height: 400px; padding: 25px">
+          <calcite-scrim> This is just text. </calcite-scrim>
+          <div style="width: 400px; height: 400px; overflow: auto">
+            <p>
+              Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
+              tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
+              semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+            </p>
+            <ul>
+              <li>
+                Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in,
+                diam. Sed arcu. Cras consequat.
+              </li>
+              <li>
+                Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu
+                erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
+              </li>
+              <li>
+                Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem
+                tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
+              </li>
+              <li>
+                Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate,
+                nunc.
+              </li>
+            </ul>
           </div>
         </div>
+      </div>
 
-        <!-- scrim with content in default slot-->
-        <div class="child">
-          Determinate loader in default slot<br />(Scrim hiding is scripted.)
-          <div tabindex="0" style="position: relative; width: 400px; height: 400px; padding: 25px">
-            <div style="margin: 1rem 0">
-              <calcite-button id="replay-m" appearance="outline" width="full" icon-start="refresh" scale="m"
-                >Replay loader</calcite-button
-              >
-            </div>
-            <calcite-scrim id="scrim-determinate">
-              <calcite-loader
-                label="loading"
-                type="determinate"
-                value="0"
-                id="loader-determinate-m"
-                text="Loading Brunswick stew"
-                scale="m"
-              >
-              </calcite-loader>
-              <calcite-button width="full" icon-start="x" id="cancel-load">Cancel</calcite-button>
-            </calcite-scrim>
-            <div style="width: 400px; height: 400px; overflow: auto">
-              <p>
-                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
-                tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
-                semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
-              </p>
-              <ul>
-                <li>
-                  Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in,
-                  diam. Sed arcu. Cras consequat.
-                </li>
-                <li>
-                  Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu
-                  erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
-                </li>
-                <li>
-                  Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem
-                  tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
-                </li>
-                <li>
-                  Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate,
-                  nunc.
-                </li>
-              </ul>
-            </div>
+      <!-- scrim with content in default slot-->
+      <div class="child">
+        Determinate loader in default slot<br />(Scrim hiding is scripted.)
+        <div tabindex="0" style="position: relative; width: 400px; height: 400px; padding: 25px">
+          <div style="margin: 1rem 0">
+            <calcite-button id="replay-m" appearance="outline" width="full" icon-start="refresh" scale="m">Replay
+              loader</calcite-button>
+          </div>
+          <calcite-scrim id="scrim-determinate">
+            <calcite-loader label="loading" type="determinate" value="0" id="loader-determinate-m"
+              text="Loading Brunswick stew" scale="m">
+            </calcite-loader>
+            <calcite-button width="full" icon-start="x" id="cancel-load">Cancel</calcite-button>
+          </calcite-scrim>
+          <div style="width: 400px; height: 400px; overflow: auto">
+            <p>
+              Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
+              tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
+              semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+            </p>
+            <ul>
+              <li>
+                Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in,
+                diam. Sed arcu. Cras consequat.
+              </li>
+              <li>
+                Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu
+                erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
+              </li>
+              <li>
+                Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem
+                tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
+              </li>
+              <li>
+                Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate,
+                nunc.
+              </li>
+            </ul>
           </div>
         </div>
+      </div>
 
-        <!-- loading scrim panel -->
-        <div class="child">
-          Loading and with text content in default slot
-          <div tabindex="0" style="position: relative; width: 400px; height: 400px; padding: 25px">
-            <calcite-scrim loading> This is just text. </calcite-scrim>
-            <div style="width: 400px; height: 400px; overflow: auto">
-              <p>
-                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
-                tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
-                semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
-              </p>
-              <ul>
-                <li>
-                  Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in,
-                  diam. Sed arcu. Cras consequat.
-                </li>
-                <li>
-                  Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu
-                  erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
-                </li>
-                <li>
-                  Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem
-                  tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
-                </li>
-                <li>
-                  Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate,
-                  nunc.
-                </li>
-              </ul>
-            </div>
+      <!-- loading scrim panel -->
+      <div class="child">
+        Loading and with text content in default slot
+        <div tabindex="0" style="position: relative; width: 400px; height: 400px; padding: 25px">
+          <calcite-scrim loading> This is just text. </calcite-scrim>
+          <div style="width: 400px; height: 400px; overflow: auto">
+            <p>
+              Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum
+              tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas
+              semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
+            </p>
+            <ul>
+              <li>
+                Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in,
+                diam. Sed arcu. Cras consequat.
+              </li>
+              <li>
+                Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu
+                erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
+              </li>
+              <li>
+                Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem
+                tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
+              </li>
+              <li>
+                Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate,
+                nunc.
+              </li>
+            </ul>
           </div>
         </div>
       </div>
-      <script>
-        (function () {
-          const scrim = document.querySelector("#scrim-determinate");
-          const determinateLoaderMedium = document.querySelector("#loader-determinate-m");
-          const randoms = [0, 0, 0, 0, 0, 0, 1, 3];
-          function updateLoader() {
-            const random = randoms[Math.floor(Math.random() * randoms.length)];
-            determinateLoaderMedium.value = Math.min(determinateLoaderMedium.value + random, 100);
-            if (determinateLoaderMedium.value !== 100) {
-              requestAnimationFrame(updateLoader);
-            } else {
-              scrim.setAttribute("hidden", "true");
-            }
+    </div>
+    <script>
+      (function () {
+        const scrim = document.querySelector("#scrim-determinate");
+        const determinateLoaderMedium = document.querySelector("#loader-determinate-m");
+        const randoms = [0, 0, 0, 0, 0, 0, 1, 3];
+        function updateLoader() {
+          const random = randoms[Math.floor(Math.random() * randoms.length)];
+          determinateLoaderMedium.value = Math.min(determinateLoaderMedium.value + random, 100);
+          if (determinateLoaderMedium.value !== 100) {
+            requestAnimationFrame(updateLoader);
+          } else {
+            scrim.setAttribute("hidden", "true");
           }
+        }
 
+        updateLoader();
+
+        document.querySelector("#replay-m").addEventListener("click", function () {
+          cancelAnimationFrame(updateLoader);
+          determinateLoaderMedium.value = 0;
+          scrim.removeAttribute("hidden");
           updateLoader();
+        });
 
-          document.querySelector("#replay-m").addEventListener("click", function () {
-            cancelAnimationFrame(updateLoader);
-            determinateLoaderMedium.value = 0;
-            scrim.removeAttribute("hidden");
-            updateLoader();
-          });
+        document.querySelector("#cancel-load").addEventListener("click", function () {
+          cancelAnimationFrame(updateLoader);
+          scrim.setAttribute("hidden", "true");
+        });
+      })();
+    </script>
+  </demo-dom-swapper>
+</body>
 
-          document.querySelector("#cancel-load").addEventListener("click", function () {
-            cancelAnimationFrame(updateLoader);
-            scrim.setAttribute("hidden", "true");
-          });
-        })();
-      </script>
-    </demo-dom-swapper>
-  </body>
-</html>
+</html>
\ No newline at end of file