diff --git a/core/.stylelintignore b/core/.stylelintignore
index 56035f44ae..08a66fc807 100644
--- a/core/.stylelintignore
+++ b/core/.stylelintignore
@@ -2,3 +2,9 @@ themes/claro/**/*.css
 !themes/claro/**/*.pcss.css
 themes/olivero/**/*.css
 !themes/olivero/**/*.pcss.css
+misc/dialog/off-canvas.reset.css
+misc/dialog/off-canvas.base.css
+themes/stable/css/core/dialog/off-canvas.reset.css
+themes/stable/css/core/dialog/off-canvas.base.css
+themes/stable9/css/core/dialog/off-canvas.reset.css
+themes/stable9/css/core/dialog/off-canvas.base.css
diff --git a/core/misc/dialog/off-canvas.base.css b/core/misc/dialog/off-canvas.base.css
index a0948c0ade..94860f605e 100644
--- a/core/misc/dialog/off-canvas.base.css
+++ b/core/misc/dialog/off-canvas.base.css
@@ -1,19 +1,112 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
 /**
  * @file
  * Set base styles for the off-canvas dialog.
  */
 
 /* Set some global attributes. */
-#drupal-off-canvas *,
-#drupal-off-canvas *:not(div) {
+
+#drupal-off-canvas {
   color: #ddd;
   background: #444;
-  font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
 }
 
+#drupal-off-canvas span,
+  #drupal-off-canvas applet,
+  #drupal-off-canvas object,
+  #drupal-off-canvas iframe,
+  #drupal-off-canvas h1,
+  #drupal-off-canvas h2,
+  #drupal-off-canvas h3,
+  #drupal-off-canvas h4,
+  #drupal-off-canvas h5,
+  #drupal-off-canvas h6,
+  #drupal-off-canvas p,
+  #drupal-off-canvas blockquote,
+  #drupal-off-canvas pre,
+  #drupal-off-canvas a,
+  #drupal-off-canvas abbr,
+  #drupal-off-canvas acronym,
+  #drupal-off-canvas address,
+  #drupal-off-canvas big,
+  #drupal-off-canvas cite,
+  #drupal-off-canvas code,
+  #drupal-off-canvas del,
+  #drupal-off-canvas dfn,
+  #drupal-off-canvas em,
+  #drupal-off-canvas img,
+  #drupal-off-canvas ins,
+  #drupal-off-canvas kbd,
+  #drupal-off-canvas q,
+  #drupal-off-canvas s,
+  #drupal-off-canvas samp,
+  #drupal-off-canvas small,
+  #drupal-off-canvas strike,
+  #drupal-off-canvas strong,
+  #drupal-off-canvas sub,
+  #drupal-off-canvas sup,
+  #drupal-off-canvas tt,
+  #drupal-off-canvas var,
+  #drupal-off-canvas b,
+  #drupal-off-canvas u,
+  #drupal-off-canvas i,
+  #drupal-off-canvas center,
+  #drupal-off-canvas dl,
+  #drupal-off-canvas dt,
+  #drupal-off-canvas dd,
+  #drupal-off-canvas ol,
+  #drupal-off-canvas ul,
+  #drupal-off-canvas li,
+  #drupal-off-canvas fieldset,
+  #drupal-off-canvas form,
+  #drupal-off-canvas label,
+  #drupal-off-canvas legend,
+  #drupal-off-canvas table,
+  #drupal-off-canvas caption,
+  #drupal-off-canvas tbody,
+  #drupal-off-canvas tfoot,
+  #drupal-off-canvas thead,
+  #drupal-off-canvas tr,
+  #drupal-off-canvas th,
+  #drupal-off-canvas td,
+  #drupal-off-canvas article,
+  #drupal-off-canvas aside,
+  #drupal-off-canvas canvas,
+  #drupal-off-canvas details,
+  #drupal-off-canvas embed,
+  #drupal-off-canvas figure,
+  #drupal-off-canvas figcaption,
+  #drupal-off-canvas footer,
+  #drupal-off-canvas header,
+  #drupal-off-canvas hgroup,
+  #drupal-off-canvas menu,
+  #drupal-off-canvas nav,
+  #drupal-off-canvas output,
+  #drupal-off-canvas ruby,
+  #drupal-off-canvas section,
+  #drupal-off-canvas summary,
+  #drupal-off-canvas time,
+  #drupal-off-canvas mark,
+  #drupal-off-canvas audio,
+  #drupal-off-canvas video,
+  #drupal-off-canvas input,
+  #drupal-off-canvas textarea {
+    color: inherit;
+    background: inherit;
+    font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
+  }
+
 /* Generic elements. */
+
 #drupal-off-canvas a,
 #drupal-off-canvas .link {
+  cursor: pointer;
   transition: color 0.5s ease;
   text-decoration: none;
   color: #85bef4;
@@ -29,14 +122,17 @@
 #drupal-off-canvas .link:hover {
   text-decoration: underline;
 }
+
 #drupal-off-canvas hr {
   height: 1px;
   background: #ccc;
 }
+
 #drupal-off-canvas summary,
 #drupal-off-canvas .fieldgroup:not(.form-composite) > legend {
   font-weight: bold;
 }
+
 #drupal-off-canvas h1,
 #drupal-off-canvas .heading-a {
   display: block;
@@ -44,87 +140,105 @@
   font-weight: bold;
   line-height: 1.875em;
 }
+
 #drupal-off-canvas h2,
 #drupal-off-canvas .heading-b {
   display: block;
-  margin: 10px 0;
+  margin: 0.625rem 0;
   font-size: 1.385em;
   font-weight: bold;
 }
+
 #drupal-off-canvas h3,
 #drupal-off-canvas .heading-c {
   display: block;
-  margin: 10px 0;
+  margin: 0.625rem 0;
   font-size: 1.231em;
   font-weight: bold;
 }
+
 #drupal-off-canvas h4,
 #drupal-off-canvas .heading-d {
   display: block;
-  margin: 10px 0;
+  margin: 0.625rem 0;
   font-size: 1.154em;
   font-weight: bold;
 }
+
 #drupal-off-canvas h5,
 #drupal-off-canvas .heading-e {
   display: block;
-  margin: 10px 0;
+  margin: 0.625rem 0;
   font-size: 1.077em;
   font-weight: bold;
 }
+
 #drupal-off-canvas h6,
 #drupal-off-canvas .heading-f {
   display: block;
-  margin: 10px 0;
+  margin: 0.625rem 0;
   font-size: 1.077em;
   font-weight: bold;
 }
+
 #drupal-off-canvas p {
   margin: 1em 0;
 }
+
 #drupal-off-canvas dl {
-  margin: 0 0 20px;
+  margin: 0 0 1.25rem;
 }
+
 #drupal-off-canvas dl dd,
 #drupal-off-canvas dl dl {
-  margin-bottom: 10px;
-  margin-left: 20px; /* LTR */
+  margin-bottom: 0.625rem;
+  margin-left: 1.25rem; /* LTR */
 }
+
 [dir="rtl"] #drupal-off-canvas dl dd,
 [dir="rtl"] #drupal-off-canvas dl dl {
-  margin-right: 20px;
+  margin-right: 1.25rem;
 }
+
 #drupal-off-canvas blockquote {
-  margin: 1em 40px;
+  margin: 1em 2.5rem;
 }
+
 #drupal-off-canvas address {
   font-style: italic;
 }
+
 #drupal-off-canvas u,
 #drupal-off-canvas ins {
   text-decoration: underline;
 }
+
 #drupal-off-canvas s,
 #drupal-off-canvas strike,
 #drupal-off-canvas del {
   text-decoration: line-through;
 }
+
 #drupal-off-canvas big {
   font-size: larger;
 }
+
 #drupal-off-canvas small {
   font-size: smaller;
 }
+
 #drupal-off-canvas sub {
   vertical-align: sub;
   font-size: smaller;
   line-height: normal;
 }
+
 #drupal-off-canvas sup {
   vertical-align: super;
   font-size: smaller;
   line-height: normal;
 }
+
 #drupal-off-canvas abbr,
 #drupal-off-canvas acronym {
   border-bottom: dotted 1px;
@@ -135,29 +249,44 @@
   list-style-type: disc;
   list-style-image: none;
 }
+
 [dir="rtl"] #drupal-off-canvas .messages__list {
   margin-right: 0;
 }
+
 #drupal-off-canvas ol {
   list-style-type: decimal;
 }
+
 #drupal-off-canvas ul li,
 #drupal-off-canvas ol li {
   display: block;
 }
+
 #drupal-off-canvas blockquote,
 #drupal-off-canvas code {
-  margin: 20px 0;
+  margin: 1.25rem 0;
 }
+
 #drupal-off-canvas pre {
-  margin: 20px 0;
+  margin: 1.25rem 0;
   white-space: pre-wrap;
 }
 
+#drupal-off-canvas details {
+  display: block;
+}
+
+#drupal-off-canvas summary {
+  display: list-item;
+}
+
 /* Classes for hidden and visually hidden elements. See hidden.module.css. */
+
 #drupal-off-canvas .hidden {
   display: none;
 }
+
 #drupal-off-canvas .visually-hidden {
   position: absolute !important;
   overflow: hidden;
@@ -166,6 +295,7 @@
   height: 1px;
   word-wrap: normal;
 }
+
 #drupal-off-canvas .visually-hidden.focusable:active,
 #drupal-off-canvas .visually-hidden.focusable:focus {
   position: static !important;
@@ -174,58 +304,70 @@
   width: auto;
   height: auto;
 }
+
 #drupal-off-canvas .invisible {
   visibility: hidden;
 }
 
 /* Some system classes. See system.admin.css. */
+
 #drupal-off-canvas .panel {
-  padding: 5px 5px 15px;
+  padding: 0.3125rem 0.3125rem 0.9375rem;
 }
+
 #drupal-off-canvas .panel__description {
-  margin: 0 0 3px;
-  padding: 2px 0 3px 0;
+  margin: 0 0 0.1875rem;
+  padding: 2px 0 0.1875rem 0;
 }
+
 #drupal-off-canvas .compact-link {
-  margin: 0 0 10px 0;
+  margin: 0 0 0.625rem 0;
 }
+
 #drupal-off-canvas small .admin-link:before {
   content: " [";
 }
+
 #drupal-off-canvas small .admin-link:after {
   content: "]";
 }
 
 /* Override jQuery UI */
+
 #drupal-off-canvas .ui-widget-content a {
   color: #85bef4 !important;
 }
 
 /* Message styles */
+
 #drupal-off-canvas .messages {
-  background: no-repeat 10px 17px;
+  background: no-repeat 0.625rem 1.0625rem;
 }
+
 [dir="rtl"] #drupal-off-canvas .messages {
   background-position: right 10px top 17px;
 }
+
 #drupal-off-canvas .messages abbr {
   color: #444;
 }
+
 #drupal-off-canvas .messages--status {
   color: #325e1c;
   background-color: #f3faef;
-  background-image: url(../icons/73b355/check.svg);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2373b355'%3e%3cpath d='M6.464 13.676c-.194.194-.513.194-.707 0l-4.96-4.955c-.194-.193-.194-.513 0-.707l1.405-1.407c.194-.195.512-.195.707 0l2.849 2.848c.194.193.513.193.707 0l6.629-6.626c.195-.194.514-.194.707 0l1.404 1.404c.193.194.193.513 0 .707l-8.741 8.736z'/%3e%3c/svg%3e");
 }
+
 #drupal-off-canvas .messages--warning {
   color: #734c00;
   background-color: #fdf8ed;
-  background-image: url(../icons/e29700/warning.svg);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e29700'%3e%3cpath d='M14.66 12.316l-5.316-10.633c-.738-1.476-1.946-1.476-2.685 0l-5.317 10.633c-.738 1.477.008 2.684 1.658 2.684h10.002c1.65 0 2.396-1.207 1.658-2.684zm-7.66-8.316h2.002v5h-2.002v-5zm2.252 8.615c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.239c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.239z'/%3e%3c/svg%3e");
 }
 
 #drupal-off-canvas .messages--error {
   color: #a51b00;
   background-color: #fcf4f2;
-  background-image: url(../icons/e32700/error.svg);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e32700'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e");
 }
 
 #drupal-off-canvas .messages--error div[role="alert"] {
diff --git a/core/misc/dialog/off-canvas.base.css b/core/misc/dialog/off-canvas.base.pcss.css
similarity index 81%
copy from core/misc/dialog/off-canvas.base.css
copy to core/misc/dialog/off-canvas.base.pcss.css
index a0948c0ade..d1f4be93e1 100644
--- a/core/misc/dialog/off-canvas.base.css
+++ b/core/misc/dialog/off-canvas.base.pcss.css
@@ -4,16 +4,101 @@
  */
 
 /* Set some global attributes. */
-#drupal-off-canvas *,
-#drupal-off-canvas *:not(div) {
+#drupal-off-canvas {
   color: #ddd;
   background: #444;
-  font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
+}
+#drupal-off-canvas {
+  & span,
+  & applet,
+  & object,
+  & iframe,
+  & h1,
+  & h2,
+  & h3,
+  & h4,
+  & h5,
+  & h6,
+  & p,
+  & blockquote,
+  & pre,
+  & a,
+  & abbr,
+  & acronym,
+  & address,
+  & big,
+  & cite,
+  & code,
+  & del,
+  & dfn,
+  & em,
+  & img,
+  & ins,
+  & kbd,
+  & q,
+  & s,
+  & samp,
+  & small,
+  & strike,
+  & strong,
+  & sub,
+  & sup,
+  & tt,
+  & var,
+  & b,
+  & u,
+  & i,
+  & center,
+  & dl,
+  & dt,
+  & dd,
+  & ol,
+  & ul,
+  & li,
+  & fieldset,
+  & form,
+  & label,
+  & legend,
+  & table,
+  & caption,
+  & tbody,
+  & tfoot,
+  & thead,
+  & tr,
+  & th,
+  & td,
+  & article,
+  & aside,
+  & canvas,
+  & details,
+  & embed,
+  & figure,
+  & figcaption,
+  & footer,
+  & header,
+  & hgroup,
+  & menu,
+  & nav,
+  & output,
+  & ruby,
+  & section,
+  & summary,
+  & time,
+  & mark,
+  & audio,
+  & video,
+  & input,
+  & textarea {
+    color: inherit;
+    background: inherit;
+    font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
+  }
 }
 
 /* Generic elements. */
 #drupal-off-canvas a,
 #drupal-off-canvas .link {
+  cursor: pointer;
   transition: color 0.5s ease;
   text-decoration: none;
   color: #85bef4;
@@ -153,6 +238,12 @@
   margin: 20px 0;
   white-space: pre-wrap;
 }
+#drupal-off-canvas details {
+  display: block;
+}
+#drupal-off-canvas summary {
+  display: list-item;
+}
 
 /* Classes for hidden and visually hidden elements. See hidden.module.css. */
 #drupal-off-canvas .hidden {
diff --git a/core/misc/dialog/off-canvas.reset.css b/core/misc/dialog/off-canvas.reset.css
index 0863d06c54..39bdefd407 100644
--- a/core/misc/dialog/off-canvas.reset.css
+++ b/core/misc/dialog/off-canvas.reset.css
@@ -1,3 +1,10 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
 /**
  * @file
  * Reset most HTML elements styles for the off-canvas dialog.
@@ -9,18 +16,441 @@
  * Do not include div in then initial overrides because including div will
  * cause the need for many more overrides in this file.
  */
-#drupal-off-canvas *:not(div),
-#drupal-off-canvas *:not(svg *),
-#drupal-off-canvas *:after,
-#drupal-off-canvas *:before {
-  all: initial;
-  box-sizing: border-box;
-  text-shadow: none;
-  -webkit-font-smoothing: antialiased;
-  -webkit-tap-highlight-color: initial;
-}
+
+#drupal-off-canvas span,
+  #drupal-off-canvas applet,
+  #drupal-off-canvas object,
+  #drupal-off-canvas iframe,
+  #drupal-off-canvas h1,
+  #drupal-off-canvas h2,
+  #drupal-off-canvas h3,
+  #drupal-off-canvas h4,
+  #drupal-off-canvas h5,
+  #drupal-off-canvas h6,
+  #drupal-off-canvas p,
+  #drupal-off-canvas blockquote,
+  #drupal-off-canvas pre,
+  #drupal-off-canvas a,
+  #drupal-off-canvas abbr,
+  #drupal-off-canvas acronym,
+  #drupal-off-canvas address,
+  #drupal-off-canvas big,
+  #drupal-off-canvas cite,
+  #drupal-off-canvas code,
+  #drupal-off-canvas del,
+  #drupal-off-canvas dfn,
+  #drupal-off-canvas em,
+  #drupal-off-canvas img,
+  #drupal-off-canvas ins,
+  #drupal-off-canvas kbd,
+  #drupal-off-canvas q,
+  #drupal-off-canvas s,
+  #drupal-off-canvas samp,
+  #drupal-off-canvas small,
+  #drupal-off-canvas strike,
+  #drupal-off-canvas strong,
+  #drupal-off-canvas sub,
+  #drupal-off-canvas sup,
+  #drupal-off-canvas tt,
+  #drupal-off-canvas var,
+  #drupal-off-canvas b,
+  #drupal-off-canvas u,
+  #drupal-off-canvas i,
+  #drupal-off-canvas center,
+  #drupal-off-canvas dl,
+  #drupal-off-canvas dt,
+  #drupal-off-canvas dd,
+  #drupal-off-canvas ol,
+  #drupal-off-canvas ul,
+  #drupal-off-canvas li,
+  #drupal-off-canvas fieldset,
+  #drupal-off-canvas form,
+  #drupal-off-canvas label,
+  #drupal-off-canvas legend,
+  #drupal-off-canvas table,
+  #drupal-off-canvas caption,
+  #drupal-off-canvas tbody,
+  #drupal-off-canvas tfoot,
+  #drupal-off-canvas thead,
+  #drupal-off-canvas tr,
+  #drupal-off-canvas th,
+  #drupal-off-canvas td,
+  #drupal-off-canvas article,
+  #drupal-off-canvas aside,
+  #drupal-off-canvas canvas,
+  #drupal-off-canvas details,
+  #drupal-off-canvas embed,
+  #drupal-off-canvas figure,
+  #drupal-off-canvas figcaption,
+  #drupal-off-canvas footer,
+  #drupal-off-canvas header,
+  #drupal-off-canvas hgroup,
+  #drupal-off-canvas menu,
+  #drupal-off-canvas nav,
+  #drupal-off-canvas output,
+  #drupal-off-canvas ruby,
+  #drupal-off-canvas section,
+  #drupal-off-canvas summary,
+  #drupal-off-canvas time,
+  #drupal-off-canvas mark,
+  #drupal-off-canvas audio,
+  #drupal-off-canvas video,
+  #drupal-off-canvas input,
+  #drupal-off-canvas textarea {
+    animation: none 0s ease 0s 1 normal none running;
+    -webkit-backface-visibility: visible;
+    backface-visibility: visible;
+    background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
+    border: medium none currentColor;
+    border-collapse: separate;
+    -o-border-image: none;
+    border-image: none;
+    border-radius: 0;
+    border-spacing: 0;
+    bottom: auto;
+    box-shadow: none;
+    box-sizing: content-box;
+    caption-side: top;
+    clear: none;
+    clip: auto;
+    color: #000;
+    columns: auto;
+    column-count: auto;
+    column-fill: balance;
+    grid-column-gap: normal;
+    column-rule: medium none currentColor;
+    column-span: 1;
+    column-width: auto;
+    content: normal;
+    counter-increment: none;
+    counter-reset: none;
+    cursor: auto;
+    direction: ltr;
+    display: inline;
+    empty-cells: show;
+    float: none;
+    font-family: serif;
+    font-size: medium;
+    font-style: normal;
+    font-feature-settings: normal;
+    font-variant: normal;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: normal;
+    height: auto;
+    -webkit-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+    left: auto;
+    letter-spacing: normal;
+    list-style: disc outside none;
+    margin: 0;
+    max-height: none;
+    max-width: none;
+    min-height: 0;
+    min-width: 0;
+    opacity: 1;
+    orphans: 2;
+    outline: medium none invert;
+    overflow: visible;
+    overflow-x: visible;
+    overflow-y: visible;
+    padding: 0;
+    page-break-after: auto;
+    page-break-before: auto;
+    page-break-inside: auto;
+    perspective: none;
+    perspective-origin: 50% 50%;
+    position: static;
+    right: auto;
+    -moz-tab-size: 8;
+    -o-tab-size: 8;
+    tab-size: 8;
+    table-layout: auto;
+    text-align: left;
+    text-align-last: auto;
+    text-decoration: none;
+    text-indent: 0;
+    text-shadow: none;
+    text-transform: none;
+    top: auto;
+    transform: none;
+    transform-origin: 50% 50% 0;
+    transform-style: flat;
+    transition: none 0s ease 0s;
+    unicode-bidi: normal;
+    vertical-align: baseline;
+    visibility: visible;
+    white-space: normal;
+    widows: 2;
+    width: auto;
+    word-spacing: normal;
+    z-index: auto;
+    all: initial;
+    box-sizing: border-box;
+    text-shadow: none;
+    -webkit-font-smoothing: antialiased;
+    -webkit-tap-highlight-color: initial
+  }
+
+#drupal-off-canvas span:after,
+    #drupal-off-canvas span:before,
+    #drupal-off-canvas applet:after,
+    #drupal-off-canvas applet:before,
+    #drupal-off-canvas object:after,
+    #drupal-off-canvas object:before,
+    #drupal-off-canvas iframe:after,
+    #drupal-off-canvas iframe:before,
+    #drupal-off-canvas h1:after,
+    #drupal-off-canvas h1:before,
+    #drupal-off-canvas h2:after,
+    #drupal-off-canvas h2:before,
+    #drupal-off-canvas h3:after,
+    #drupal-off-canvas h3:before,
+    #drupal-off-canvas h4:after,
+    #drupal-off-canvas h4:before,
+    #drupal-off-canvas h5:after,
+    #drupal-off-canvas h5:before,
+    #drupal-off-canvas h6:after,
+    #drupal-off-canvas h6:before,
+    #drupal-off-canvas p:after,
+    #drupal-off-canvas p:before,
+    #drupal-off-canvas blockquote:after,
+    #drupal-off-canvas blockquote:before,
+    #drupal-off-canvas pre:after,
+    #drupal-off-canvas pre:before,
+    #drupal-off-canvas a:after,
+    #drupal-off-canvas a:before,
+    #drupal-off-canvas abbr:after,
+    #drupal-off-canvas abbr:before,
+    #drupal-off-canvas acronym:after,
+    #drupal-off-canvas acronym:before,
+    #drupal-off-canvas address:after,
+    #drupal-off-canvas address:before,
+    #drupal-off-canvas big:after,
+    #drupal-off-canvas big:before,
+    #drupal-off-canvas cite:after,
+    #drupal-off-canvas cite:before,
+    #drupal-off-canvas code:after,
+    #drupal-off-canvas code:before,
+    #drupal-off-canvas del:after,
+    #drupal-off-canvas del:before,
+    #drupal-off-canvas dfn:after,
+    #drupal-off-canvas dfn:before,
+    #drupal-off-canvas em:after,
+    #drupal-off-canvas em:before,
+    #drupal-off-canvas img:after,
+    #drupal-off-canvas img:before,
+    #drupal-off-canvas ins:after,
+    #drupal-off-canvas ins:before,
+    #drupal-off-canvas kbd:after,
+    #drupal-off-canvas kbd:before,
+    #drupal-off-canvas q:after,
+    #drupal-off-canvas q:before,
+    #drupal-off-canvas s:after,
+    #drupal-off-canvas s:before,
+    #drupal-off-canvas samp:after,
+    #drupal-off-canvas samp:before,
+    #drupal-off-canvas small:after,
+    #drupal-off-canvas small:before,
+    #drupal-off-canvas strike:after,
+    #drupal-off-canvas strike:before,
+    #drupal-off-canvas strong:after,
+    #drupal-off-canvas strong:before,
+    #drupal-off-canvas sub:after,
+    #drupal-off-canvas sub:before,
+    #drupal-off-canvas sup:after,
+    #drupal-off-canvas sup:before,
+    #drupal-off-canvas tt:after,
+    #drupal-off-canvas tt:before,
+    #drupal-off-canvas var:after,
+    #drupal-off-canvas var:before,
+    #drupal-off-canvas b:after,
+    #drupal-off-canvas b:before,
+    #drupal-off-canvas u:after,
+    #drupal-off-canvas u:before,
+    #drupal-off-canvas i:after,
+    #drupal-off-canvas i:before,
+    #drupal-off-canvas center:after,
+    #drupal-off-canvas center:before,
+    #drupal-off-canvas dl:after,
+    #drupal-off-canvas dl:before,
+    #drupal-off-canvas dt:after,
+    #drupal-off-canvas dt:before,
+    #drupal-off-canvas dd:after,
+    #drupal-off-canvas dd:before,
+    #drupal-off-canvas ol:after,
+    #drupal-off-canvas ol:before,
+    #drupal-off-canvas ul:after,
+    #drupal-off-canvas ul:before,
+    #drupal-off-canvas li:after,
+    #drupal-off-canvas li:before,
+    #drupal-off-canvas fieldset:after,
+    #drupal-off-canvas fieldset:before,
+    #drupal-off-canvas form:after,
+    #drupal-off-canvas form:before,
+    #drupal-off-canvas label:after,
+    #drupal-off-canvas label:before,
+    #drupal-off-canvas legend:after,
+    #drupal-off-canvas legend:before,
+    #drupal-off-canvas table:after,
+    #drupal-off-canvas table:before,
+    #drupal-off-canvas caption:after,
+    #drupal-off-canvas caption:before,
+    #drupal-off-canvas tbody:after,
+    #drupal-off-canvas tbody:before,
+    #drupal-off-canvas tfoot:after,
+    #drupal-off-canvas tfoot:before,
+    #drupal-off-canvas thead:after,
+    #drupal-off-canvas thead:before,
+    #drupal-off-canvas tr:after,
+    #drupal-off-canvas tr:before,
+    #drupal-off-canvas th:after,
+    #drupal-off-canvas th:before,
+    #drupal-off-canvas td:after,
+    #drupal-off-canvas td:before,
+    #drupal-off-canvas article:after,
+    #drupal-off-canvas article:before,
+    #drupal-off-canvas aside:after,
+    #drupal-off-canvas aside:before,
+    #drupal-off-canvas canvas:after,
+    #drupal-off-canvas canvas:before,
+    #drupal-off-canvas details:after,
+    #drupal-off-canvas details:before,
+    #drupal-off-canvas embed:after,
+    #drupal-off-canvas embed:before,
+    #drupal-off-canvas figure:after,
+    #drupal-off-canvas figure:before,
+    #drupal-off-canvas figcaption:after,
+    #drupal-off-canvas figcaption:before,
+    #drupal-off-canvas footer:after,
+    #drupal-off-canvas footer:before,
+    #drupal-off-canvas header:after,
+    #drupal-off-canvas header:before,
+    #drupal-off-canvas hgroup:after,
+    #drupal-off-canvas hgroup:before,
+    #drupal-off-canvas menu:after,
+    #drupal-off-canvas menu:before,
+    #drupal-off-canvas nav:after,
+    #drupal-off-canvas nav:before,
+    #drupal-off-canvas output:after,
+    #drupal-off-canvas output:before,
+    #drupal-off-canvas ruby:after,
+    #drupal-off-canvas ruby:before,
+    #drupal-off-canvas section:after,
+    #drupal-off-canvas section:before,
+    #drupal-off-canvas summary:after,
+    #drupal-off-canvas summary:before,
+    #drupal-off-canvas time:after,
+    #drupal-off-canvas time:before,
+    #drupal-off-canvas mark:after,
+    #drupal-off-canvas mark:before,
+    #drupal-off-canvas audio:after,
+    #drupal-off-canvas audio:before,
+    #drupal-off-canvas video:after,
+    #drupal-off-canvas video:before,
+    #drupal-off-canvas input:after,
+    #drupal-off-canvas input:before,
+    #drupal-off-canvas textarea:after,
+    #drupal-off-canvas textarea:before {
+      animation: none 0s ease 0s 1 normal none running;
+      -webkit-backface-visibility: visible;
+      backface-visibility: visible;
+      background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
+      border: medium none currentColor;
+      border-collapse: separate;
+      -o-border-image: none;
+      border-image: none;
+      border-radius: 0;
+      border-spacing: 0;
+      bottom: auto;
+      box-shadow: none;
+      box-sizing: content-box;
+      caption-side: top;
+      clear: none;
+      clip: auto;
+      color: #000;
+      columns: auto;
+      column-count: auto;
+      column-fill: balance;
+      grid-column-gap: normal;
+      column-rule: medium none currentColor;
+      column-span: 1;
+      column-width: auto;
+      content: normal;
+      counter-increment: none;
+      counter-reset: none;
+      cursor: auto;
+      direction: ltr;
+      display: inline;
+      empty-cells: show;
+      float: none;
+      font-family: serif;
+      font-size: medium;
+      font-style: normal;
+      font-feature-settings: normal;
+      font-variant: normal;
+      font-weight: normal;
+      font-stretch: normal;
+      line-height: normal;
+      height: auto;
+      -webkit-hyphens: none;
+      -ms-hyphens: none;
+      hyphens: none;
+      left: auto;
+      letter-spacing: normal;
+      list-style: disc outside none;
+      margin: 0;
+      max-height: none;
+      max-width: none;
+      min-height: 0;
+      min-width: 0;
+      opacity: 1;
+      orphans: 2;
+      outline: medium none invert;
+      overflow: visible;
+      overflow-x: visible;
+      overflow-y: visible;
+      padding: 0;
+      page-break-after: auto;
+      page-break-before: auto;
+      page-break-inside: auto;
+      perspective: none;
+      perspective-origin: 50% 50%;
+      position: static;
+      right: auto;
+      -moz-tab-size: 8;
+      -o-tab-size: 8;
+      tab-size: 8;
+      table-layout: auto;
+      text-align: left;
+      text-align-last: auto;
+      text-decoration: none;
+      text-indent: 0;
+      text-shadow: none;
+      text-transform: none;
+      top: auto;
+      transform: none;
+      transform-origin: 50% 50% 0;
+      transform-style: flat;
+      transition: none 0s ease 0s;
+      unicode-bidi: normal;
+      vertical-align: baseline;
+      visibility: visible;
+      white-space: normal;
+      widows: 2;
+      width: auto;
+      word-spacing: normal;
+      z-index: auto;
+      all: initial;
+      box-sizing: border-box;
+      text-shadow: none;
+      -webkit-font-smoothing: antialiased;
+      -webkit-tap-highlight-color: initial;
+    }
 
 /* Reset size and position on elements. */
+
 #drupal-off-canvas a,
 #drupal-off-canvas abbr,
 #drupal-off-canvas acronym,
@@ -115,6 +545,7 @@
  * Override the default (display: inline) for browsers that do not recognize HTML5 tags.
  * IE8 (and lower) requires a shiv: http://ejohn.org/blog/html5-shiv
  */
+
 #drupal-off-canvas article,
 #drupal-off-canvas aside,
 #drupal-off-canvas figcaption,
@@ -136,6 +567,7 @@
  * IE + Opera = font-weight: bold.
  * Gecko + WebKit = font-weight: bolder.
  */
+
 #drupal-off-canvas b,
 #drupal-off-canvas strong {
   font-weight: bold;
@@ -158,10 +590,12 @@
 }
 
 /* reset table styling. */
+
 #drupal-off-canvas table {
   border-spacing: 0;
   border-collapse: collapse;
 }
+
 #drupal-off-canvas table thead,
 #drupal-off-canvas table tbody,
 #drupal-off-canvas table tbody tr:nth-child(even),
@@ -170,32 +604,39 @@
   border: 0;
   background: transparent none;
 }
+
 #drupal-off-canvas th,
 #drupal-off-canvas td,
 #drupal-off-canvas caption {
   font-weight: normal;
 }
+
 #drupal-off-canvas q {
   quotes: none;
 }
+
 #drupal-off-canvas q:before,
 #drupal-off-canvas q:after {
   content: none;
 }
+
 #drupal-off-canvas sub,
 #drupal-off-canvas sup,
 #drupal-off-canvas small {
   font-size: 75%;
 }
+
 #drupal-off-canvas sub,
 #drupal-off-canvas sup {
   position: relative;
   vertical-align: baseline;
   line-height: 0;
 }
+
 #drupal-off-canvas sub {
   bottom: -0.25em;
 }
+
 #drupal-off-canvas sup {
   top: -0.5em;
 }
@@ -204,23 +645,28 @@
  * For IE9. Without, occasionally draws shapes
  * outside the boundaries of <svg> rectangle.
  */
+
 #drupal-off-canvas svg {
   overflow: hidden;
 }
 
 /* Specific resets for inputs. */
+
 #drupal-off-canvas input[type="search"]::-webkit-search-decoration {
   display: none;
 }
+
 #drupal-off-canvas input {
   margin: 0;
   padding: 0;
 }
+
 #drupal-off-canvas input[type="checkbox"],
 #drupal-off-canvas input[type="radio"] {
   position: static;
   margin: 0;
 }
+
 #drupal-off-canvas input:invalid,
 #drupal-off-canvas button:invalid,
 #drupal-off-canvas select:invalid,
@@ -238,9 +684,11 @@
   z-index: 1;
   box-shadow: none;
 }
+
 #drupal-off-canvas input[role="button"] {
   cursor: pointer;
 }
+
 #drupal-off-canvas button,
 #drupal-off-canvas input[type="reset"],
 #drupal-off-canvas input[type="submit"],
@@ -257,6 +705,7 @@
   -webkit-appearance: none;
   -moz-appearance: none;
 }
+
 #drupal-off-canvas button:hover,
 #drupal-off-canvas input[type="reset"]:hover,
 #drupal-off-canvas input[type="submit"]:hover,
@@ -264,6 +713,7 @@
   text-decoration: none;
   background-image: none;
 }
+
 #drupal-off-canvas button:active,
 #drupal-off-canvas input[type="reset"]:active,
 #drupal-off-canvas input[type="submit"]:active,
@@ -272,6 +722,7 @@
   background-image: none;
   box-shadow: none;
 }
+
 #drupal-off-canvas button::-moz-focus-inner,
 #drupal-off-canvas input[type="reset"]::-moz-focus-inner,
 #drupal-off-canvas input[type="submit"]::-moz-focus-inner,
@@ -279,6 +730,7 @@
   padding: 0;
   border: 0;
 }
+
 #drupal-off-canvas textarea,
 #drupal-off-canvas select,
 #drupal-off-canvas input[type="date"],
@@ -298,6 +750,7 @@
   vertical-align: middle;
   border-radius: 0;
 }
+
 #drupal-off-canvas textarea[disabled],
 #drupal-off-canvas select[disabled],
 #drupal-off-canvas input[type="date"][disabled],
@@ -315,9 +768,11 @@
 #drupal-off-canvas input[type="week"][disabled] {
   background-color: gray;
 }
+
 #drupal-off-canvas input[type="hidden"] {
   visibility: hidden;
 }
+
 #drupal-off-canvas button[disabled],
 #drupal-off-canvas input[disabled],
 #drupal-off-canvas select[disabled],
@@ -326,39 +781,45 @@
 #drupal-off-canvas textarea[disabled] {
   cursor: default;
   -webkit-user-select: none;
-  -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   box-shadow: none;
 }
+
 #drupal-off-canvas input:placeholder,
 #drupal-off-canvas textarea:placeholder {
   color: gray;
 }
+
 #drupal-off-canvas textarea,
 #drupal-off-canvas select[size],
 #drupal-off-canvas select[multiple] {
   height: auto;
 }
+
 #drupal-off-canvas select[size="0"],
 #drupal-off-canvas select[size="1"] {
   height: auto;
 }
+
 #drupal-off-canvas textarea {
   overflow: auto;
   width: 100%;
-  min-height: 40px;
+  min-height: 2.5rem;
   resize: vertical;
 }
+
 #drupal-off-canvas optgroup {
   color: black;
   font-weight: normal;
   font-style: normal;
 }
+
 #drupal-off-canvas optgroup::-moz-focus-inner {
   padding: 0;
   border: 0;
 }
+
 #drupal-off-canvas * button {
   overflow: visible;
   width: auto;
@@ -369,6 +830,7 @@
   border: 1px solid gray;
   background: none;
 }
+
 #drupal-off-canvas * textarea,
 #drupal-off-canvas * select,
 #drupal-off-canvas *:not(div) textarea,
diff --git a/core/themes/stable/css/core/dialog/off-canvas.reset.css b/core/misc/dialog/off-canvas.reset.pcss.css
similarity index 88%
copy from core/themes/stable/css/core/dialog/off-canvas.reset.css
copy to core/misc/dialog/off-canvas.reset.pcss.css
index 0863d06c54..db849e2e2c 100644
--- a/core/themes/stable/css/core/dialog/off-canvas.reset.css
+++ b/core/misc/dialog/off-canvas.reset.pcss.css
@@ -9,15 +9,102 @@
  * Do not include div in then initial overrides because including div will
  * cause the need for many more overrides in this file.
  */
-#drupal-off-canvas *:not(div),
-#drupal-off-canvas *:not(svg *),
-#drupal-off-canvas *:after,
-#drupal-off-canvas *:before {
-  all: initial;
-  box-sizing: border-box;
-  text-shadow: none;
-  -webkit-font-smoothing: antialiased;
-  -webkit-tap-highlight-color: initial;
+#drupal-off-canvas {
+  & span,
+  & applet,
+  & object,
+  & iframe,
+  & h1,
+  & h2,
+  & h3,
+  & h4,
+  & h5,
+  & h6,
+  & p,
+  & blockquote,
+  & pre,
+  & a,
+  & abbr,
+  & acronym,
+  & address,
+  & big,
+  & cite,
+  & code,
+  & del,
+  & dfn,
+  & em,
+  & img,
+  & ins,
+  & kbd,
+  & q,
+  & s,
+  & samp,
+  & small,
+  & strike,
+  & strong,
+  & sub,
+  & sup,
+  & tt,
+  & var,
+  & b,
+  & u,
+  & i,
+  & center,
+  & dl,
+  & dt,
+  & dd,
+  & ol,
+  & ul,
+  & li,
+  & fieldset,
+  & form,
+  & label,
+  & legend,
+  & table,
+  & caption,
+  & tbody,
+  & tfoot,
+  & thead,
+  & tr,
+  & th,
+  & td,
+  & article,
+  & aside,
+  & canvas,
+  & details,
+  & embed,
+  & figure,
+  & figcaption,
+  & footer,
+  & header,
+  & hgroup,
+  & menu,
+  & nav,
+  & output,
+  & ruby,
+  & section,
+  & summary,
+  & time,
+  & mark,
+  & audio,
+  & video,
+  & input,
+  & textarea {
+    all: initial;
+    box-sizing: border-box;
+    text-shadow: none;
+    -webkit-font-smoothing: antialiased;
+    -webkit-tap-highlight-color: initial;
+
+    &:after,
+    &:before {
+      all: initial;
+      box-sizing: border-box;
+      text-shadow: none;
+      -webkit-font-smoothing: antialiased;
+      -webkit-tap-highlight-color: initial;
+    }
+  }
 }
 
 /* Reset size and position on elements. */
diff --git a/core/themes/stable/css/core/dialog/off-canvas.base.css b/core/themes/stable/css/core/dialog/off-canvas.base.css
index b6de67a2f7..8f938ae33c 100644
--- a/core/themes/stable/css/core/dialog/off-canvas.base.css
+++ b/core/themes/stable/css/core/dialog/off-canvas.base.css
@@ -1,19 +1,112 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
 /**
  * @file
  * Set base styles for the off-canvas dialog.
  */
 
 /* Set some global attributes. */
-#drupal-off-canvas *,
-#drupal-off-canvas *:not(div) {
+
+#drupal-off-canvas {
   color: #ddd;
   background: #444;
-  font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
 }
 
+#drupal-off-canvas span,
+  #drupal-off-canvas applet,
+  #drupal-off-canvas object,
+  #drupal-off-canvas iframe,
+  #drupal-off-canvas h1,
+  #drupal-off-canvas h2,
+  #drupal-off-canvas h3,
+  #drupal-off-canvas h4,
+  #drupal-off-canvas h5,
+  #drupal-off-canvas h6,
+  #drupal-off-canvas p,
+  #drupal-off-canvas blockquote,
+  #drupal-off-canvas pre,
+  #drupal-off-canvas a,
+  #drupal-off-canvas abbr,
+  #drupal-off-canvas acronym,
+  #drupal-off-canvas address,
+  #drupal-off-canvas big,
+  #drupal-off-canvas cite,
+  #drupal-off-canvas code,
+  #drupal-off-canvas del,
+  #drupal-off-canvas dfn,
+  #drupal-off-canvas em,
+  #drupal-off-canvas img,
+  #drupal-off-canvas ins,
+  #drupal-off-canvas kbd,
+  #drupal-off-canvas q,
+  #drupal-off-canvas s,
+  #drupal-off-canvas samp,
+  #drupal-off-canvas small,
+  #drupal-off-canvas strike,
+  #drupal-off-canvas strong,
+  #drupal-off-canvas sub,
+  #drupal-off-canvas sup,
+  #drupal-off-canvas tt,
+  #drupal-off-canvas var,
+  #drupal-off-canvas b,
+  #drupal-off-canvas u,
+  #drupal-off-canvas i,
+  #drupal-off-canvas center,
+  #drupal-off-canvas dl,
+  #drupal-off-canvas dt,
+  #drupal-off-canvas dd,
+  #drupal-off-canvas ol,
+  #drupal-off-canvas ul,
+  #drupal-off-canvas li,
+  #drupal-off-canvas fieldset,
+  #drupal-off-canvas form,
+  #drupal-off-canvas label,
+  #drupal-off-canvas legend,
+  #drupal-off-canvas table,
+  #drupal-off-canvas caption,
+  #drupal-off-canvas tbody,
+  #drupal-off-canvas tfoot,
+  #drupal-off-canvas thead,
+  #drupal-off-canvas tr,
+  #drupal-off-canvas th,
+  #drupal-off-canvas td,
+  #drupal-off-canvas article,
+  #drupal-off-canvas aside,
+  #drupal-off-canvas canvas,
+  #drupal-off-canvas details,
+  #drupal-off-canvas embed,
+  #drupal-off-canvas figure,
+  #drupal-off-canvas figcaption,
+  #drupal-off-canvas footer,
+  #drupal-off-canvas header,
+  #drupal-off-canvas hgroup,
+  #drupal-off-canvas menu,
+  #drupal-off-canvas nav,
+  #drupal-off-canvas output,
+  #drupal-off-canvas ruby,
+  #drupal-off-canvas section,
+  #drupal-off-canvas summary,
+  #drupal-off-canvas time,
+  #drupal-off-canvas mark,
+  #drupal-off-canvas audio,
+  #drupal-off-canvas video,
+  #drupal-off-canvas input,
+  #drupal-off-canvas textarea {
+    color: inherit;
+    background: inherit;
+    font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
+  }
+
 /* Generic elements. */
+
 #drupal-off-canvas a,
 #drupal-off-canvas .link {
+  cursor: pointer;
   transition: color 0.5s ease;
   text-decoration: none;
   color: #85bef4;
@@ -29,14 +122,17 @@
 #drupal-off-canvas .link:hover {
   text-decoration: underline;
 }
+
 #drupal-off-canvas hr {
   height: 1px;
   background: #ccc;
 }
+
 #drupal-off-canvas summary,
 #drupal-off-canvas .fieldgroup:not(.form-composite) > legend {
   font-weight: bold;
 }
+
 #drupal-off-canvas h1,
 #drupal-off-canvas .heading-a {
   display: block;
@@ -44,87 +140,105 @@
   font-weight: bold;
   line-height: 1.875em;
 }
+
 #drupal-off-canvas h2,
 #drupal-off-canvas .heading-b {
   display: block;
-  margin: 10px 0;
+  margin: 0.625rem 0;
   font-size: 1.385em;
   font-weight: bold;
 }
+
 #drupal-off-canvas h3,
 #drupal-off-canvas .heading-c {
   display: block;
-  margin: 10px 0;
+  margin: 0.625rem 0;
   font-size: 1.231em;
   font-weight: bold;
 }
+
 #drupal-off-canvas h4,
 #drupal-off-canvas .heading-d {
   display: block;
-  margin: 10px 0;
+  margin: 0.625rem 0;
   font-size: 1.154em;
   font-weight: bold;
 }
+
 #drupal-off-canvas h5,
 #drupal-off-canvas .heading-e {
   display: block;
-  margin: 10px 0;
+  margin: 0.625rem 0;
   font-size: 1.077em;
   font-weight: bold;
 }
+
 #drupal-off-canvas h6,
 #drupal-off-canvas .heading-f {
   display: block;
-  margin: 10px 0;
+  margin: 0.625rem 0;
   font-size: 1.077em;
   font-weight: bold;
 }
+
 #drupal-off-canvas p {
   margin: 1em 0;
 }
+
 #drupal-off-canvas dl {
-  margin: 0 0 20px;
+  margin: 0 0 1.25rem;
 }
+
 #drupal-off-canvas dl dd,
 #drupal-off-canvas dl dl {
-  margin-bottom: 10px;
-  margin-left: 20px; /* LTR */
+  margin-bottom: 0.625rem;
+  margin-left: 1.25rem; /* LTR */
 }
+
 [dir="rtl"] #drupal-off-canvas dl dd,
 [dir="rtl"] #drupal-off-canvas dl dl {
-  margin-right: 20px;
+  margin-right: 1.25rem;
 }
+
 #drupal-off-canvas blockquote {
-  margin: 1em 40px;
+  margin: 1em 2.5rem;
 }
+
 #drupal-off-canvas address {
   font-style: italic;
 }
+
 #drupal-off-canvas u,
 #drupal-off-canvas ins {
   text-decoration: underline;
 }
+
 #drupal-off-canvas s,
 #drupal-off-canvas strike,
 #drupal-off-canvas del {
   text-decoration: line-through;
 }
+
 #drupal-off-canvas big {
   font-size: larger;
 }
+
 #drupal-off-canvas small {
   font-size: smaller;
 }
+
 #drupal-off-canvas sub {
   vertical-align: sub;
   font-size: smaller;
   line-height: normal;
 }
+
 #drupal-off-canvas sup {
   vertical-align: super;
   font-size: smaller;
   line-height: normal;
 }
+
 #drupal-off-canvas abbr,
 #drupal-off-canvas acronym {
   border-bottom: dotted 1px;
@@ -135,29 +249,44 @@
   list-style-type: disc;
   list-style-image: none;
 }
+
 [dir="rtl"] #drupal-off-canvas .messages__list {
   margin-right: 0;
 }
+
 #drupal-off-canvas ol {
   list-style-type: decimal;
 }
+
 #drupal-off-canvas ul li,
 #drupal-off-canvas ol li {
   display: block;
 }
+
 #drupal-off-canvas blockquote,
 #drupal-off-canvas code {
-  margin: 20px 0;
+  margin: 1.25rem 0;
 }
+
 #drupal-off-canvas pre {
-  margin: 20px 0;
+  margin: 1.25rem 0;
   white-space: pre-wrap;
 }
 
+#drupal-off-canvas details {
+  display: block;
+}
+
+#drupal-off-canvas summary {
+  display: list-item;
+}
+
 /* Classes for hidden and visually hidden elements. See hidden.module.css. */
+
 #drupal-off-canvas .hidden {
   display: none;
 }
+
 #drupal-off-canvas .visually-hidden {
   position: absolute !important;
   overflow: hidden;
@@ -166,6 +295,7 @@
   height: 1px;
   word-wrap: normal;
 }
+
 #drupal-off-canvas .visually-hidden.focusable:active,
 #drupal-off-canvas .visually-hidden.focusable:focus {
   position: static !important;
@@ -174,58 +304,70 @@
   width: auto;
   height: auto;
 }
+
 #drupal-off-canvas .invisible {
   visibility: hidden;
 }
 
 /* Some system classes. See system.admin.css. */
+
 #drupal-off-canvas .panel {
-  padding: 5px 5px 15px;
+  padding: 0.3125rem 0.3125rem 0.9375rem;
 }
+
 #drupal-off-canvas .panel__description {
-  margin: 0 0 3px;
-  padding: 2px 0 3px 0;
+  margin: 0 0 0.1875rem;
+  padding: 2px 0 0.1875rem 0;
 }
+
 #drupal-off-canvas .compact-link {
-  margin: 0 0 10px 0;
+  margin: 0 0 0.625rem 0;
 }
+
 #drupal-off-canvas small .admin-link:before {
   content: " [";
 }
+
 #drupal-off-canvas small .admin-link:after {
   content: "]";
 }
 
 /* Override jQuery UI */
+
 #drupal-off-canvas .ui-widget-content a {
   color: #85bef4 !important;
 }
 
 /* Message styles */
+
 #drupal-off-canvas .messages {
-  background: no-repeat 10px 17px;
+  background: no-repeat 0.625rem 1.0625rem;
 }
+
 [dir="rtl"] #drupal-off-canvas .messages {
   background-position: right 10px top 17px;
 }
+
 #drupal-off-canvas .messages abbr {
   color: #444;
 }
+
 #drupal-off-canvas .messages--status {
   color: #325e1c;
   background-color: #f3faef;
-  background-image: url(../../../images/core/icons/73b355/check.svg);
+  background-image: url(../icons/73b355/check.svg);
 }
+
 #drupal-off-canvas .messages--warning {
   color: #734c00;
   background-color: #fdf8ed;
-  background-image: url(../../../images/core/icons/e29700/warning.svg);
+  background-image: url(../icons/e29700/warning.svg);
 }
 
 #drupal-off-canvas .messages--error {
   color: #a51b00;
   background-color: #fcf4f2;
-  background-image: url(../../../images/core/icons/e32700/error.svg);
+  background-image: url(../icons/e32700/error.svg);
 }
 
 #drupal-off-canvas .messages--error div[role="alert"] {
diff --git a/core/misc/dialog/off-canvas.base.css b/core/themes/stable/css/core/dialog/off-canvas.base.pcss.css
similarity index 81%
copy from core/misc/dialog/off-canvas.base.css
copy to core/themes/stable/css/core/dialog/off-canvas.base.pcss.css
index a0948c0ade..d1f4be93e1 100644
--- a/core/misc/dialog/off-canvas.base.css
+++ b/core/themes/stable/css/core/dialog/off-canvas.base.pcss.css
@@ -4,16 +4,101 @@
  */
 
 /* Set some global attributes. */
-#drupal-off-canvas *,
-#drupal-off-canvas *:not(div) {
+#drupal-off-canvas {
   color: #ddd;
   background: #444;
-  font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
+}
+#drupal-off-canvas {
+  & span,
+  & applet,
+  & object,
+  & iframe,
+  & h1,
+  & h2,
+  & h3,
+  & h4,
+  & h5,
+  & h6,
+  & p,
+  & blockquote,
+  & pre,
+  & a,
+  & abbr,
+  & acronym,
+  & address,
+  & big,
+  & cite,
+  & code,
+  & del,
+  & dfn,
+  & em,
+  & img,
+  & ins,
+  & kbd,
+  & q,
+  & s,
+  & samp,
+  & small,
+  & strike,
+  & strong,
+  & sub,
+  & sup,
+  & tt,
+  & var,
+  & b,
+  & u,
+  & i,
+  & center,
+  & dl,
+  & dt,
+  & dd,
+  & ol,
+  & ul,
+  & li,
+  & fieldset,
+  & form,
+  & label,
+  & legend,
+  & table,
+  & caption,
+  & tbody,
+  & tfoot,
+  & thead,
+  & tr,
+  & th,
+  & td,
+  & article,
+  & aside,
+  & canvas,
+  & details,
+  & embed,
+  & figure,
+  & figcaption,
+  & footer,
+  & header,
+  & hgroup,
+  & menu,
+  & nav,
+  & output,
+  & ruby,
+  & section,
+  & summary,
+  & time,
+  & mark,
+  & audio,
+  & video,
+  & input,
+  & textarea {
+    color: inherit;
+    background: inherit;
+    font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
+  }
 }
 
 /* Generic elements. */
 #drupal-off-canvas a,
 #drupal-off-canvas .link {
+  cursor: pointer;
   transition: color 0.5s ease;
   text-decoration: none;
   color: #85bef4;
@@ -153,6 +238,12 @@
   margin: 20px 0;
   white-space: pre-wrap;
 }
+#drupal-off-canvas details {
+  display: block;
+}
+#drupal-off-canvas summary {
+  display: list-item;
+}
 
 /* Classes for hidden and visually hidden elements. See hidden.module.css. */
 #drupal-off-canvas .hidden {
diff --git a/core/themes/stable/css/core/dialog/off-canvas.reset.css b/core/themes/stable/css/core/dialog/off-canvas.reset.css
index 0863d06c54..39bdefd407 100644
--- a/core/themes/stable/css/core/dialog/off-canvas.reset.css
+++ b/core/themes/stable/css/core/dialog/off-canvas.reset.css
@@ -1,3 +1,10 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
 /**
  * @file
  * Reset most HTML elements styles for the off-canvas dialog.
@@ -9,18 +16,441 @@
  * Do not include div in then initial overrides because including div will
  * cause the need for many more overrides in this file.
  */
-#drupal-off-canvas *:not(div),
-#drupal-off-canvas *:not(svg *),
-#drupal-off-canvas *:after,
-#drupal-off-canvas *:before {
-  all: initial;
-  box-sizing: border-box;
-  text-shadow: none;
-  -webkit-font-smoothing: antialiased;
-  -webkit-tap-highlight-color: initial;
-}
+
+#drupal-off-canvas span,
+  #drupal-off-canvas applet,
+  #drupal-off-canvas object,
+  #drupal-off-canvas iframe,
+  #drupal-off-canvas h1,
+  #drupal-off-canvas h2,
+  #drupal-off-canvas h3,
+  #drupal-off-canvas h4,
+  #drupal-off-canvas h5,
+  #drupal-off-canvas h6,
+  #drupal-off-canvas p,
+  #drupal-off-canvas blockquote,
+  #drupal-off-canvas pre,
+  #drupal-off-canvas a,
+  #drupal-off-canvas abbr,
+  #drupal-off-canvas acronym,
+  #drupal-off-canvas address,
+  #drupal-off-canvas big,
+  #drupal-off-canvas cite,
+  #drupal-off-canvas code,
+  #drupal-off-canvas del,
+  #drupal-off-canvas dfn,
+  #drupal-off-canvas em,
+  #drupal-off-canvas img,
+  #drupal-off-canvas ins,
+  #drupal-off-canvas kbd,
+  #drupal-off-canvas q,
+  #drupal-off-canvas s,
+  #drupal-off-canvas samp,
+  #drupal-off-canvas small,
+  #drupal-off-canvas strike,
+  #drupal-off-canvas strong,
+  #drupal-off-canvas sub,
+  #drupal-off-canvas sup,
+  #drupal-off-canvas tt,
+  #drupal-off-canvas var,
+  #drupal-off-canvas b,
+  #drupal-off-canvas u,
+  #drupal-off-canvas i,
+  #drupal-off-canvas center,
+  #drupal-off-canvas dl,
+  #drupal-off-canvas dt,
+  #drupal-off-canvas dd,
+  #drupal-off-canvas ol,
+  #drupal-off-canvas ul,
+  #drupal-off-canvas li,
+  #drupal-off-canvas fieldset,
+  #drupal-off-canvas form,
+  #drupal-off-canvas label,
+  #drupal-off-canvas legend,
+  #drupal-off-canvas table,
+  #drupal-off-canvas caption,
+  #drupal-off-canvas tbody,
+  #drupal-off-canvas tfoot,
+  #drupal-off-canvas thead,
+  #drupal-off-canvas tr,
+  #drupal-off-canvas th,
+  #drupal-off-canvas td,
+  #drupal-off-canvas article,
+  #drupal-off-canvas aside,
+  #drupal-off-canvas canvas,
+  #drupal-off-canvas details,
+  #drupal-off-canvas embed,
+  #drupal-off-canvas figure,
+  #drupal-off-canvas figcaption,
+  #drupal-off-canvas footer,
+  #drupal-off-canvas header,
+  #drupal-off-canvas hgroup,
+  #drupal-off-canvas menu,
+  #drupal-off-canvas nav,
+  #drupal-off-canvas output,
+  #drupal-off-canvas ruby,
+  #drupal-off-canvas section,
+  #drupal-off-canvas summary,
+  #drupal-off-canvas time,
+  #drupal-off-canvas mark,
+  #drupal-off-canvas audio,
+  #drupal-off-canvas video,
+  #drupal-off-canvas input,
+  #drupal-off-canvas textarea {
+    animation: none 0s ease 0s 1 normal none running;
+    -webkit-backface-visibility: visible;
+    backface-visibility: visible;
+    background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
+    border: medium none currentColor;
+    border-collapse: separate;
+    -o-border-image: none;
+    border-image: none;
+    border-radius: 0;
+    border-spacing: 0;
+    bottom: auto;
+    box-shadow: none;
+    box-sizing: content-box;
+    caption-side: top;
+    clear: none;
+    clip: auto;
+    color: #000;
+    columns: auto;
+    column-count: auto;
+    column-fill: balance;
+    grid-column-gap: normal;
+    column-rule: medium none currentColor;
+    column-span: 1;
+    column-width: auto;
+    content: normal;
+    counter-increment: none;
+    counter-reset: none;
+    cursor: auto;
+    direction: ltr;
+    display: inline;
+    empty-cells: show;
+    float: none;
+    font-family: serif;
+    font-size: medium;
+    font-style: normal;
+    font-feature-settings: normal;
+    font-variant: normal;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: normal;
+    height: auto;
+    -webkit-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+    left: auto;
+    letter-spacing: normal;
+    list-style: disc outside none;
+    margin: 0;
+    max-height: none;
+    max-width: none;
+    min-height: 0;
+    min-width: 0;
+    opacity: 1;
+    orphans: 2;
+    outline: medium none invert;
+    overflow: visible;
+    overflow-x: visible;
+    overflow-y: visible;
+    padding: 0;
+    page-break-after: auto;
+    page-break-before: auto;
+    page-break-inside: auto;
+    perspective: none;
+    perspective-origin: 50% 50%;
+    position: static;
+    right: auto;
+    -moz-tab-size: 8;
+    -o-tab-size: 8;
+    tab-size: 8;
+    table-layout: auto;
+    text-align: left;
+    text-align-last: auto;
+    text-decoration: none;
+    text-indent: 0;
+    text-shadow: none;
+    text-transform: none;
+    top: auto;
+    transform: none;
+    transform-origin: 50% 50% 0;
+    transform-style: flat;
+    transition: none 0s ease 0s;
+    unicode-bidi: normal;
+    vertical-align: baseline;
+    visibility: visible;
+    white-space: normal;
+    widows: 2;
+    width: auto;
+    word-spacing: normal;
+    z-index: auto;
+    all: initial;
+    box-sizing: border-box;
+    text-shadow: none;
+    -webkit-font-smoothing: antialiased;
+    -webkit-tap-highlight-color: initial
+  }
+
+#drupal-off-canvas span:after,
+    #drupal-off-canvas span:before,
+    #drupal-off-canvas applet:after,
+    #drupal-off-canvas applet:before,
+    #drupal-off-canvas object:after,
+    #drupal-off-canvas object:before,
+    #drupal-off-canvas iframe:after,
+    #drupal-off-canvas iframe:before,
+    #drupal-off-canvas h1:after,
+    #drupal-off-canvas h1:before,
+    #drupal-off-canvas h2:after,
+    #drupal-off-canvas h2:before,
+    #drupal-off-canvas h3:after,
+    #drupal-off-canvas h3:before,
+    #drupal-off-canvas h4:after,
+    #drupal-off-canvas h4:before,
+    #drupal-off-canvas h5:after,
+    #drupal-off-canvas h5:before,
+    #drupal-off-canvas h6:after,
+    #drupal-off-canvas h6:before,
+    #drupal-off-canvas p:after,
+    #drupal-off-canvas p:before,
+    #drupal-off-canvas blockquote:after,
+    #drupal-off-canvas blockquote:before,
+    #drupal-off-canvas pre:after,
+    #drupal-off-canvas pre:before,
+    #drupal-off-canvas a:after,
+    #drupal-off-canvas a:before,
+    #drupal-off-canvas abbr:after,
+    #drupal-off-canvas abbr:before,
+    #drupal-off-canvas acronym:after,
+    #drupal-off-canvas acronym:before,
+    #drupal-off-canvas address:after,
+    #drupal-off-canvas address:before,
+    #drupal-off-canvas big:after,
+    #drupal-off-canvas big:before,
+    #drupal-off-canvas cite:after,
+    #drupal-off-canvas cite:before,
+    #drupal-off-canvas code:after,
+    #drupal-off-canvas code:before,
+    #drupal-off-canvas del:after,
+    #drupal-off-canvas del:before,
+    #drupal-off-canvas dfn:after,
+    #drupal-off-canvas dfn:before,
+    #drupal-off-canvas em:after,
+    #drupal-off-canvas em:before,
+    #drupal-off-canvas img:after,
+    #drupal-off-canvas img:before,
+    #drupal-off-canvas ins:after,
+    #drupal-off-canvas ins:before,
+    #drupal-off-canvas kbd:after,
+    #drupal-off-canvas kbd:before,
+    #drupal-off-canvas q:after,
+    #drupal-off-canvas q:before,
+    #drupal-off-canvas s:after,
+    #drupal-off-canvas s:before,
+    #drupal-off-canvas samp:after,
+    #drupal-off-canvas samp:before,
+    #drupal-off-canvas small:after,
+    #drupal-off-canvas small:before,
+    #drupal-off-canvas strike:after,
+    #drupal-off-canvas strike:before,
+    #drupal-off-canvas strong:after,
+    #drupal-off-canvas strong:before,
+    #drupal-off-canvas sub:after,
+    #drupal-off-canvas sub:before,
+    #drupal-off-canvas sup:after,
+    #drupal-off-canvas sup:before,
+    #drupal-off-canvas tt:after,
+    #drupal-off-canvas tt:before,
+    #drupal-off-canvas var:after,
+    #drupal-off-canvas var:before,
+    #drupal-off-canvas b:after,
+    #drupal-off-canvas b:before,
+    #drupal-off-canvas u:after,
+    #drupal-off-canvas u:before,
+    #drupal-off-canvas i:after,
+    #drupal-off-canvas i:before,
+    #drupal-off-canvas center:after,
+    #drupal-off-canvas center:before,
+    #drupal-off-canvas dl:after,
+    #drupal-off-canvas dl:before,
+    #drupal-off-canvas dt:after,
+    #drupal-off-canvas dt:before,
+    #drupal-off-canvas dd:after,
+    #drupal-off-canvas dd:before,
+    #drupal-off-canvas ol:after,
+    #drupal-off-canvas ol:before,
+    #drupal-off-canvas ul:after,
+    #drupal-off-canvas ul:before,
+    #drupal-off-canvas li:after,
+    #drupal-off-canvas li:before,
+    #drupal-off-canvas fieldset:after,
+    #drupal-off-canvas fieldset:before,
+    #drupal-off-canvas form:after,
+    #drupal-off-canvas form:before,
+    #drupal-off-canvas label:after,
+    #drupal-off-canvas label:before,
+    #drupal-off-canvas legend:after,
+    #drupal-off-canvas legend:before,
+    #drupal-off-canvas table:after,
+    #drupal-off-canvas table:before,
+    #drupal-off-canvas caption:after,
+    #drupal-off-canvas caption:before,
+    #drupal-off-canvas tbody:after,
+    #drupal-off-canvas tbody:before,
+    #drupal-off-canvas tfoot:after,
+    #drupal-off-canvas tfoot:before,
+    #drupal-off-canvas thead:after,
+    #drupal-off-canvas thead:before,
+    #drupal-off-canvas tr:after,
+    #drupal-off-canvas tr:before,
+    #drupal-off-canvas th:after,
+    #drupal-off-canvas th:before,
+    #drupal-off-canvas td:after,
+    #drupal-off-canvas td:before,
+    #drupal-off-canvas article:after,
+    #drupal-off-canvas article:before,
+    #drupal-off-canvas aside:after,
+    #drupal-off-canvas aside:before,
+    #drupal-off-canvas canvas:after,
+    #drupal-off-canvas canvas:before,
+    #drupal-off-canvas details:after,
+    #drupal-off-canvas details:before,
+    #drupal-off-canvas embed:after,
+    #drupal-off-canvas embed:before,
+    #drupal-off-canvas figure:after,
+    #drupal-off-canvas figure:before,
+    #drupal-off-canvas figcaption:after,
+    #drupal-off-canvas figcaption:before,
+    #drupal-off-canvas footer:after,
+    #drupal-off-canvas footer:before,
+    #drupal-off-canvas header:after,
+    #drupal-off-canvas header:before,
+    #drupal-off-canvas hgroup:after,
+    #drupal-off-canvas hgroup:before,
+    #drupal-off-canvas menu:after,
+    #drupal-off-canvas menu:before,
+    #drupal-off-canvas nav:after,
+    #drupal-off-canvas nav:before,
+    #drupal-off-canvas output:after,
+    #drupal-off-canvas output:before,
+    #drupal-off-canvas ruby:after,
+    #drupal-off-canvas ruby:before,
+    #drupal-off-canvas section:after,
+    #drupal-off-canvas section:before,
+    #drupal-off-canvas summary:after,
+    #drupal-off-canvas summary:before,
+    #drupal-off-canvas time:after,
+    #drupal-off-canvas time:before,
+    #drupal-off-canvas mark:after,
+    #drupal-off-canvas mark:before,
+    #drupal-off-canvas audio:after,
+    #drupal-off-canvas audio:before,
+    #drupal-off-canvas video:after,
+    #drupal-off-canvas video:before,
+    #drupal-off-canvas input:after,
+    #drupal-off-canvas input:before,
+    #drupal-off-canvas textarea:after,
+    #drupal-off-canvas textarea:before {
+      animation: none 0s ease 0s 1 normal none running;
+      -webkit-backface-visibility: visible;
+      backface-visibility: visible;
+      background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
+      border: medium none currentColor;
+      border-collapse: separate;
+      -o-border-image: none;
+      border-image: none;
+      border-radius: 0;
+      border-spacing: 0;
+      bottom: auto;
+      box-shadow: none;
+      box-sizing: content-box;
+      caption-side: top;
+      clear: none;
+      clip: auto;
+      color: #000;
+      columns: auto;
+      column-count: auto;
+      column-fill: balance;
+      grid-column-gap: normal;
+      column-rule: medium none currentColor;
+      column-span: 1;
+      column-width: auto;
+      content: normal;
+      counter-increment: none;
+      counter-reset: none;
+      cursor: auto;
+      direction: ltr;
+      display: inline;
+      empty-cells: show;
+      float: none;
+      font-family: serif;
+      font-size: medium;
+      font-style: normal;
+      font-feature-settings: normal;
+      font-variant: normal;
+      font-weight: normal;
+      font-stretch: normal;
+      line-height: normal;
+      height: auto;
+      -webkit-hyphens: none;
+      -ms-hyphens: none;
+      hyphens: none;
+      left: auto;
+      letter-spacing: normal;
+      list-style: disc outside none;
+      margin: 0;
+      max-height: none;
+      max-width: none;
+      min-height: 0;
+      min-width: 0;
+      opacity: 1;
+      orphans: 2;
+      outline: medium none invert;
+      overflow: visible;
+      overflow-x: visible;
+      overflow-y: visible;
+      padding: 0;
+      page-break-after: auto;
+      page-break-before: auto;
+      page-break-inside: auto;
+      perspective: none;
+      perspective-origin: 50% 50%;
+      position: static;
+      right: auto;
+      -moz-tab-size: 8;
+      -o-tab-size: 8;
+      tab-size: 8;
+      table-layout: auto;
+      text-align: left;
+      text-align-last: auto;
+      text-decoration: none;
+      text-indent: 0;
+      text-shadow: none;
+      text-transform: none;
+      top: auto;
+      transform: none;
+      transform-origin: 50% 50% 0;
+      transform-style: flat;
+      transition: none 0s ease 0s;
+      unicode-bidi: normal;
+      vertical-align: baseline;
+      visibility: visible;
+      white-space: normal;
+      widows: 2;
+      width: auto;
+      word-spacing: normal;
+      z-index: auto;
+      all: initial;
+      box-sizing: border-box;
+      text-shadow: none;
+      -webkit-font-smoothing: antialiased;
+      -webkit-tap-highlight-color: initial;
+    }
 
 /* Reset size and position on elements. */
+
 #drupal-off-canvas a,
 #drupal-off-canvas abbr,
 #drupal-off-canvas acronym,
@@ -115,6 +545,7 @@
  * Override the default (display: inline) for browsers that do not recognize HTML5 tags.
  * IE8 (and lower) requires a shiv: http://ejohn.org/blog/html5-shiv
  */
+
 #drupal-off-canvas article,
 #drupal-off-canvas aside,
 #drupal-off-canvas figcaption,
@@ -136,6 +567,7 @@
  * IE + Opera = font-weight: bold.
  * Gecko + WebKit = font-weight: bolder.
  */
+
 #drupal-off-canvas b,
 #drupal-off-canvas strong {
   font-weight: bold;
@@ -158,10 +590,12 @@
 }
 
 /* reset table styling. */
+
 #drupal-off-canvas table {
   border-spacing: 0;
   border-collapse: collapse;
 }
+
 #drupal-off-canvas table thead,
 #drupal-off-canvas table tbody,
 #drupal-off-canvas table tbody tr:nth-child(even),
@@ -170,32 +604,39 @@
   border: 0;
   background: transparent none;
 }
+
 #drupal-off-canvas th,
 #drupal-off-canvas td,
 #drupal-off-canvas caption {
   font-weight: normal;
 }
+
 #drupal-off-canvas q {
   quotes: none;
 }
+
 #drupal-off-canvas q:before,
 #drupal-off-canvas q:after {
   content: none;
 }
+
 #drupal-off-canvas sub,
 #drupal-off-canvas sup,
 #drupal-off-canvas small {
   font-size: 75%;
 }
+
 #drupal-off-canvas sub,
 #drupal-off-canvas sup {
   position: relative;
   vertical-align: baseline;
   line-height: 0;
 }
+
 #drupal-off-canvas sub {
   bottom: -0.25em;
 }
+
 #drupal-off-canvas sup {
   top: -0.5em;
 }
@@ -204,23 +645,28 @@
  * For IE9. Without, occasionally draws shapes
  * outside the boundaries of <svg> rectangle.
  */
+
 #drupal-off-canvas svg {
   overflow: hidden;
 }
 
 /* Specific resets for inputs. */
+
 #drupal-off-canvas input[type="search"]::-webkit-search-decoration {
   display: none;
 }
+
 #drupal-off-canvas input {
   margin: 0;
   padding: 0;
 }
+
 #drupal-off-canvas input[type="checkbox"],
 #drupal-off-canvas input[type="radio"] {
   position: static;
   margin: 0;
 }
+
 #drupal-off-canvas input:invalid,
 #drupal-off-canvas button:invalid,
 #drupal-off-canvas select:invalid,
@@ -238,9 +684,11 @@
   z-index: 1;
   box-shadow: none;
 }
+
 #drupal-off-canvas input[role="button"] {
   cursor: pointer;
 }
+
 #drupal-off-canvas button,
 #drupal-off-canvas input[type="reset"],
 #drupal-off-canvas input[type="submit"],
@@ -257,6 +705,7 @@
   -webkit-appearance: none;
   -moz-appearance: none;
 }
+
 #drupal-off-canvas button:hover,
 #drupal-off-canvas input[type="reset"]:hover,
 #drupal-off-canvas input[type="submit"]:hover,
@@ -264,6 +713,7 @@
   text-decoration: none;
   background-image: none;
 }
+
 #drupal-off-canvas button:active,
 #drupal-off-canvas input[type="reset"]:active,
 #drupal-off-canvas input[type="submit"]:active,
@@ -272,6 +722,7 @@
   background-image: none;
   box-shadow: none;
 }
+
 #drupal-off-canvas button::-moz-focus-inner,
 #drupal-off-canvas input[type="reset"]::-moz-focus-inner,
 #drupal-off-canvas input[type="submit"]::-moz-focus-inner,
@@ -279,6 +730,7 @@
   padding: 0;
   border: 0;
 }
+
 #drupal-off-canvas textarea,
 #drupal-off-canvas select,
 #drupal-off-canvas input[type="date"],
@@ -298,6 +750,7 @@
   vertical-align: middle;
   border-radius: 0;
 }
+
 #drupal-off-canvas textarea[disabled],
 #drupal-off-canvas select[disabled],
 #drupal-off-canvas input[type="date"][disabled],
@@ -315,9 +768,11 @@
 #drupal-off-canvas input[type="week"][disabled] {
   background-color: gray;
 }
+
 #drupal-off-canvas input[type="hidden"] {
   visibility: hidden;
 }
+
 #drupal-off-canvas button[disabled],
 #drupal-off-canvas input[disabled],
 #drupal-off-canvas select[disabled],
@@ -326,39 +781,45 @@
 #drupal-off-canvas textarea[disabled] {
   cursor: default;
   -webkit-user-select: none;
-  -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   box-shadow: none;
 }
+
 #drupal-off-canvas input:placeholder,
 #drupal-off-canvas textarea:placeholder {
   color: gray;
 }
+
 #drupal-off-canvas textarea,
 #drupal-off-canvas select[size],
 #drupal-off-canvas select[multiple] {
   height: auto;
 }
+
 #drupal-off-canvas select[size="0"],
 #drupal-off-canvas select[size="1"] {
   height: auto;
 }
+
 #drupal-off-canvas textarea {
   overflow: auto;
   width: 100%;
-  min-height: 40px;
+  min-height: 2.5rem;
   resize: vertical;
 }
+
 #drupal-off-canvas optgroup {
   color: black;
   font-weight: normal;
   font-style: normal;
 }
+
 #drupal-off-canvas optgroup::-moz-focus-inner {
   padding: 0;
   border: 0;
 }
+
 #drupal-off-canvas * button {
   overflow: visible;
   width: auto;
@@ -369,6 +830,7 @@
   border: 1px solid gray;
   background: none;
 }
+
 #drupal-off-canvas * textarea,
 #drupal-off-canvas * select,
 #drupal-off-canvas *:not(div) textarea,
diff --git a/core/themes/stable/css/core/dialog/off-canvas.reset.css b/core/themes/stable/css/core/dialog/off-canvas.reset.pcss.css
similarity index 88%
copy from core/themes/stable/css/core/dialog/off-canvas.reset.css
copy to core/themes/stable/css/core/dialog/off-canvas.reset.pcss.css
index 0863d06c54..db849e2e2c 100644
--- a/core/themes/stable/css/core/dialog/off-canvas.reset.css
+++ b/core/themes/stable/css/core/dialog/off-canvas.reset.pcss.css
@@ -9,15 +9,102 @@
  * Do not include div in then initial overrides because including div will
  * cause the need for many more overrides in this file.
  */
-#drupal-off-canvas *:not(div),
-#drupal-off-canvas *:not(svg *),
-#drupal-off-canvas *:after,
-#drupal-off-canvas *:before {
-  all: initial;
-  box-sizing: border-box;
-  text-shadow: none;
-  -webkit-font-smoothing: antialiased;
-  -webkit-tap-highlight-color: initial;
+#drupal-off-canvas {
+  & span,
+  & applet,
+  & object,
+  & iframe,
+  & h1,
+  & h2,
+  & h3,
+  & h4,
+  & h5,
+  & h6,
+  & p,
+  & blockquote,
+  & pre,
+  & a,
+  & abbr,
+  & acronym,
+  & address,
+  & big,
+  & cite,
+  & code,
+  & del,
+  & dfn,
+  & em,
+  & img,
+  & ins,
+  & kbd,
+  & q,
+  & s,
+  & samp,
+  & small,
+  & strike,
+  & strong,
+  & sub,
+  & sup,
+  & tt,
+  & var,
+  & b,
+  & u,
+  & i,
+  & center,
+  & dl,
+  & dt,
+  & dd,
+  & ol,
+  & ul,
+  & li,
+  & fieldset,
+  & form,
+  & label,
+  & legend,
+  & table,
+  & caption,
+  & tbody,
+  & tfoot,
+  & thead,
+  & tr,
+  & th,
+  & td,
+  & article,
+  & aside,
+  & canvas,
+  & details,
+  & embed,
+  & figure,
+  & figcaption,
+  & footer,
+  & header,
+  & hgroup,
+  & menu,
+  & nav,
+  & output,
+  & ruby,
+  & section,
+  & summary,
+  & time,
+  & mark,
+  & audio,
+  & video,
+  & input,
+  & textarea {
+    all: initial;
+    box-sizing: border-box;
+    text-shadow: none;
+    -webkit-font-smoothing: antialiased;
+    -webkit-tap-highlight-color: initial;
+
+    &:after,
+    &:before {
+      all: initial;
+      box-sizing: border-box;
+      text-shadow: none;
+      -webkit-font-smoothing: antialiased;
+      -webkit-tap-highlight-color: initial;
+    }
+  }
 }
 
 /* Reset size and position on elements. */
diff --git a/core/themes/stable9/css/core/dialog/off-canvas.base.css b/core/themes/stable9/css/core/dialog/off-canvas.base.css
index 95fe5868e7..8f938ae33c 100644
--- a/core/themes/stable9/css/core/dialog/off-canvas.base.css
+++ b/core/themes/stable9/css/core/dialog/off-canvas.base.css
@@ -1,19 +1,112 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
 /**
  * @file
  * Set base styles for the off-canvas dialog.
  */
 
 /* Set some global attributes. */
-#drupal-off-canvas *,
-#drupal-off-canvas *:not(div) {
+
+#drupal-off-canvas {
   color: #ddd;
   background: #444;
-  font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
 }
 
+#drupal-off-canvas span,
+  #drupal-off-canvas applet,
+  #drupal-off-canvas object,
+  #drupal-off-canvas iframe,
+  #drupal-off-canvas h1,
+  #drupal-off-canvas h2,
+  #drupal-off-canvas h3,
+  #drupal-off-canvas h4,
+  #drupal-off-canvas h5,
+  #drupal-off-canvas h6,
+  #drupal-off-canvas p,
+  #drupal-off-canvas blockquote,
+  #drupal-off-canvas pre,
+  #drupal-off-canvas a,
+  #drupal-off-canvas abbr,
+  #drupal-off-canvas acronym,
+  #drupal-off-canvas address,
+  #drupal-off-canvas big,
+  #drupal-off-canvas cite,
+  #drupal-off-canvas code,
+  #drupal-off-canvas del,
+  #drupal-off-canvas dfn,
+  #drupal-off-canvas em,
+  #drupal-off-canvas img,
+  #drupal-off-canvas ins,
+  #drupal-off-canvas kbd,
+  #drupal-off-canvas q,
+  #drupal-off-canvas s,
+  #drupal-off-canvas samp,
+  #drupal-off-canvas small,
+  #drupal-off-canvas strike,
+  #drupal-off-canvas strong,
+  #drupal-off-canvas sub,
+  #drupal-off-canvas sup,
+  #drupal-off-canvas tt,
+  #drupal-off-canvas var,
+  #drupal-off-canvas b,
+  #drupal-off-canvas u,
+  #drupal-off-canvas i,
+  #drupal-off-canvas center,
+  #drupal-off-canvas dl,
+  #drupal-off-canvas dt,
+  #drupal-off-canvas dd,
+  #drupal-off-canvas ol,
+  #drupal-off-canvas ul,
+  #drupal-off-canvas li,
+  #drupal-off-canvas fieldset,
+  #drupal-off-canvas form,
+  #drupal-off-canvas label,
+  #drupal-off-canvas legend,
+  #drupal-off-canvas table,
+  #drupal-off-canvas caption,
+  #drupal-off-canvas tbody,
+  #drupal-off-canvas tfoot,
+  #drupal-off-canvas thead,
+  #drupal-off-canvas tr,
+  #drupal-off-canvas th,
+  #drupal-off-canvas td,
+  #drupal-off-canvas article,
+  #drupal-off-canvas aside,
+  #drupal-off-canvas canvas,
+  #drupal-off-canvas details,
+  #drupal-off-canvas embed,
+  #drupal-off-canvas figure,
+  #drupal-off-canvas figcaption,
+  #drupal-off-canvas footer,
+  #drupal-off-canvas header,
+  #drupal-off-canvas hgroup,
+  #drupal-off-canvas menu,
+  #drupal-off-canvas nav,
+  #drupal-off-canvas output,
+  #drupal-off-canvas ruby,
+  #drupal-off-canvas section,
+  #drupal-off-canvas summary,
+  #drupal-off-canvas time,
+  #drupal-off-canvas mark,
+  #drupal-off-canvas audio,
+  #drupal-off-canvas video,
+  #drupal-off-canvas input,
+  #drupal-off-canvas textarea {
+    color: inherit;
+    background: inherit;
+    font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
+  }
+
 /* Generic elements. */
+
 #drupal-off-canvas a,
 #drupal-off-canvas .link {
+  cursor: pointer;
   transition: color 0.5s ease;
   text-decoration: none;
   color: #85bef4;
@@ -29,14 +122,17 @@
 #drupal-off-canvas .link:hover {
   text-decoration: underline;
 }
+
 #drupal-off-canvas hr {
   height: 1px;
   background: #ccc;
 }
+
 #drupal-off-canvas summary,
 #drupal-off-canvas .fieldgroup:not(.form-composite) > legend {
   font-weight: bold;
 }
+
 #drupal-off-canvas h1,
 #drupal-off-canvas .heading-a {
   display: block;
@@ -44,87 +140,105 @@
   font-weight: bold;
   line-height: 1.875em;
 }
+
 #drupal-off-canvas h2,
 #drupal-off-canvas .heading-b {
   display: block;
-  margin: 10px 0;
+  margin: 0.625rem 0;
   font-size: 1.385em;
   font-weight: bold;
 }
+
 #drupal-off-canvas h3,
 #drupal-off-canvas .heading-c {
   display: block;
-  margin: 10px 0;
+  margin: 0.625rem 0;
   font-size: 1.231em;
   font-weight: bold;
 }
+
 #drupal-off-canvas h4,
 #drupal-off-canvas .heading-d {
   display: block;
-  margin: 10px 0;
+  margin: 0.625rem 0;
   font-size: 1.154em;
   font-weight: bold;
 }
+
 #drupal-off-canvas h5,
 #drupal-off-canvas .heading-e {
   display: block;
-  margin: 10px 0;
+  margin: 0.625rem 0;
   font-size: 1.077em;
   font-weight: bold;
 }
+
 #drupal-off-canvas h6,
 #drupal-off-canvas .heading-f {
   display: block;
-  margin: 10px 0;
+  margin: 0.625rem 0;
   font-size: 1.077em;
   font-weight: bold;
 }
+
 #drupal-off-canvas p {
   margin: 1em 0;
 }
+
 #drupal-off-canvas dl {
-  margin: 0 0 20px;
+  margin: 0 0 1.25rem;
 }
+
 #drupal-off-canvas dl dd,
 #drupal-off-canvas dl dl {
-  margin-bottom: 10px;
-  margin-left: 20px; /* LTR */
+  margin-bottom: 0.625rem;
+  margin-left: 1.25rem; /* LTR */
 }
+
 [dir="rtl"] #drupal-off-canvas dl dd,
 [dir="rtl"] #drupal-off-canvas dl dl {
-  margin-right: 20px;
+  margin-right: 1.25rem;
 }
+
 #drupal-off-canvas blockquote {
-  margin: 1em 40px;
+  margin: 1em 2.5rem;
 }
+
 #drupal-off-canvas address {
   font-style: italic;
 }
+
 #drupal-off-canvas u,
 #drupal-off-canvas ins {
   text-decoration: underline;
 }
+
 #drupal-off-canvas s,
 #drupal-off-canvas strike,
 #drupal-off-canvas del {
   text-decoration: line-through;
 }
+
 #drupal-off-canvas big {
   font-size: larger;
 }
+
 #drupal-off-canvas small {
   font-size: smaller;
 }
+
 #drupal-off-canvas sub {
   vertical-align: sub;
   font-size: smaller;
   line-height: normal;
 }
+
 #drupal-off-canvas sup {
   vertical-align: super;
   font-size: smaller;
   line-height: normal;
 }
+
 #drupal-off-canvas abbr,
 #drupal-off-canvas acronym {
   border-bottom: dotted 1px;
@@ -135,29 +249,44 @@
   list-style-type: disc;
   list-style-image: none;
 }
+
 [dir="rtl"] #drupal-off-canvas .messages__list {
   margin-right: 0;
 }
+
 #drupal-off-canvas ol {
   list-style-type: decimal;
 }
+
 #drupal-off-canvas ul li,
 #drupal-off-canvas ol li {
   display: block;
 }
+
 #drupal-off-canvas blockquote,
 #drupal-off-canvas code {
-  margin: 20px 0;
+  margin: 1.25rem 0;
 }
+
 #drupal-off-canvas pre {
-  margin: 20px 0;
+  margin: 1.25rem 0;
   white-space: pre-wrap;
 }
 
+#drupal-off-canvas details {
+  display: block;
+}
+
+#drupal-off-canvas summary {
+  display: list-item;
+}
+
 /* Classes for hidden and visually hidden elements. See hidden.module.css. */
+
 #drupal-off-canvas .hidden {
   display: none;
 }
+
 #drupal-off-canvas .visually-hidden {
   position: absolute !important;
   overflow: hidden;
@@ -166,6 +295,7 @@
   height: 1px;
   word-wrap: normal;
 }
+
 #drupal-off-canvas .visually-hidden.focusable:active,
 #drupal-off-canvas .visually-hidden.focusable:focus {
   position: static !important;
@@ -174,58 +304,70 @@
   width: auto;
   height: auto;
 }
+
 #drupal-off-canvas .invisible {
   visibility: hidden;
 }
 
 /* Some system classes. See system.admin.css. */
+
 #drupal-off-canvas .panel {
-  padding: 5px 5px 15px;
+  padding: 0.3125rem 0.3125rem 0.9375rem;
 }
+
 #drupal-off-canvas .panel__description {
-  margin: 0 0 3px;
-  padding: 2px 0 3px 0;
+  margin: 0 0 0.1875rem;
+  padding: 2px 0 0.1875rem 0;
 }
+
 #drupal-off-canvas .compact-link {
-  margin: 0 0 10px 0;
+  margin: 0 0 0.625rem 0;
 }
+
 #drupal-off-canvas small .admin-link:before {
   content: " [";
 }
+
 #drupal-off-canvas small .admin-link:after {
   content: "]";
 }
 
 /* Override jQuery UI */
+
 #drupal-off-canvas .ui-widget-content a {
   color: #85bef4 !important;
 }
 
 /* Message styles */
+
 #drupal-off-canvas .messages {
-  background: no-repeat 10px 17px;
+  background: no-repeat 0.625rem 1.0625rem;
 }
+
 [dir="rtl"] #drupal-off-canvas .messages {
   background-position: right 10px top 17px;
 }
+
 #drupal-off-canvas .messages abbr {
   color: #444;
 }
+
 #drupal-off-canvas .messages--status {
   color: #325e1c;
   background-color: #f3faef;
-  background-image: url(../../../../../misc/icons/73b355/check.svg);
+  background-image: url(../icons/73b355/check.svg);
 }
+
 #drupal-off-canvas .messages--warning {
   color: #734c00;
   background-color: #fdf8ed;
-  background-image: url(../../../../../misc/icons/e29700/warning.svg);
+  background-image: url(../icons/e29700/warning.svg);
 }
 
 #drupal-off-canvas .messages--error {
   color: #a51b00;
   background-color: #fcf4f2;
-  background-image: url(../../../../../misc/icons/e32700/error.svg);
+  background-image: url(../icons/e32700/error.svg);
 }
 
 #drupal-off-canvas .messages--error div[role="alert"] {
diff --git a/core/misc/dialog/off-canvas.base.css b/core/themes/stable9/css/core/dialog/off-canvas.base.pcss.css
similarity index 81%
copy from core/misc/dialog/off-canvas.base.css
copy to core/themes/stable9/css/core/dialog/off-canvas.base.pcss.css
index a0948c0ade..d1f4be93e1 100644
--- a/core/misc/dialog/off-canvas.base.css
+++ b/core/themes/stable9/css/core/dialog/off-canvas.base.pcss.css
@@ -4,16 +4,101 @@
  */
 
 /* Set some global attributes. */
-#drupal-off-canvas *,
-#drupal-off-canvas *:not(div) {
+#drupal-off-canvas {
   color: #ddd;
   background: #444;
-  font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
+}
+#drupal-off-canvas {
+  & span,
+  & applet,
+  & object,
+  & iframe,
+  & h1,
+  & h2,
+  & h3,
+  & h4,
+  & h5,
+  & h6,
+  & p,
+  & blockquote,
+  & pre,
+  & a,
+  & abbr,
+  & acronym,
+  & address,
+  & big,
+  & cite,
+  & code,
+  & del,
+  & dfn,
+  & em,
+  & img,
+  & ins,
+  & kbd,
+  & q,
+  & s,
+  & samp,
+  & small,
+  & strike,
+  & strong,
+  & sub,
+  & sup,
+  & tt,
+  & var,
+  & b,
+  & u,
+  & i,
+  & center,
+  & dl,
+  & dt,
+  & dd,
+  & ol,
+  & ul,
+  & li,
+  & fieldset,
+  & form,
+  & label,
+  & legend,
+  & table,
+  & caption,
+  & tbody,
+  & tfoot,
+  & thead,
+  & tr,
+  & th,
+  & td,
+  & article,
+  & aside,
+  & canvas,
+  & details,
+  & embed,
+  & figure,
+  & figcaption,
+  & footer,
+  & header,
+  & hgroup,
+  & menu,
+  & nav,
+  & output,
+  & ruby,
+  & section,
+  & summary,
+  & time,
+  & mark,
+  & audio,
+  & video,
+  & input,
+  & textarea {
+    color: inherit;
+    background: inherit;
+    font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
+  }
 }
 
 /* Generic elements. */
 #drupal-off-canvas a,
 #drupal-off-canvas .link {
+  cursor: pointer;
   transition: color 0.5s ease;
   text-decoration: none;
   color: #85bef4;
@@ -153,6 +238,12 @@
   margin: 20px 0;
   white-space: pre-wrap;
 }
+#drupal-off-canvas details {
+  display: block;
+}
+#drupal-off-canvas summary {
+  display: list-item;
+}
 
 /* Classes for hidden and visually hidden elements. See hidden.module.css. */
 #drupal-off-canvas .hidden {
diff --git a/core/themes/stable9/css/core/dialog/off-canvas.reset.css b/core/themes/stable9/css/core/dialog/off-canvas.reset.css
index 0863d06c54..39bdefd407 100644
--- a/core/themes/stable9/css/core/dialog/off-canvas.reset.css
+++ b/core/themes/stable9/css/core/dialog/off-canvas.reset.css
@@ -1,3 +1,10 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
 /**
  * @file
  * Reset most HTML elements styles for the off-canvas dialog.
@@ -9,18 +16,441 @@
  * Do not include div in then initial overrides because including div will
  * cause the need for many more overrides in this file.
  */
-#drupal-off-canvas *:not(div),
-#drupal-off-canvas *:not(svg *),
-#drupal-off-canvas *:after,
-#drupal-off-canvas *:before {
-  all: initial;
-  box-sizing: border-box;
-  text-shadow: none;
-  -webkit-font-smoothing: antialiased;
-  -webkit-tap-highlight-color: initial;
-}
+
+#drupal-off-canvas span,
+  #drupal-off-canvas applet,
+  #drupal-off-canvas object,
+  #drupal-off-canvas iframe,
+  #drupal-off-canvas h1,
+  #drupal-off-canvas h2,
+  #drupal-off-canvas h3,
+  #drupal-off-canvas h4,
+  #drupal-off-canvas h5,
+  #drupal-off-canvas h6,
+  #drupal-off-canvas p,
+  #drupal-off-canvas blockquote,
+  #drupal-off-canvas pre,
+  #drupal-off-canvas a,
+  #drupal-off-canvas abbr,
+  #drupal-off-canvas acronym,
+  #drupal-off-canvas address,
+  #drupal-off-canvas big,
+  #drupal-off-canvas cite,
+  #drupal-off-canvas code,
+  #drupal-off-canvas del,
+  #drupal-off-canvas dfn,
+  #drupal-off-canvas em,
+  #drupal-off-canvas img,
+  #drupal-off-canvas ins,
+  #drupal-off-canvas kbd,
+  #drupal-off-canvas q,
+  #drupal-off-canvas s,
+  #drupal-off-canvas samp,
+  #drupal-off-canvas small,
+  #drupal-off-canvas strike,
+  #drupal-off-canvas strong,
+  #drupal-off-canvas sub,
+  #drupal-off-canvas sup,
+  #drupal-off-canvas tt,
+  #drupal-off-canvas var,
+  #drupal-off-canvas b,
+  #drupal-off-canvas u,
+  #drupal-off-canvas i,
+  #drupal-off-canvas center,
+  #drupal-off-canvas dl,
+  #drupal-off-canvas dt,
+  #drupal-off-canvas dd,
+  #drupal-off-canvas ol,
+  #drupal-off-canvas ul,
+  #drupal-off-canvas li,
+  #drupal-off-canvas fieldset,
+  #drupal-off-canvas form,
+  #drupal-off-canvas label,
+  #drupal-off-canvas legend,
+  #drupal-off-canvas table,
+  #drupal-off-canvas caption,
+  #drupal-off-canvas tbody,
+  #drupal-off-canvas tfoot,
+  #drupal-off-canvas thead,
+  #drupal-off-canvas tr,
+  #drupal-off-canvas th,
+  #drupal-off-canvas td,
+  #drupal-off-canvas article,
+  #drupal-off-canvas aside,
+  #drupal-off-canvas canvas,
+  #drupal-off-canvas details,
+  #drupal-off-canvas embed,
+  #drupal-off-canvas figure,
+  #drupal-off-canvas figcaption,
+  #drupal-off-canvas footer,
+  #drupal-off-canvas header,
+  #drupal-off-canvas hgroup,
+  #drupal-off-canvas menu,
+  #drupal-off-canvas nav,
+  #drupal-off-canvas output,
+  #drupal-off-canvas ruby,
+  #drupal-off-canvas section,
+  #drupal-off-canvas summary,
+  #drupal-off-canvas time,
+  #drupal-off-canvas mark,
+  #drupal-off-canvas audio,
+  #drupal-off-canvas video,
+  #drupal-off-canvas input,
+  #drupal-off-canvas textarea {
+    animation: none 0s ease 0s 1 normal none running;
+    -webkit-backface-visibility: visible;
+    backface-visibility: visible;
+    background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
+    border: medium none currentColor;
+    border-collapse: separate;
+    -o-border-image: none;
+    border-image: none;
+    border-radius: 0;
+    border-spacing: 0;
+    bottom: auto;
+    box-shadow: none;
+    box-sizing: content-box;
+    caption-side: top;
+    clear: none;
+    clip: auto;
+    color: #000;
+    columns: auto;
+    column-count: auto;
+    column-fill: balance;
+    grid-column-gap: normal;
+    column-rule: medium none currentColor;
+    column-span: 1;
+    column-width: auto;
+    content: normal;
+    counter-increment: none;
+    counter-reset: none;
+    cursor: auto;
+    direction: ltr;
+    display: inline;
+    empty-cells: show;
+    float: none;
+    font-family: serif;
+    font-size: medium;
+    font-style: normal;
+    font-feature-settings: normal;
+    font-variant: normal;
+    font-weight: normal;
+    font-stretch: normal;
+    line-height: normal;
+    height: auto;
+    -webkit-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+    left: auto;
+    letter-spacing: normal;
+    list-style: disc outside none;
+    margin: 0;
+    max-height: none;
+    max-width: none;
+    min-height: 0;
+    min-width: 0;
+    opacity: 1;
+    orphans: 2;
+    outline: medium none invert;
+    overflow: visible;
+    overflow-x: visible;
+    overflow-y: visible;
+    padding: 0;
+    page-break-after: auto;
+    page-break-before: auto;
+    page-break-inside: auto;
+    perspective: none;
+    perspective-origin: 50% 50%;
+    position: static;
+    right: auto;
+    -moz-tab-size: 8;
+    -o-tab-size: 8;
+    tab-size: 8;
+    table-layout: auto;
+    text-align: left;
+    text-align-last: auto;
+    text-decoration: none;
+    text-indent: 0;
+    text-shadow: none;
+    text-transform: none;
+    top: auto;
+    transform: none;
+    transform-origin: 50% 50% 0;
+    transform-style: flat;
+    transition: none 0s ease 0s;
+    unicode-bidi: normal;
+    vertical-align: baseline;
+    visibility: visible;
+    white-space: normal;
+    widows: 2;
+    width: auto;
+    word-spacing: normal;
+    z-index: auto;
+    all: initial;
+    box-sizing: border-box;
+    text-shadow: none;
+    -webkit-font-smoothing: antialiased;
+    -webkit-tap-highlight-color: initial
+  }
+
+#drupal-off-canvas span:after,
+    #drupal-off-canvas span:before,
+    #drupal-off-canvas applet:after,
+    #drupal-off-canvas applet:before,
+    #drupal-off-canvas object:after,
+    #drupal-off-canvas object:before,
+    #drupal-off-canvas iframe:after,
+    #drupal-off-canvas iframe:before,
+    #drupal-off-canvas h1:after,
+    #drupal-off-canvas h1:before,
+    #drupal-off-canvas h2:after,
+    #drupal-off-canvas h2:before,
+    #drupal-off-canvas h3:after,
+    #drupal-off-canvas h3:before,
+    #drupal-off-canvas h4:after,
+    #drupal-off-canvas h4:before,
+    #drupal-off-canvas h5:after,
+    #drupal-off-canvas h5:before,
+    #drupal-off-canvas h6:after,
+    #drupal-off-canvas h6:before,
+    #drupal-off-canvas p:after,
+    #drupal-off-canvas p:before,
+    #drupal-off-canvas blockquote:after,
+    #drupal-off-canvas blockquote:before,
+    #drupal-off-canvas pre:after,
+    #drupal-off-canvas pre:before,
+    #drupal-off-canvas a:after,
+    #drupal-off-canvas a:before,
+    #drupal-off-canvas abbr:after,
+    #drupal-off-canvas abbr:before,
+    #drupal-off-canvas acronym:after,
+    #drupal-off-canvas acronym:before,
+    #drupal-off-canvas address:after,
+    #drupal-off-canvas address:before,
+    #drupal-off-canvas big:after,
+    #drupal-off-canvas big:before,
+    #drupal-off-canvas cite:after,
+    #drupal-off-canvas cite:before,
+    #drupal-off-canvas code:after,
+    #drupal-off-canvas code:before,
+    #drupal-off-canvas del:after,
+    #drupal-off-canvas del:before,
+    #drupal-off-canvas dfn:after,
+    #drupal-off-canvas dfn:before,
+    #drupal-off-canvas em:after,
+    #drupal-off-canvas em:before,
+    #drupal-off-canvas img:after,
+    #drupal-off-canvas img:before,
+    #drupal-off-canvas ins:after,
+    #drupal-off-canvas ins:before,
+    #drupal-off-canvas kbd:after,
+    #drupal-off-canvas kbd:before,
+    #drupal-off-canvas q:after,
+    #drupal-off-canvas q:before,
+    #drupal-off-canvas s:after,
+    #drupal-off-canvas s:before,
+    #drupal-off-canvas samp:after,
+    #drupal-off-canvas samp:before,
+    #drupal-off-canvas small:after,
+    #drupal-off-canvas small:before,
+    #drupal-off-canvas strike:after,
+    #drupal-off-canvas strike:before,
+    #drupal-off-canvas strong:after,
+    #drupal-off-canvas strong:before,
+    #drupal-off-canvas sub:after,
+    #drupal-off-canvas sub:before,
+    #drupal-off-canvas sup:after,
+    #drupal-off-canvas sup:before,
+    #drupal-off-canvas tt:after,
+    #drupal-off-canvas tt:before,
+    #drupal-off-canvas var:after,
+    #drupal-off-canvas var:before,
+    #drupal-off-canvas b:after,
+    #drupal-off-canvas b:before,
+    #drupal-off-canvas u:after,
+    #drupal-off-canvas u:before,
+    #drupal-off-canvas i:after,
+    #drupal-off-canvas i:before,
+    #drupal-off-canvas center:after,
+    #drupal-off-canvas center:before,
+    #drupal-off-canvas dl:after,
+    #drupal-off-canvas dl:before,
+    #drupal-off-canvas dt:after,
+    #drupal-off-canvas dt:before,
+    #drupal-off-canvas dd:after,
+    #drupal-off-canvas dd:before,
+    #drupal-off-canvas ol:after,
+    #drupal-off-canvas ol:before,
+    #drupal-off-canvas ul:after,
+    #drupal-off-canvas ul:before,
+    #drupal-off-canvas li:after,
+    #drupal-off-canvas li:before,
+    #drupal-off-canvas fieldset:after,
+    #drupal-off-canvas fieldset:before,
+    #drupal-off-canvas form:after,
+    #drupal-off-canvas form:before,
+    #drupal-off-canvas label:after,
+    #drupal-off-canvas label:before,
+    #drupal-off-canvas legend:after,
+    #drupal-off-canvas legend:before,
+    #drupal-off-canvas table:after,
+    #drupal-off-canvas table:before,
+    #drupal-off-canvas caption:after,
+    #drupal-off-canvas caption:before,
+    #drupal-off-canvas tbody:after,
+    #drupal-off-canvas tbody:before,
+    #drupal-off-canvas tfoot:after,
+    #drupal-off-canvas tfoot:before,
+    #drupal-off-canvas thead:after,
+    #drupal-off-canvas thead:before,
+    #drupal-off-canvas tr:after,
+    #drupal-off-canvas tr:before,
+    #drupal-off-canvas th:after,
+    #drupal-off-canvas th:before,
+    #drupal-off-canvas td:after,
+    #drupal-off-canvas td:before,
+    #drupal-off-canvas article:after,
+    #drupal-off-canvas article:before,
+    #drupal-off-canvas aside:after,
+    #drupal-off-canvas aside:before,
+    #drupal-off-canvas canvas:after,
+    #drupal-off-canvas canvas:before,
+    #drupal-off-canvas details:after,
+    #drupal-off-canvas details:before,
+    #drupal-off-canvas embed:after,
+    #drupal-off-canvas embed:before,
+    #drupal-off-canvas figure:after,
+    #drupal-off-canvas figure:before,
+    #drupal-off-canvas figcaption:after,
+    #drupal-off-canvas figcaption:before,
+    #drupal-off-canvas footer:after,
+    #drupal-off-canvas footer:before,
+    #drupal-off-canvas header:after,
+    #drupal-off-canvas header:before,
+    #drupal-off-canvas hgroup:after,
+    #drupal-off-canvas hgroup:before,
+    #drupal-off-canvas menu:after,
+    #drupal-off-canvas menu:before,
+    #drupal-off-canvas nav:after,
+    #drupal-off-canvas nav:before,
+    #drupal-off-canvas output:after,
+    #drupal-off-canvas output:before,
+    #drupal-off-canvas ruby:after,
+    #drupal-off-canvas ruby:before,
+    #drupal-off-canvas section:after,
+    #drupal-off-canvas section:before,
+    #drupal-off-canvas summary:after,
+    #drupal-off-canvas summary:before,
+    #drupal-off-canvas time:after,
+    #drupal-off-canvas time:before,
+    #drupal-off-canvas mark:after,
+    #drupal-off-canvas mark:before,
+    #drupal-off-canvas audio:after,
+    #drupal-off-canvas audio:before,
+    #drupal-off-canvas video:after,
+    #drupal-off-canvas video:before,
+    #drupal-off-canvas input:after,
+    #drupal-off-canvas input:before,
+    #drupal-off-canvas textarea:after,
+    #drupal-off-canvas textarea:before {
+      animation: none 0s ease 0s 1 normal none running;
+      -webkit-backface-visibility: visible;
+      backface-visibility: visible;
+      background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
+      border: medium none currentColor;
+      border-collapse: separate;
+      -o-border-image: none;
+      border-image: none;
+      border-radius: 0;
+      border-spacing: 0;
+      bottom: auto;
+      box-shadow: none;
+      box-sizing: content-box;
+      caption-side: top;
+      clear: none;
+      clip: auto;
+      color: #000;
+      columns: auto;
+      column-count: auto;
+      column-fill: balance;
+      grid-column-gap: normal;
+      column-rule: medium none currentColor;
+      column-span: 1;
+      column-width: auto;
+      content: normal;
+      counter-increment: none;
+      counter-reset: none;
+      cursor: auto;
+      direction: ltr;
+      display: inline;
+      empty-cells: show;
+      float: none;
+      font-family: serif;
+      font-size: medium;
+      font-style: normal;
+      font-feature-settings: normal;
+      font-variant: normal;
+      font-weight: normal;
+      font-stretch: normal;
+      line-height: normal;
+      height: auto;
+      -webkit-hyphens: none;
+      -ms-hyphens: none;
+      hyphens: none;
+      left: auto;
+      letter-spacing: normal;
+      list-style: disc outside none;
+      margin: 0;
+      max-height: none;
+      max-width: none;
+      min-height: 0;
+      min-width: 0;
+      opacity: 1;
+      orphans: 2;
+      outline: medium none invert;
+      overflow: visible;
+      overflow-x: visible;
+      overflow-y: visible;
+      padding: 0;
+      page-break-after: auto;
+      page-break-before: auto;
+      page-break-inside: auto;
+      perspective: none;
+      perspective-origin: 50% 50%;
+      position: static;
+      right: auto;
+      -moz-tab-size: 8;
+      -o-tab-size: 8;
+      tab-size: 8;
+      table-layout: auto;
+      text-align: left;
+      text-align-last: auto;
+      text-decoration: none;
+      text-indent: 0;
+      text-shadow: none;
+      text-transform: none;
+      top: auto;
+      transform: none;
+      transform-origin: 50% 50% 0;
+      transform-style: flat;
+      transition: none 0s ease 0s;
+      unicode-bidi: normal;
+      vertical-align: baseline;
+      visibility: visible;
+      white-space: normal;
+      widows: 2;
+      width: auto;
+      word-spacing: normal;
+      z-index: auto;
+      all: initial;
+      box-sizing: border-box;
+      text-shadow: none;
+      -webkit-font-smoothing: antialiased;
+      -webkit-tap-highlight-color: initial;
+    }
 
 /* Reset size and position on elements. */
+
 #drupal-off-canvas a,
 #drupal-off-canvas abbr,
 #drupal-off-canvas acronym,
@@ -115,6 +545,7 @@
  * Override the default (display: inline) for browsers that do not recognize HTML5 tags.
  * IE8 (and lower) requires a shiv: http://ejohn.org/blog/html5-shiv
  */
+
 #drupal-off-canvas article,
 #drupal-off-canvas aside,
 #drupal-off-canvas figcaption,
@@ -136,6 +567,7 @@
  * IE + Opera = font-weight: bold.
  * Gecko + WebKit = font-weight: bolder.
  */
+
 #drupal-off-canvas b,
 #drupal-off-canvas strong {
   font-weight: bold;
@@ -158,10 +590,12 @@
 }
 
 /* reset table styling. */
+
 #drupal-off-canvas table {
   border-spacing: 0;
   border-collapse: collapse;
 }
+
 #drupal-off-canvas table thead,
 #drupal-off-canvas table tbody,
 #drupal-off-canvas table tbody tr:nth-child(even),
@@ -170,32 +604,39 @@
   border: 0;
   background: transparent none;
 }
+
 #drupal-off-canvas th,
 #drupal-off-canvas td,
 #drupal-off-canvas caption {
   font-weight: normal;
 }
+
 #drupal-off-canvas q {
   quotes: none;
 }
+
 #drupal-off-canvas q:before,
 #drupal-off-canvas q:after {
   content: none;
 }
+
 #drupal-off-canvas sub,
 #drupal-off-canvas sup,
 #drupal-off-canvas small {
   font-size: 75%;
 }
+
 #drupal-off-canvas sub,
 #drupal-off-canvas sup {
   position: relative;
   vertical-align: baseline;
   line-height: 0;
 }
+
 #drupal-off-canvas sub {
   bottom: -0.25em;
 }
+
 #drupal-off-canvas sup {
   top: -0.5em;
 }
@@ -204,23 +645,28 @@
  * For IE9. Without, occasionally draws shapes
  * outside the boundaries of <svg> rectangle.
  */
+
 #drupal-off-canvas svg {
   overflow: hidden;
 }
 
 /* Specific resets for inputs. */
+
 #drupal-off-canvas input[type="search"]::-webkit-search-decoration {
   display: none;
 }
+
 #drupal-off-canvas input {
   margin: 0;
   padding: 0;
 }
+
 #drupal-off-canvas input[type="checkbox"],
 #drupal-off-canvas input[type="radio"] {
   position: static;
   margin: 0;
 }
+
 #drupal-off-canvas input:invalid,
 #drupal-off-canvas button:invalid,
 #drupal-off-canvas select:invalid,
@@ -238,9 +684,11 @@
   z-index: 1;
   box-shadow: none;
 }
+
 #drupal-off-canvas input[role="button"] {
   cursor: pointer;
 }
+
 #drupal-off-canvas button,
 #drupal-off-canvas input[type="reset"],
 #drupal-off-canvas input[type="submit"],
@@ -257,6 +705,7 @@
   -webkit-appearance: none;
   -moz-appearance: none;
 }
+
 #drupal-off-canvas button:hover,
 #drupal-off-canvas input[type="reset"]:hover,
 #drupal-off-canvas input[type="submit"]:hover,
@@ -264,6 +713,7 @@
   text-decoration: none;
   background-image: none;
 }
+
 #drupal-off-canvas button:active,
 #drupal-off-canvas input[type="reset"]:active,
 #drupal-off-canvas input[type="submit"]:active,
@@ -272,6 +722,7 @@
   background-image: none;
   box-shadow: none;
 }
+
 #drupal-off-canvas button::-moz-focus-inner,
 #drupal-off-canvas input[type="reset"]::-moz-focus-inner,
 #drupal-off-canvas input[type="submit"]::-moz-focus-inner,
@@ -279,6 +730,7 @@
   padding: 0;
   border: 0;
 }
+
 #drupal-off-canvas textarea,
 #drupal-off-canvas select,
 #drupal-off-canvas input[type="date"],
@@ -298,6 +750,7 @@
   vertical-align: middle;
   border-radius: 0;
 }
+
 #drupal-off-canvas textarea[disabled],
 #drupal-off-canvas select[disabled],
 #drupal-off-canvas input[type="date"][disabled],
@@ -315,9 +768,11 @@
 #drupal-off-canvas input[type="week"][disabled] {
   background-color: gray;
 }
+
 #drupal-off-canvas input[type="hidden"] {
   visibility: hidden;
 }
+
 #drupal-off-canvas button[disabled],
 #drupal-off-canvas input[disabled],
 #drupal-off-canvas select[disabled],
@@ -326,39 +781,45 @@
 #drupal-off-canvas textarea[disabled] {
   cursor: default;
   -webkit-user-select: none;
-  -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   box-shadow: none;
 }
+
 #drupal-off-canvas input:placeholder,
 #drupal-off-canvas textarea:placeholder {
   color: gray;
 }
+
 #drupal-off-canvas textarea,
 #drupal-off-canvas select[size],
 #drupal-off-canvas select[multiple] {
   height: auto;
 }
+
 #drupal-off-canvas select[size="0"],
 #drupal-off-canvas select[size="1"] {
   height: auto;
 }
+
 #drupal-off-canvas textarea {
   overflow: auto;
   width: 100%;
-  min-height: 40px;
+  min-height: 2.5rem;
   resize: vertical;
 }
+
 #drupal-off-canvas optgroup {
   color: black;
   font-weight: normal;
   font-style: normal;
 }
+
 #drupal-off-canvas optgroup::-moz-focus-inner {
   padding: 0;
   border: 0;
 }
+
 #drupal-off-canvas * button {
   overflow: visible;
   width: auto;
@@ -369,6 +830,7 @@
   border: 1px solid gray;
   background: none;
 }
+
 #drupal-off-canvas * textarea,
 #drupal-off-canvas * select,
 #drupal-off-canvas *:not(div) textarea,
diff --git a/core/themes/stable/css/core/dialog/off-canvas.reset.css b/core/themes/stable9/css/core/dialog/off-canvas.reset.pcss.css
similarity index 88%
copy from core/themes/stable/css/core/dialog/off-canvas.reset.css
copy to core/themes/stable9/css/core/dialog/off-canvas.reset.pcss.css
index 0863d06c54..db849e2e2c 100644
--- a/core/themes/stable/css/core/dialog/off-canvas.reset.css
+++ b/core/themes/stable9/css/core/dialog/off-canvas.reset.pcss.css
@@ -9,15 +9,102 @@
  * Do not include div in then initial overrides because including div will
  * cause the need for many more overrides in this file.
  */
-#drupal-off-canvas *:not(div),
-#drupal-off-canvas *:not(svg *),
-#drupal-off-canvas *:after,
-#drupal-off-canvas *:before {
-  all: initial;
-  box-sizing: border-box;
-  text-shadow: none;
-  -webkit-font-smoothing: antialiased;
-  -webkit-tap-highlight-color: initial;
+#drupal-off-canvas {
+  & span,
+  & applet,
+  & object,
+  & iframe,
+  & h1,
+  & h2,
+  & h3,
+  & h4,
+  & h5,
+  & h6,
+  & p,
+  & blockquote,
+  & pre,
+  & a,
+  & abbr,
+  & acronym,
+  & address,
+  & big,
+  & cite,
+  & code,
+  & del,
+  & dfn,
+  & em,
+  & img,
+  & ins,
+  & kbd,
+  & q,
+  & s,
+  & samp,
+  & small,
+  & strike,
+  & strong,
+  & sub,
+  & sup,
+  & tt,
+  & var,
+  & b,
+  & u,
+  & i,
+  & center,
+  & dl,
+  & dt,
+  & dd,
+  & ol,
+  & ul,
+  & li,
+  & fieldset,
+  & form,
+  & label,
+  & legend,
+  & table,
+  & caption,
+  & tbody,
+  & tfoot,
+  & thead,
+  & tr,
+  & th,
+  & td,
+  & article,
+  & aside,
+  & canvas,
+  & details,
+  & embed,
+  & figure,
+  & figcaption,
+  & footer,
+  & header,
+  & hgroup,
+  & menu,
+  & nav,
+  & output,
+  & ruby,
+  & section,
+  & summary,
+  & time,
+  & mark,
+  & audio,
+  & video,
+  & input,
+  & textarea {
+    all: initial;
+    box-sizing: border-box;
+    text-shadow: none;
+    -webkit-font-smoothing: antialiased;
+    -webkit-tap-highlight-color: initial;
+
+    &:after,
+    &:before {
+      all: initial;
+      box-sizing: border-box;
+      text-shadow: none;
+      -webkit-font-smoothing: antialiased;
+      -webkit-tap-highlight-color: initial;
+    }
+  }
 }
 
 /* Reset size and position on elements. */