Issue #3291797 by mherchel, andy-blum, lauriii, xjm, catch: Refactor Drupal...

Issue #3291797 by mherchel, andy-blum, lauriii, xjm, catch:  Refactor Drupal 10 settings tray / off-canvas to use modern CSS

core/.stylelintignore

@@ -2,8 +2,12 @@ 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
+misc/dialog/off-canvas/css/**/*.css
+!misc/dialog/off-canvas/css/**/*.pcss.css
+modules/layout_builder/css/**/*.css
+!modules/layout_builder/css/**/*.pcss.css
+modules/workspaces/css/**/*.css
+!modules/workspaces/css/**/*.pcss.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

core/core.libraries.yml

@@ -913,24 +913,24 @@ internal.underscore:
 drupal.dialog.off_canvas:
   version: VERSION
   js:
-    misc/dialog/off-canvas.js: {}
+    misc/dialog/off-canvas/js/off-canvas.js: {}
   css:
     base:
-      misc/dialog/off-canvas.reset.css: {}
-      misc/dialog/off-canvas.base.css: {}
-      misc/dialog/off-canvas.css: {}
-      # Add group setting to make sure this CSS load before any jQuery UI Dialog
-      # CSS.
-      misc/dialog/off-canvas.theme.css: { group: 200 }
+      misc/dialog/off-canvas/css/reset.css: {}
+      misc/dialog/off-canvas/css/base.css: {}
+      misc/dialog/off-canvas/css/utility.css: {}
     component:
-      misc/dialog/off-canvas.motion.css: {}
-      misc/dialog/off-canvas.button.css: {}
-      misc/dialog/off-canvas.form.css: {}
-      misc/dialog/off-canvas.table.css: {}
-      misc/dialog/off-canvas.details.css: {}
-      misc/dialog/off-canvas.tabledrag.css: {}
-      misc/dialog/off-canvas.dropbutton.css: {}
-      misc/dialog/off-canvas.layout.css: {}
+      misc/dialog/off-canvas/css/button.css: {}
+      misc/dialog/off-canvas/css/drupal.css: {}
+      misc/dialog/off-canvas/css/form.css: {}
+      misc/dialog/off-canvas/css/table.css: {}
+      misc/dialog/off-canvas/css/details.css: {}
+      misc/dialog/off-canvas/css/messages.css: {}
+      misc/dialog/off-canvas/css/tabledrag.css: {}
+      misc/dialog/off-canvas/css/throbber.css: {}
+      misc/dialog/off-canvas/css/dropbutton.css: {}
+      misc/dialog/off-canvas/css/titlebar.css: {}
+      misc/dialog/off-canvas/css/wrapper.css: {}
   dependencies:
     - core/jquery
     - core/once

core/lib/Drupal/Core/Ajax/OpenOffCanvasDialogCommand.php

@@ -51,6 +51,10 @@ public function __construct($title, $content, array $dialog_options = [], $setti
     if (empty($dialog_options['dialogClass'])) {
       $this->dialogOptions['dialogClass'] = "ui-dialog-off-canvas ui-dialog-position-$position";
     }
+    // Add CSS class to #drupal-off-canvas element. This enables developers to
+    // select previous versions of off-canvas styles by using custom selector:
+    // #drupal-off-canvas:not(.drupal-off-canvas-reset).
+    $this->dialogOptions['classes']['ui-dialog-content'] = 'drupal-off-canvas-reset';
     // If no width option is provided then use the default width to avoid the
     // dialog staying at the width of the previous instance when opened
     // more than once, with different widths, on a single page.

core/misc/dialog/off-canvas.base.css

-/*
- * 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 {
-  color: #ddd;
-  background: #444;
-}
-
-/**
- * All HTML elements that could be used in off-canvas except div, bdo, bdi,
- * data, svg, map and math.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
- */
-
-#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 button,
-  #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 main,
-  #drupal-off-canvas menu,
-  #drupal-off-canvas meter,
-  #drupal-off-canvas nav,
-  #drupal-off-canvas output,
-  #drupal-off-canvas progress,
-  #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 select,
-  #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;
-  border-bottom: none;
-  font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
-  font-size: inherit;
-  font-weight: normal;
-}
-
-#drupal-off-canvas a:focus,
-#drupal-off-canvas .link:focus,
-#drupal-off-canvas a:hover,
-#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;
-  font-size: 1.625em;
-  font-weight: bold;
-  line-height: 1.875em;
-}
-
-#drupal-off-canvas h2,
-#drupal-off-canvas .heading-b {
-  display: block;
-  margin: 0.625rem 0;
-  font-size: 1.385em;
-  font-weight: bold;
-}
-
-#drupal-off-canvas h3,
-#drupal-off-canvas .heading-c {
-  display: block;
-  margin: 0.625rem 0;
-  font-size: 1.231em;
-  font-weight: bold;
-}
-
-#drupal-off-canvas h4,
-#drupal-off-canvas .heading-d {
-  display: block;
-  margin: 0.625rem 0;
-  font-size: 1.154em;
-  font-weight: bold;
-}
-
-#drupal-off-canvas h5,
-#drupal-off-canvas .heading-e {
-  display: block;
-  margin: 0.625rem 0;
-  font-size: 1.077em;
-  font-weight: bold;
-}
-
-#drupal-off-canvas h6,
-#drupal-off-canvas .heading-f {
-  display: block;
-  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 1.25rem;
-}
-
-#drupal-off-canvas dl dd,
-#drupal-off-canvas dl dl {
-  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: 1.25rem;
-}
-
-#drupal-off-canvas blockquote {
-  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;
-  background: transparent;
-}
-
-#drupal-off-canvas ul {
-  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;
-  padding: 0.3125rem 0;
-  border-bottom: 1px solid #333
-}
-
-#drupal-off-canvas ul li:last-child, #drupal-off-canvas ol li:last-child {
-    padding-bottom: 0;
-    border-bottom: none;
-  }
-
-#drupal-off-canvas blockquote,
-#drupal-off-canvas code {
-  margin: 1.25rem 0;
-}
-
-#drupal-off-canvas pre {
-  margin: 1.25rem 0;
-  white-space: pre-wrap;
-}
-
-#drupal-off-canvas details {
-  display: block;
-}
-
-#drupal-off-canvas summary {
-  display: list-item;
-}
-
-#drupal-off-canvas select::-ms-expand {
-  display: block;
-}
-
-/* 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;
-  clip: rect(1px, 1px, 1px, 1px);
-  width: 1px;
-  height: 1px;
-  word-wrap: normal;
-}
-
-#drupal-off-canvas .visually-hidden.focusable:active,
-#drupal-off-canvas .visually-hidden.focusable:focus {
-  position: static !important;
-  overflow: visible;
-  clip: auto;
-  width: auto;
-  height: auto;
-}
-
-#drupal-off-canvas .invisible {
-  visibility: hidden;
-}
-
-/* Some system classes. See system.admin.css. */
-
-#drupal-off-canvas .panel {
-  padding: 0.3125rem 0.3125rem 0.9375rem;
-}
-
-#drupal-off-canvas .panel__description {
-  margin: 0 0 0.1875rem;
-  padding: 2px 0 0.1875rem 0;
-}
-
-#drupal-off-canvas .compact-link {
-  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 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("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("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("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"] {
-  color: inherit;
-  background: transparent;
-}

core/misc/dialog/off-canvas.base.pcss.css

-/**
- * @file
- * Set base styles for the off-canvas dialog.
- */
-
-/* Set some global attributes. */
-#drupal-off-canvas {
-  color: #ddd;
-  background: #444;
-}
-/**
- * All HTML elements that could be used in off-canvas except div, bdo, bdi,
- * data, svg, map and math.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
- */
-#drupal-off-canvas {
-  & span,
-  & applet,
-  & object,
-  & iframe,
-  & h1,
-  & h2,
-  & h3,
-  & h4,
-  & h5,
-  & h6,
-  & p,
-  & blockquote,
-  & pre,
-  & a,
-  & abbr,
-  & acronym,
-  & address,
-  & big,
-  & button,
-  & 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,
-  & main,
-  & menu,
-  & meter,
-  & nav,
-  & output,
-  & progress,
-  & ruby,
-  & section,
-  & summary,
-  & time,
-  & mark,
-  & audio,
-  & video,
-  & input,
-  & select,
-  & 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;
-  border-bottom: none;
-  font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
-  font-size: inherit;
-  font-weight: normal;
-}
-
-#drupal-off-canvas a:focus,
-#drupal-off-canvas .link:focus,
-#drupal-off-canvas a:hover,
-#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;
-  font-size: 1.625em;
-  font-weight: bold;
-  line-height: 1.875em;
-}
-#drupal-off-canvas h2,
-#drupal-off-canvas .heading-b {
-  display: block;
-  margin: 10px 0;
-  font-size: 1.385em;
-  font-weight: bold;
-}
-#drupal-off-canvas h3,
-#drupal-off-canvas .heading-c {
-  display: block;
-  margin: 10px 0;
-  font-size: 1.231em;
-  font-weight: bold;
-}
-#drupal-off-canvas h4,
-#drupal-off-canvas .heading-d {
-  display: block;
-  margin: 10px 0;
-  font-size: 1.154em;
-  font-weight: bold;
-}
-#drupal-off-canvas h5,
-#drupal-off-canvas .heading-e {
-  display: block;
-  margin: 10px 0;
-  font-size: 1.077em;
-  font-weight: bold;
-}
-#drupal-off-canvas h6,
-#drupal-off-canvas .heading-f {
-  display: block;
-  margin: 10px 0;
-  font-size: 1.077em;
-  font-weight: bold;
-}
-#drupal-off-canvas p {
-  margin: 1em 0;
-}
-#drupal-off-canvas dl {
-  margin: 0 0 20px;
-}
-#drupal-off-canvas dl dd,
-#drupal-off-canvas dl dl {
-  margin-bottom: 10px;
-  margin-left: 20px; /* LTR */
-}
-[dir="rtl"] #drupal-off-canvas dl dd,
-[dir="rtl"] #drupal-off-canvas dl dl {
-  margin-right: 20px;
-}
-#drupal-off-canvas blockquote {
-  margin: 1em 40px;
-}
-#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;
-  background: transparent;
-}
-
-#drupal-off-canvas ul {
-  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;
-  padding: 5px 0;
-  border-bottom: 1px solid #333;
-  &:last-child {
-    padding-bottom: 0;
-    border-bottom: none;
-  }
-}
-#drupal-off-canvas blockquote,
-#drupal-off-canvas code {
-  margin: 20px 0;
-}
-#drupal-off-canvas pre {
-  margin: 20px 0;
-  white-space: pre-wrap;
-}
-#drupal-off-canvas details {
-  display: block;
-}
-#drupal-off-canvas summary {
-  display: list-item;
-}
-
-#drupal-off-canvas select::-ms-expand {
-  display: block;
-}
-
-/* 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;
-  clip: rect(1px, 1px, 1px, 1px);
-  width: 1px;
-  height: 1px;
-  word-wrap: normal;
-}
-#drupal-off-canvas .visually-hidden.focusable:active,
-#drupal-off-canvas .visually-hidden.focusable:focus {
-  position: static !important;
-  overflow: visible;
-  clip: auto;
-  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;
-}
-#drupal-off-canvas .panel__description {
-  margin: 0 0 3px;
-  padding: 2px 0 3px 0;
-}
-#drupal-off-canvas .compact-link {
-  margin: 0 0 10px 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;
-}
-[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);
-}
-#drupal-off-canvas .messages--warning {
-  color: #734c00;
-  background-color: #fdf8ed;
-  background-image: url(../icons/e29700/warning.svg);
-}
-
-#drupal-off-canvas .messages--error {
-  color: #a51b00;
-  background-color: #fcf4f2;
-  background-image: url(../icons/e32700/error.svg);
-}
-
-#drupal-off-canvas .messages--error div[role="alert"] {
-  color: inherit;
-  background: transparent;
-}

core/misc/dialog/off-canvas.button.css

-/**
- * @file
- * Visual styling for buttons in the off-canvas dialog.
- */
-
-#drupal-off-canvas button,
-#drupal-off-canvas .button {
-  margin: 0 0 10px;
-  padding: 0;
-  cursor: pointer;
-  text-decoration: none;
-  text-transform: none;
-  border: 0;
-  box-shadow: none;
-  font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
-  line-height: normal;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-}
-#drupal-off-canvas button.link {
-  display: inline;
-  transition: color 0.5s ease;
-  color: #85bef4;
-  background: transparent;
-  font-size: 14px;
-}
-#drupal-off-canvas button.link:hover,
-#drupal-off-canvas button.link:focus {
-  text-decoration: none;
-  color: #46a0f5;
-}
-#drupal-off-canvas input[type="submit"].button {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  height: auto;
-  padding: 4px 20px;
-  cursor: pointer;
-  transition: background 0.5s ease;
-  text-align: center;
-  color: #f5f5f5;
-  border: 0;
-  border-radius: 20em;
-  background: #777;
-  font-size: 14px;
-  font-weight: 600;
-}
-#drupal-off-canvas input[type="submit"].button:hover,
-#drupal-off-canvas input[type="submit"].button:focus,
-#drupal-off-canvas input[type="submit"].button:active {
-  z-index: 10;
-  text-decoration: none;
-  color: #fff;
-  border: 0;
-  outline: none;
-}
-#drupal-off-canvas input[type="submit"].button:focus,
-#drupal-off-canvas input[type="submit"].button:active {
-  box-shadow: 0 3px 3px 2px rgba(0, 0, 0, 0.1);
-}
-#drupal-off-canvas input[type="submit"].button--primary {
-  margin-top: 15px;
-  color: #fff;
-  border: 0;
-  background: #277abd;
-}
-#drupal-off-canvas input[type="submit"].button--primary:hover,
-#drupal-off-canvas input[type="submit"].button--primary:focus,
-#drupal-off-canvas input[type="submit"].button--primary:active {
-  outline: none;
-  background: #236aaf;
-}
-#drupal-off-canvas .button-action:before {
-  margin-left: -0.2em; /* LTR */
-  padding-right: 0.2em; /* LTR */
-  font-size: 14px;
-  line-height: 16px;
-}
-[dir="rtl"] #drupal-off-canvas .button-action:before {
-  margin-right: -0.2em;
-  margin-left: 0;
-  padding-right: 0;
-  padding-left: 0.2em;
-}
-#drupal-off-canvas .no-touchevents .button--small {
-  padding: 2px 1em;
-  font-size: 13px;
-}
-#drupal-off-canvas .button:disabled,
-#drupal-off-canvas .button:disabled:active,
-#drupal-off-canvas .button.is-disabled,
-#drupal-off-canvas .button.is-disabled:active {
-  cursor: default;
-  color: #5c5c5c;
-  border: 0;
-  background: #555;
-  font-weight: normal;
-}
-#drupal-off-canvas .button--danger {
-  text-decoration: none;
-  color: #c72100;
-  border-radius: 0;
-  font-weight: 400;
-}
-#drupal-off-canvas .button--danger:hover,
-#drupal-off-canvas .button--danger:focus,
-#drupal-off-canvas .button--danger:active {
-  text-decoration: none;
-  color: #ff2a00;
-  text-shadow: none;
-}
-#drupal-off-canvas .button--danger:disabled,
-#drupal-off-canvas .button--danger.is-disabled {
-  cursor: default;
-  color: #737373;
-}

core/misc/dialog/off-canvas.css

-/**
- * @file
- * CSS for off-canvas dialog.
- */
-
-/* Position the off-canvas dialog container outside the right of the viewport. */
-.ui-dialog-off-canvas {
-  overflow: visible;
-  box-sizing: border-box;
-  height: 100%;
-}
-
-/* Wrap the form that's inside the off-canvas dialog. */
-.ui-dialog-off-canvas .ui-dialog-content {
-  /* Prevent horizontal scrollbar. */
-  overflow-x: hidden;
-  overflow-y: auto;
-  padding: 0 20px;
-}
-[dir="rtl"] .ui-dialog-off-canvas .ui-dialog-content {
-  text-align: right;
-}
-
-/* Position the off-canvas dialog container outside the right of the viewport. */
-.ui-dialog-off-canvas {
-  overflow: visible;
-  box-sizing: border-box;
-  height: 100%;
-}
-
-/* Wrap the form that's inside the off-canvas dialog. */
-.ui-dialog-off-canvas #drupal-off-canvas {
-  /* Prevent horizontal scrollbar. */
-  overflow-x: hidden;
-  overflow-y: auto;
-  padding: 0 20px 20px;
-}
-[dir="rtl"] .ui-dialog-off-canvas #drupal-off-canvas {
-  text-align: right;
-}
-
-/*
- * Force the off-canvas dialog to be 100% width at the same breakpoint the
- * dialog system uses to expand dialog widths.
- */
-@media all and (max-width: 48em) { /* 768px */
-  .ui-dialog.ui-dialog-off-canvas {
-    width: 100% !important;
-  }
-  /* When off-canvas dialog is at 100% width stop the body from scrolling */
-  .js-off-canvas-dialog-open {
-    overflow-y: hidden;
-    height: 100%;
-  }
-}

core/misc/dialog/off-canvas.details.css

-/**
- * @file
- * Visual styling for summary and details in the off-canvas dialog.
- */
-
-#drupal-off-canvas details {
-  display: block;
-}
-#drupal-off-canvas details,
-#drupal-off-canvas summary {
-  font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
-}
-#drupal-off-canvas details,
-#drupal-off-canvas summary,
-#drupal-off-canvas .ui-dialog-content {
-  color: #ddd;
-  background: #474747;
-}
-#drupal-off-canvas summary a {
-  padding-top: 0;
-  padding-bottom: 0;
-  color: #ddd;
-}
-#drupal-off-canvas summary a:hover,
-#drupal-off-canvas summary a:focus {
-  color: #fff;
-}
-#drupal-off-canvas details,
-#drupal-off-canvas summary,
-#drupal-off-canvas .details-wrapper {
-  /* Cancel out the padding of the parent. */
-  margin: 0 -20px;
-  padding: 0 20px;
-  border-width: 0;
-}
-#drupal-off-canvas summary {
-  padding: 10px 20px;
-  transition: all 0.5s ease;
-  text-shadow: none;
-  font-size: 14px;
-}
-#drupal-off-canvas summary:hover,
-#drupal-off-canvas summary:focus {
-  background-color: #222;
-}
-#drupal-off-canvas details[open] {
-  padding-bottom: 10px;
-}
-#drupal-off-canvas details[open] > summary {
-  color: #eee;
-  background-color: #333;
-}
-#drupal-off-canvas details[open] > summary:hover {
-  color: #fff;
-  background-color: #222;
-}
-#drupal-off-canvas details .placeholder {
-  color: inherit;
-  background: transparent;
-  font: inherit;
-  font-style: italic;
-}

core/misc/dialog/off-canvas.dropbutton.css

-/**
- * @file
- * Styles for dropbuttons in the off-canvas dialog.
- */
-
-#drupal-off-canvas .dropbutton-wrapper,
-#drupal-off-canvas .dropbutton-widget {
-  position: static;
-  display: block;
-  transition: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-}
-#drupal-off-canvas .dropbutton-widget {
-  margin: 0;
-  padding: 0;
-  cursor: pointer;
-  transition: background 0.5s ease;
-  text-align: center;
-  text-decoration: none;
-  text-transform: none;
-  color: #fff;
-  border: 0;
-  border-radius: 1em;
-  background: #277abd;
-  font-weight: 600;
-  line-height: normal;
-}
-#drupal-off-canvas .dropbutton-widget:hover {
-  background: #2b8bd8;
-}
-
-/*
- * Style dropbutton single.
- */
-
-#drupal-off-canvas .dropbutton-single .dropbutton-action a {
-  height: 2.2em;
-  /* Overlap icon for trigger. */
-  margin-top: -2em;
-  padding: 0;
-  cursor: pointer;
-}
-#drupal-off-canvas .dropbutton-single .dropbutton-action:hover,
-#drupal-off-canvas .dropbutton-single .dropbutton-action:focus,
-#drupal-off-canvas .dropbutton-single .dropbutton-action a:hover,
-#drupal-off-canvas .dropbutton-single .dropbutton-action a:focus {
-  text-decoration: none;
-  outline: none;
-}
-#drupal-off-canvas .dropbutton-widget .dropbutton {
-  overflow: hidden;
-  margin: 0;
-  padding: 0;
-}
-#drupal-off-canvas .dropbutton li,
-#drupal-off-canvas .dropbutton a {
-  display: block;
-  width: auto;
-  padding: 4px 0;
-  text-align: left;
-  color: #555;
-  outline: none;
-}
-#drupal-off-canvas .dropbutton li:hover,
-#drupal-off-canvas .dropbutton li:focus,
-#drupal-off-canvas .dropbutton a:hover,
-#drupal-off-canvas .dropbutton a:focus {
-  color: #333;
-  outline: none;
-  background: transparent;
-}
-
-/*
- * Style dropbutton multiple.
- */
-
-#drupal-off-canvas .dropbutton-multiple .dropbutton-widget {
-  width: 2em;
-  height: 2em;
-}
-#drupal-off-canvas .dropbutton-multiple .dropbutton-widget:hover {
-  background-color: #2b8bd8;
-}
-
-/* Hide the other actions until the dropbutton is triggered. */
-#drupal-off-canvas .dropbutton-multiple .dropbutton .secondary-action {
-  display: none;
-}
-
-/* The toggle to expand the button. */
-#drupal-off-canvas .dropbutton-toggle {
-  position: absolute;
-  top: 0;
-  right: 0; /* LTR */
-  bottom: 0;
-  display: block;
-  width: 2em;
-  white-space: nowrap;
-  text-indent: 110%;
-  color: #fff;
-}
-#drupal-off-canvas .dropbutton-toggle button {
-  display: block;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  cursor: pointer;
-  border: 0 solid transparent;
-  border-top-right-radius: 1em; /* LTR */
-  border-bottom-right-radius: 1em; /* LTR */
-}
-#drupal-off-canvas .dropbutton-toggle button:hover,
-#drupal-off-canvas .dropbutton-toggle button:focus {
-  outline: none;
-}
-
-/* The toggle arrow. */
-#drupal-off-canvas .dropbutton-arrow {
-  position: absolute;
-  display: block;
-  overflow: hidden;
-  width: 0;
-  height: 0;
-  margin-top: 0;
-  color: #fff;
-  border-width: 0.3333em 0.3333em 0;
-  border-style: solid;
-  border-right-color: transparent;
-  border-bottom-color: transparent;
-  border-left-color: transparent;
-  line-height: 0;
-}
-#drupal-off-canvas span.dropbutton-arrow {
-  top: 7px;
-  right: 7px; /* LTR */
-  background: transparent;
-}
-#drupal-off-canvas span.dropbutton-arrow:hover {
-  background: transparent;
-}
-
-#drupal-off-canvas .dropbutton-action > .js-form-submit.form-submit,
-#drupal-off-canvas .dropbutton-toggle button {
-  position: relative;
-  text-shadow: none;
-}
-
-/*
- * Dropbuttons when in a table cell.
- */
-
-/* Make sure table cell doesn't collapse around absolute positioned dropbutton. */
-#drupal-off-canvas td .dropbutton-single {
-  min-width: 2em;
-}
-#drupal-off-canvas td .dropbutton-multiple {
-  min-width: 2em;
-  margin-right: 0;
-  margin-left: 0;
-  padding-right: 0;
-  padding-left: 0;
-  border: 0;
-}
-#drupal-off-canvas td .dropbutton-multiple .dropbutton-action a,
-#drupal-off-canvas td .dropbutton-multiple .dropbutton-action input,
-#drupal-off-canvas td .dropbutton-multiple .dropbutton-action button {
-  width: auto;
-  padding: 0;
-  font-size: inherit;
-}
-#drupal-off-canvas td .dropbutton-wrapper {
-  margin-bottom: 0;
-}
-
-/* Push the widget to the right so text expands left. */
-#drupal-off-canvas td .dropbutton-widget {
-  position: absolute;
-  right: 12px; /* LTR */
-  padding: 0;
-  background: #277abd none;
-}
-
-/* Push the wrapper to the right edge of the td. */
-#drupal-off-canvas td .dropbutton-single,
-#drupal-off-canvas td .dropbutton-multiple {
-  position: relative;
-  float: right; /* LTR */
-  min-width: initial;
-  max-width: initial;
-  margin-right: 0;
-  padding-right: 0;
-}
-#drupal-off-canvas td .dropbutton-widget .dropbutton {
-  overflow: hidden;
-  width: 2em;
-  height: 2em;
-  margin: 0;
-  background: transparent;
-}
-
-/* Push text out of the way. */
-#drupal-off-canvas td .dropbutton-multiple li,
-#drupal-off-canvas td .dropbutton-multiple a {
-  margin-left: -9999px;
-  background: transparent;
-}
-#drupal-off-canvas td .dropbutton-multiple.open .dropbutton li,
-#drupal-off-canvas td .dropbutton-multiple.open .dropbutton a {
-  width: auto;
-  margin-left: 0;
-  color: #fff;
-}
-
-/* Collapse the button to a circle. */
-#drupal-off-canvas td .dropbutton-toggle {
-  width: 2em;
-  height: 2em;
-  border-radius: 1em;
-}
-#drupal-off-canvas td .dropbutton-wrapper .dropbutton-widget .dropbutton-toggle button {
-  border: 0;
-  background: transparent;
-}
-
-/* Prevent list item from expanding its container. */
-#drupal-off-canvas td ul.dropbutton li.edit {
-  width: 2em;
-  height: 2em;
-}
-
-/* Make li text transparent above icon so it's clickable. */
-#drupal-off-canvas td .dropbutton-single li.edit.dropbutton-action > a {
-  z-index: 1;
-  color: transparent;
-}
-
-/* Put pencil icon in place of hidden 'edit' text on single buttons. */
-#drupal-off-canvas td .dropbutton-single .edit:before {
-  display: block;
-  content: ".";
-  color: transparent;
-  background: transparent url(../icons/ffffff/pencil.svg) no-repeat center;
-  background-size: 14px;
-}
-
-/* Dropbutton when triggered expands to show secondary items. */
-#drupal-off-canvas .dropbutton-multiple.open {
-  z-index: 100;
-}
-
-/* Create visual separation if there is an adjacent button. */
-#drupal-off-canvas .dropbutton-multiple.open .dropbutton-widget {
-  box-shadow: 0 3px 3px 2px rgba(0, 0, 0, 0.5);
-}
-
-/* Triggered dropbutton expands to show secondary items. */
-#drupal-off-canvas .dropbutton-multiple.open,
-#drupal-off-canvas .dropbutton-multiple.open .dropbutton-widget {
-  display: block;
-  overflow: visible;
-  width: auto;
-  min-width: 0;
-  max-width: none;
-  height: auto;
-  padding: 0;
-}
-
-/* Triggered dropbutton in td expands to show secondary items. */
-#drupal-off-canvas td .dropbutton-multiple.open .dropbutton,
-#drupal-off-canvas .dropbutton-multiple.open .dropbutton .secondary-action {
-  display: block;
-  width: auto;
-  height: auto;
-  padding-right: 1em; /* LTR */
-}
-[dir="rtl"] #drupal-off-canvas td .dropbutton-multiple.open .dropbutton {
-  padding-right: inherit;
-  padding-left: 1em;
-}
-#drupal-off-canvas .dropbutton-multiple.open .dropbutton li a {
-  padding: 2px 1em;
-}
-
-/* When open, the toggle arrow points upward. */
-#drupal-off-canvas .dropbutton-multiple.open span.dropbutton-arrow {
-  top: 2px;
-  border-top-color: transparent;
-  border-bottom: 0.3333em solid;
-}

core/misc/dialog/off-canvas.form.css

-/**
- * @file
- * Visual styling for forms in the off-canvas dialog.
- */
-
-#drupal-off-canvas form {
-  color: #ddd;
-  font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
-}
-#drupal-off-canvas input[type="checkbox"] {
-  -webkit-appearance: checkbox;
-}
-#drupal-off-canvas input[type="radio"] {
-  -webkit-appearance: radio;
-}
-#drupal-off-canvas select:not([multiple]) {
-  -webkit-appearance: menulist;
-  -moz-appearance: menulist;
-}
-#drupal-off-canvas option {
-  display: block;
-  font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
-}
-#drupal-off-canvas label {
-  color: #ddd;
-  font-family: inherit;
-  font-size: 12px;
-  font-weight: bold;
-  line-height: normal;
-}
-#drupal-off-canvas .visually-hidden {
-  width: 0;
-  height: 0;
-  letter-spacing: -2em;
-  opacity: 0;
-}
-#drupal-off-canvas .description,
-#drupal-off-canvas .form-item .description,
-#drupal-off-canvas .details-description {
-  margin-top: 5px;
-  color: #ddd;
-  font-family: inherit;
-  font-size: 12px;
-  font-style: normal;
-}
-#drupal-off-canvas .form-item {
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-/* Set size and position for all inputs. */
-#drupal-off-canvas .form-select,
-#drupal-off-canvas .form-text,
-#drupal-off-canvas .form-tel,
-#drupal-off-canvas .form-email,
-#drupal-off-canvas .form-url,
-#drupal-off-canvas .form-search,
-#drupal-off-canvas .form-number,
-#drupal-off-canvas .form-color,
-#drupal-off-canvas .form-file,
-#drupal-off-canvas .form-textarea,
-#drupal-off-canvas .form-date,
-#drupal-off-canvas .form-time {
-  display: block;
-  box-sizing: border-box;
-  max-width: 100%;
-  margin: 5px 0 0 0;
-  padding: 6px;
-  color: #333;
-  border-width: 1px;
-  border-radius: 2px;
-  font-family: inherit;
-  font-size: 14px;
-  line-height: 16px;
-}
-/* Reduce contrast for fields against dark background. */
-#drupal-off-canvas .form-text,
-#drupal-off-canvas .form-tel,
-#drupal-off-canvas .form-email,
-#drupal-off-canvas .form-url,
-#drupal-off-canvas .form-search,
-#drupal-off-canvas .form-number,
-#drupal-off-canvas .form-color,
-#drupal-off-canvas .form-file,
-#drupal-off-canvas .form-textarea,
-#drupal-off-canvas .form-date,
-#drupal-off-canvas .form-time {
-  color: #595959;
-  border-color: #333;
-  background-color: #eee;
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.125);
-}
-#drupal-off-canvas .form-text:focus,
-#drupal-off-canvas .form-tel:focus,
-#drupal-off-canvas .form-email:focus,
-#drupal-off-canvas .form-url:focus,
-#drupal-off-canvas .form-search:focus,
-#drupal-off-canvas .form-number:focus,
-#drupal-off-canvas .form-color:focus,
-#drupal-off-canvas .form-file:focus,
-#drupal-off-canvas .form-textarea:focus,
-#drupal-off-canvas .form-date:focus,
-#drupal-off-canvas .form-time:focus {
-  border-color: #40b6ff;
-  background-color: #fff;
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.125), 0 0 8px #40b6ff;
-}
-#drupal-off-canvas td .form-item,
-#drupal-off-canvas td .form-select {
-  margin: 0;
-}
-#drupal-off-canvas .form-file {
-  width: 100%;
-  margin-bottom: 5px;
-}
-#drupal-off-canvas .form-actions {
-  margin: 10px 0;
-  text-align: center;
-}
-#drupal-off-canvas .ui-autocomplete {
-  position: absolute;
-  top: 0;
-  left: 0;
-  cursor: default;
-  background-color: white;
-}
-#drupal-off-canvas .ui-autocomplete li {
-  display: block;
-}
-#drupal-off-canvas .ui-autocomplete li a {
-  padding: 5px;
-  cursor: pointer;
-  color: #595959 !important;
-}

core/misc/dialog/off-canvas.layout.css

-/**
- * @file
- * Visual styling for layouts in the off-canvas dialog.
- */
-
-.layout-icon__region {
-  fill: #f5f5f2;
-  stroke: #666;
-}

core/misc/dialog/off-canvas.motion.css

-/**
- * @file
- * Motion effects for off-canvas dialog.
- *
- * Motion effects are in a separate file so that they can be easily turned off
- * to improve performance if desired.
- */
-
-.dialog-off-canvas-main-canvas {
-  transition: padding-right 0.7s ease, padding-left 0.7s ease, padding-top 0.3s ease;
-}

core/misc/dialog/off-canvas.reset.css

-/*
- * 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.
- *
- * This is a generic reset. Drupal-specific classes are reset in components.
- */
-
-/**
- * All HTML elements that could be used in off-canvas except div, bdo, bdi,
- * data, svg, map and math.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
- */
-
-#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 button,
-  #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 main,
-  #drupal-off-canvas menu,
-  #drupal-off-canvas meter,
-  #drupal-off-canvas nav,
-  #drupal-off-canvas output,
-  #drupal-off-canvas progress,
-  #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 select,
-  #drupal-off-canvas textarea {
-    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 button:after,
-    #drupal-off-canvas button: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 main:after,
-    #drupal-off-canvas main:before,
-    #drupal-off-canvas menu:after,
-    #drupal-off-canvas menu:before,
-    #drupal-off-canvas meter:after,
-    #drupal-off-canvas meter:before,
-    #drupal-off-canvas nav:after,
-    #drupal-off-canvas nav:before,
-    #drupal-off-canvas output:after,
-    #drupal-off-canvas output:before,
-    #drupal-off-canvas progress:after,
-    #drupal-off-canvas progress: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 select:after,
-    #drupal-off-canvas select:before,
-    #drupal-off-canvas textarea:after,
-    #drupal-off-canvas textarea: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. */
-
-#drupal-off-canvas a,
-#drupal-off-canvas abbr,
-#drupal-off-canvas acronym,
-#drupal-off-canvas address,
-#drupal-off-canvas applet,
-#drupal-off-canvas article,
-#drupal-off-canvas aside,
-#drupal-off-canvas audio,
-#drupal-off-canvas b,
-#drupal-off-canvas big,
-#drupal-off-canvas blockquote,
-#drupal-off-canvas body,
-#drupal-off-canvas canvas,
-#drupal-off-canvas caption,
-#drupal-off-canvas cite,
-#drupal-off-canvas code,
-#drupal-off-canvas dd,
-#drupal-off-canvas del,
-#drupal-off-canvas dfn,
-#drupal-off-canvas dialog,
-#drupal-off-canvas dl,
-#drupal-off-canvas dt,
-#drupal-off-canvas em,
-#drupal-off-canvas embed,
-#drupal-off-canvas fieldset,
-#drupal-off-canvas figcaption,
-#drupal-off-canvas figure,
-#drupal-off-canvas footer,
-#drupal-off-canvas form,
-#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 header,
-#drupal-off-canvas hgroup,
-#drupal-off-canvas hr,
-#drupal-off-canvas html,
-#drupal-off-canvas i,
-#drupal-off-canvas iframe,
-#drupal-off-canvas img,
-#drupal-off-canvas ins,
-#drupal-off-canvas kbd,
-#drupal-off-canvas label,
-#drupal-off-canvas legend,
-#drupal-off-canvas li,
-#drupal-off-canvas main,
-#drupal-off-canvas mark,
-#drupal-off-canvas menu,
-#drupal-off-canvas meter,
-#drupal-off-canvas nav,
-#drupal-off-canvas object,
-#drupal-off-canvas ol,
-#drupal-off-canvas output,
-#drupal-off-canvas p,
-#drupal-off-canvas pre,
-#drupal-off-canvas progress,
-#drupal-off-canvas q,
-#drupal-off-canvas rp,
-#drupal-off-canvas rt,
-#drupal-off-canvas s,
-#drupal-off-canvas samp,
-#drupal-off-canvas section,
-#drupal-off-canvas small,
-#drupal-off-canvas span,
-#drupal-off-canvas strike,
-#drupal-off-canvas strong,
-#drupal-off-canvas sub,
-#drupal-off-canvas sup,
-#drupal-off-canvas table,
-#drupal-off-canvas tbody,
-#drupal-off-canvas td,
-#drupal-off-canvas tfoot,
-#drupal-off-canvas th,
-#drupal-off-canvas thead,
-#drupal-off-canvas time,
-#drupal-off-canvas tr,
-#drupal-off-canvas tt,
-#drupal-off-canvas u,
-#drupal-off-canvas ul,
-#drupal-off-canvas var,
-#drupal-off-canvas video,
-#drupal-off-canvas xmp {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-}
-
-/*
- * 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,
-#drupal-off-canvas figure,
-#drupal-off-canvas footer,
-#drupal-off-canvas header,
-#drupal-off-canvas hgroup,
-#drupal-off-canvas main,
-#drupal-off-canvas menu,
-#drupal-off-canvas nav,
-#drupal-off-canvas section {
-  display: block;
-  border-radius: 0;
-  line-height: normal;
-}
-
-/*
- * Makes browsers agree.
- * IE + Opera = font-weight: bold.
- * Gecko + WebKit = font-weight: bolder.
- */
-
-#drupal-off-canvas b,
-#drupal-off-canvas strong {
-  font-weight: bold;
-}
-
-#drupal-off-canvas em,
-#drupal-off-canvas i {
-  font-style: italic;
-}
-
-#drupal-off-canvas img {
-  vertical-align: middle;
-  color: transparent;
-  font-size: 0;
-}
-
-#drupal-off-canvas ul,
-#drupal-off-canvas ol {
-  list-style: none;
-}
-
-/* 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),
-#drupal-off-canvas table tbody tr:nth-child(odd),
-#drupal-off-canvas table tfoot {
-  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;
-}
-
-/*
- * 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,
-#drupal-off-canvas textarea:invalid,
-#drupal-off-canvas input:focus,
-#drupal-off-canvas button:focus,
-#drupal-off-canvas select:focus,
-#drupal-off-canvas textarea:focus,
-#drupal-off-canvas input[type="file"]:focus,
-#drupal-off-canvas input[type="file"]:active,
-#drupal-off-canvas input[type="radio"]:focus,
-#drupal-off-canvas input[type="radio"]:active,
-#drupal-off-canvas input[type="checkbox"]:focus,
-#drupal-off-canvas input[type="checkbox"]:active {
-  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"],
-#drupal-off-canvas input[type="button"] {
-  display: inline-block;
-  overflow: visible;
-  cursor: pointer;
-  vertical-align: middle;
-  text-decoration: none;
-  border: 0;
-  outline: 0;
-  background-image: none;
-  text-shadow: none;
-  -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,
-#drupal-off-canvas input[type="button"]:hover {
-  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,
-#drupal-off-canvas input[type="button"]:active {
-  border-color: gray;
-  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,
-#drupal-off-canvas input[type="button"]::-moz-focus-inner {
-  padding: 0;
-  border: 0;
-}
-
-#drupal-off-canvas textarea,
-#drupal-off-canvas select,
-#drupal-off-canvas input[type="date"],
-#drupal-off-canvas input[type="datetime"],
-#drupal-off-canvas input[type="datetime-local"],
-#drupal-off-canvas input[type="email"],
-#drupal-off-canvas input[type="month"],
-#drupal-off-canvas input[type="number"],
-#drupal-off-canvas input[type="password"],
-#drupal-off-canvas input[type="search"],
-#drupal-off-canvas input[type="tel"],
-#drupal-off-canvas input[type="text"],
-#drupal-off-canvas input[type="time"],
-#drupal-off-canvas input[type="url"],
-#drupal-off-canvas input[type="week"] {
-  height: auto;
-  vertical-align: middle;
-  border-radius: 0;
-}
-
-#drupal-off-canvas textarea[disabled],
-#drupal-off-canvas select[disabled],
-#drupal-off-canvas input[type="date"][disabled],
-#drupal-off-canvas input[type="datetime"][disabled],
-#drupal-off-canvas input[type="datetime-local"][disabled],
-#drupal-off-canvas input[type="email"][disabled],
-#drupal-off-canvas input[type="month"][disabled],
-#drupal-off-canvas input[type="number"][disabled],
-#drupal-off-canvas input[type="password"][disabled],
-#drupal-off-canvas input[type="search"][disabled],
-#drupal-off-canvas input[type="tel"][disabled],
-#drupal-off-canvas input[type="text"][disabled],
-#drupal-off-canvas input[type="time"][disabled],
-#drupal-off-canvas input[type="url"][disabled],
-#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],
-#drupal-off-canvas select[disabled] option,
-#drupal-off-canvas select[disabled] optgroup,
-#drupal-off-canvas textarea[disabled] {
-  cursor: default;
-  -webkit-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: 2.5rem;
-  resize: vertical;
-}
-
-#drupal-off-canvas select[multiple] {
-  overflow: auto;
-}
-
-#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;
-  padding: 0;
-  vertical-align: middle;
-  text-decoration: none;
-  color: black;
-  border: 1px solid gray;
-  background: none;
-}
-
-#drupal-off-canvas * textarea,
-#drupal-off-canvas * select,
-#drupal-off-canvas *:not(div) textarea,
-#drupal-off-canvas *:not(div) select {
-  padding: 0;
-  vertical-align: top;
-  color: black;
-  border: 1px solid gray;
-  background: white;
-}

core/misc/dialog/off-canvas.reset.pcss.css

-/**
- * @file
- * Reset most HTML elements styles for the off-canvas dialog.
- *
- * This is a generic reset. Drupal-specific classes are reset in components.
- */
-
-/**
- * All HTML elements that could be used in off-canvas except div, bdo, bdi,
- * data, svg, map and math.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
- */
-#drupal-off-canvas {
-  & span,
-  & applet,
-  & object,
-  & iframe,
-  & h1,
-  & h2,
-  & h3,
-  & h4,
-  & h5,
-  & h6,
-  & p,
-  & blockquote,
-  & pre,
-  & a,
-  & abbr,
-  & acronym,
-  & address,
-  & big,
-  & button,
-  & 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,
-  & main,
-  & menu,
-  & meter,
-  & nav,
-  & output,
-  & progress,
-  & ruby,
-  & section,
-  & summary,
-  & time,
-  & mark,
-  & audio,
-  & video,
-  & input,
-  & select,
-  & 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. */
-#drupal-off-canvas a,
-#drupal-off-canvas abbr,
-#drupal-off-canvas acronym,
-#drupal-off-canvas address,
-#drupal-off-canvas applet,
-#drupal-off-canvas article,
-#drupal-off-canvas aside,
-#drupal-off-canvas audio,
-#drupal-off-canvas b,
-#drupal-off-canvas big,
-#drupal-off-canvas blockquote,
-#drupal-off-canvas body,
-#drupal-off-canvas canvas,
-#drupal-off-canvas caption,
-#drupal-off-canvas cite,
-#drupal-off-canvas code,
-#drupal-off-canvas dd,
-#drupal-off-canvas del,
-#drupal-off-canvas dfn,
-#drupal-off-canvas dialog,
-#drupal-off-canvas dl,
-#drupal-off-canvas dt,
-#drupal-off-canvas em,
-#drupal-off-canvas embed,
-#drupal-off-canvas fieldset,
-#drupal-off-canvas figcaption,
-#drupal-off-canvas figure,
-#drupal-off-canvas footer,
-#drupal-off-canvas form,
-#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 header,
-#drupal-off-canvas hgroup,
-#drupal-off-canvas hr,
-#drupal-off-canvas html,
-#drupal-off-canvas i,
-#drupal-off-canvas iframe,
-#drupal-off-canvas img,
-#drupal-off-canvas ins,
-#drupal-off-canvas kbd,
-#drupal-off-canvas label,
-#drupal-off-canvas legend,
-#drupal-off-canvas li,
-#drupal-off-canvas main,
-#drupal-off-canvas mark,
-#drupal-off-canvas menu,
-#drupal-off-canvas meter,
-#drupal-off-canvas nav,
-#drupal-off-canvas object,
-#drupal-off-canvas ol,
-#drupal-off-canvas output,
-#drupal-off-canvas p,
-#drupal-off-canvas pre,
-#drupal-off-canvas progress,
-#drupal-off-canvas q,
-#drupal-off-canvas rp,
-#drupal-off-canvas rt,
-#drupal-off-canvas s,
-#drupal-off-canvas samp,
-#drupal-off-canvas section,
-#drupal-off-canvas small,
-#drupal-off-canvas span,
-#drupal-off-canvas strike,
-#drupal-off-canvas strong,
-#drupal-off-canvas sub,
-#drupal-off-canvas sup,
-#drupal-off-canvas table,
-#drupal-off-canvas tbody,
-#drupal-off-canvas td,
-#drupal-off-canvas tfoot,
-#drupal-off-canvas th,
-#drupal-off-canvas thead,
-#drupal-off-canvas time,
-#drupal-off-canvas tr,
-#drupal-off-canvas tt,
-#drupal-off-canvas u,
-#drupal-off-canvas ul,
-#drupal-off-canvas var,
-#drupal-off-canvas video,
-#drupal-off-canvas xmp {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-}
-
-/*
- * 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,
-#drupal-off-canvas figure,
-#drupal-off-canvas footer,
-#drupal-off-canvas header,
-#drupal-off-canvas hgroup,
-#drupal-off-canvas main,
-#drupal-off-canvas menu,
-#drupal-off-canvas nav,
-#drupal-off-canvas section {
-  display: block;
-  border-radius: 0;
-  line-height: normal;
-}
-
-/*
- * Makes browsers agree.
- * IE + Opera = font-weight: bold.
- * Gecko + WebKit = font-weight: bolder.
- */
-#drupal-off-canvas b,
-#drupal-off-canvas strong {
-  font-weight: bold;
-}
-
-#drupal-off-canvas em,
-#drupal-off-canvas i {
-  font-style: italic;
-}
-
-#drupal-off-canvas img {
-  vertical-align: middle;
-  color: transparent;
-  font-size: 0;
-}
-
-#drupal-off-canvas ul,
-#drupal-off-canvas ol {
-  list-style: none;
-}
-
-/* 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),
-#drupal-off-canvas table tbody tr:nth-child(odd),
-#drupal-off-canvas table tfoot {
-  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;
-}
-
-/*
- * 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,
-#drupal-off-canvas textarea:invalid,
-#drupal-off-canvas input:focus,
-#drupal-off-canvas button:focus,
-#drupal-off-canvas select:focus,
-#drupal-off-canvas textarea:focus,
-#drupal-off-canvas input[type="file"]:focus,
-#drupal-off-canvas input[type="file"]:active,
-#drupal-off-canvas input[type="radio"]:focus,
-#drupal-off-canvas input[type="radio"]:active,
-#drupal-off-canvas input[type="checkbox"]:focus,
-#drupal-off-canvas input[type="checkbox"]:active {
-  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"],
-#drupal-off-canvas input[type="button"] {
-  display: inline-block;
-  overflow: visible;
-  cursor: pointer;
-  vertical-align: middle;
-  text-decoration: none;
-  border: 0;
-  outline: 0;
-  background-image: none;
-  text-shadow: none;
-  -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,
-#drupal-off-canvas input[type="button"]:hover {
-  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,
-#drupal-off-canvas input[type="button"]:active {
-  border-color: gray;
-  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,
-#drupal-off-canvas input[type="button"]::-moz-focus-inner {
-  padding: 0;
-  border: 0;
-}
-#drupal-off-canvas textarea,
-#drupal-off-canvas select,
-#drupal-off-canvas input[type="date"],
-#drupal-off-canvas input[type="datetime"],
-#drupal-off-canvas input[type="datetime-local"],
-#drupal-off-canvas input[type="email"],
-#drupal-off-canvas input[type="month"],
-#drupal-off-canvas input[type="number"],
-#drupal-off-canvas input[type="password"],
-#drupal-off-canvas input[type="search"],
-#drupal-off-canvas input[type="tel"],
-#drupal-off-canvas input[type="text"],
-#drupal-off-canvas input[type="time"],
-#drupal-off-canvas input[type="url"],
-#drupal-off-canvas input[type="week"] {
-  height: auto;
-  vertical-align: middle;
-  border-radius: 0;
-}
-#drupal-off-canvas textarea[disabled],
-#drupal-off-canvas select[disabled],
-#drupal-off-canvas input[type="date"][disabled],
-#drupal-off-canvas input[type="datetime"][disabled],
-#drupal-off-canvas input[type="datetime-local"][disabled],
-#drupal-off-canvas input[type="email"][disabled],
-#drupal-off-canvas input[type="month"][disabled],
-#drupal-off-canvas input[type="number"][disabled],
-#drupal-off-canvas input[type="password"][disabled],
-#drupal-off-canvas input[type="search"][disabled],
-#drupal-off-canvas input[type="tel"][disabled],
-#drupal-off-canvas input[type="text"][disabled],
-#drupal-off-canvas input[type="time"][disabled],
-#drupal-off-canvas input[type="url"][disabled],
-#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],
-#drupal-off-canvas select[disabled] option,
-#drupal-off-canvas select[disabled] optgroup,
-#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;
-  resize: vertical;
-}
-#drupal-off-canvas select[multiple] {
-  overflow: auto;
-}
-#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;
-  padding: 0;
-  vertical-align: middle;
-  text-decoration: none;
-  color: black;
-  border: 1px solid gray;
-  background: none;
-}
-#drupal-off-canvas * textarea,
-#drupal-off-canvas * select,
-#drupal-off-canvas *:not(div) textarea,
-#drupal-off-canvas *:not(div) select {
-  padding: 0;
-  vertical-align: top;
-  color: black;
-  border: 1px solid gray;
-  background: white;
-}

core/misc/dialog/off-canvas.table.css

-/**
- * @file
- * Visual styling for tables in the off-canvas dialog.
- */
-
-#drupal-off-canvas table * {
-  font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
-}
-#drupal-off-canvas table {
-  display: table;
-  width: 100%;
-  min-width: calc(100% + 40px);
-  /* Cancel out the padding of the parent to make the table full width. */
-  margin: 0 -20px -10px -20px;
-  color: #ddd;
-  border: 0;
-  border-collapse: collapse;
-  font-size: 12px;
-}
-#drupal-off-canvas table thead {
-  display: table-header-group;
-}
-#drupal-off-canvas table tbody {
-  display: table-row-group;
-}
-#drupal-off-canvas tr {
-  display: table-row;
-}
-#drupal-off-canvas tr:hover td {
-  background-color: transparent;
-}
-
-#drupal-off-canvas td,
-#drupal-off-canvas th {
-  display: table-cell;
-  width: auto;
-  height: auto;
-  padding: 2px 8px;
-  vertical-align: middle;
-  border-bottom: 1px solid #777;
-  background-color: transparent;
-}
-[dir="rtl"] #drupal-off-canvas th,
-[dir="rtl"] #drupal-off-canvas td {
-  text-align: right;
-}
-#drupal-off-canvas th {
-  font-weight: bold;
-}
-#drupal-off-canvas th.checkbox,
-#drupal-off-canvas td.checkbox {
-  width: 20px;
-  padding: 0;
-  text-align: center;
-}
-#drupal-off-canvas div.checkbox.menu-enabled {
-  position: static;
-  display: inline;
-  width: auto;
-}
-#drupal-off-canvas th:first-child,
-#drupal-off-canvas td:first-child {
-  width: 150px;
-}
-/* For lack of a better class, using this to grab the operations th. */
-#drupal-off-canvas .tabledrag-has-colspan {
-  padding-right: 20px;
-  text-align: right;
-}
-#drupal-off-canvas td {
-  padding: 6px 8px;
-  color: #ddd;
-}
-/* Hide overflow with ellipsis for links. */
-#drupal-off-canvas td a {
-  display: block;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  background: transparent;
-}
-#drupal-off-canvas tr td:first-child,
-#drupal-off-canvas tr th:first-child {
-  padding-left: 20px; /* LTR */
-}
-[dir="rtl"] #drupal-off-canvas tr td:first-child,
-[dir="rtl"] #drupal-off-canvas tr th:first-child {
-  padding-right: 20px;
-}

core/misc/dialog/off-canvas.tabledrag.css

-/**
- * @file
- * Table drag behavior for off-canvas dialog.
- *
- * @see tabledrag.js
- */
-
-#drupal-off-canvas .drag {
-  cursor: move;
-}
-#drupal-off-canvas tr.region-title {
-  font-weight: normal;
-}
-#drupal-off-canvas table .region-message {
-  color: #fff;
-}
-#drupal-off-canvas table .region-populated {
-  display: none;
-}
-#drupal-off-canvas .add-new .tabledrag-changed {
-  display: none;
-}
-#drupal-off-canvas .draggable a.tabledrag-handle {
-  float: left; /* LTR */
-  overflow: hidden;
-  min-width: 20px;
-  height: auto;
-  margin: 0 5px 0 0;
-  padding: 0;
-  cursor: move;
-  text-decoration: none;
-  background-image: none;
-}
-[dir="rtl"] #drupal-off-canvas .draggable a.tabledrag-handle {
-  float: right;
-  margin-right: 0;
-  margin-left: 5px;
-}
-#drupal-off-canvas a.tabledrag-handle .handle {
-  width: auto;
-  height: auto;
-  margin: 0;
-  padding: 0;
-  background-color: transparent;
-  /* Use lighter drag icon against dark background. */
-  background-image: url(../icons/bebebe/move.svg);
-  background-repeat: no-repeat;
-  background-position: center;
-}
-#drupal-off-canvas .draggable a.tabledrag-handle:hover .handle,
-#drupal-off-canvas .draggable a.tabledrag-handle:focus .handle {
-  text-decoration: none;
-  background-image: url(../icons/787878/move.svg);
-}
-#drupal-off-canvas tr td {
-  transition: background 0.3s ease;
-}
-
-#drupal-off-canvas tr td abbr {
-  margin-left: 5px; /* LTR */
-}
-
-[dir="rtl"] #drupal-off-canvas tr td abbr {
-  margin-right: 5px;
-  margin-left: 0;
-}
-#drupal-off-canvas tr:hover td {
-  background: #222;
-}
-#drupal-off-canvas tr.drag td {
-  background: #111;
-}
-#drupal-off-canvas tr.drag-previous td {
-  background: #000;
-}
-#drupal-off-canvas tr.drag-previous:hover td {
-  background: #222;
-}
-body div.tabledrag-changed-warning {
-  margin-bottom: 0.5em;
-  font-size: 14px;
-}
-#drupal-off-canvas .touchevents .draggable td {
-  padding: 0 10px;
-}
-#drupal-off-canvas .touchevents .draggable .menu-item__link {
-  display: inline-block;
-  padding: 10px 0;
-}
-#drupal-off-canvas .touchevents a.tabledrag-handle {
-  width: 40px;
-  height: 44px;
-}
-#drupal-off-canvas .touchevents a.tabledrag-handle .handle {
-  height: 21px;
-  background-position: 40% 19px; /* LTR */
-}
-[dir="rtl"] #drupal-off-canvas .touch a.tabledrag-handle .handle {
-  background-position: right 40% top 19px;
-}
-#drupal-off-canvas .touchevents .draggable.drag a.tabledrag-handle .handle {
-  background-position: 50% -32px;
-}
-#drupal-off-canvas .tabledrag-toggle-weight-wrapper {
-  padding-top: 10px;
-  text-align: right; /* LTR */
-}
-[dir="rtl"] #drupal-off-canvas .tabledrag-toggle-weight-wrapper {
-  text-align: left;
-}
-#drupal-off-canvas .indentation {
-  float: left; /* LTR */
-  width: auto;
-  height: auto;
-  margin: 0 3px 0 -10px; /* LTR */
-  padding: 0 0 0 10px; /* LTR */
-}
-[dir="rtl"] #drupal-off-canvas .indentation {
-  float: right;
-  margin: 0 -10px 0 3px;
-  padding: 0 10px 0 0;
-}

core/misc/dialog/off-canvas.theme.css

-/**
- * @file
- * Styling for the off-canvas ui dialog. Including overrides for jQuery UI.
- */
-
-/* Style the dialog-off-canvas container. */
-.ui-dialog.ui-dialog-off-canvas {
-  /* Layer the dialog just under the toolbar. */
-  z-index: 501;
-  padding: 0;
-  color: #ddd;
-  border-radius: 0;
-  background: #444;
-  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3333);
-}
-.ui-widget.ui-dialog.ui-dialog-off-canvas {
-  border: 1px solid transparent;
-}
-
-/* Style the off-canvas dialog header. */
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar {
-  padding: 1em;
-  color: #fff;
-  border: 0;
-  border-bottom: 1px solid #000;
-  border-radius: 0;
-  background: #2d2d2d;
-  font-weight: normal;
-}
-/* Hide the default jQuery UI dialog close button. */
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close .ui-icon {
-  visibility: hidden;
-}
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
-  position: absolute;
-  top: calc(50% - 6px);
-  right: 1em;
-  width: 30px;
-  height: 30px;
-  transition: all 0.5s ease;
-  border: 3px solid transparent;
-  background-color: transparent;
-  background-image: url(../icons/bebebe/ex.svg);
-  background-repeat: no-repeat;
-  background-position: center center;
-}
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:hover,
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:focus {
-  border: 3px solid #fff;
-  background-image: url(../icons/ffffff/ex.svg);
-}
-[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close {
-  right: auto;
-  left: 1em;
-}
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
-  /* Ensure that long titles do not overlap the close button. */
-  max-width: 210px;
-  margin: 0;
-  padding-right: 0; /* LTR */
-  /* Push the text away from the icon. */
-  padding-left: 30px; /* LTR */
-  text-align: left; /* LTR */
-  /* Ensure that long titles are not truncated. */
-  white-space: normal;
-  font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
-  font-size: 16px;
-}
-[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-title {
-  float: right;
-  padding-right: 30px;
-  padding-left: 0;
-  text-align: right;
-}
-.ui-dialog.ui-dialog-off-canvas .ui-dialog-title:before {
-  position: absolute;
-  top: 0;
-  left: 1em; /* LTR */
-  display: block;
-  width: 20px;
-  height: 100%;
-  content: "";
-  background: transparent url(../icons/ffffff/pencil.svg) no-repeat scroll center center;
-  background-size: 100% auto;
-}
-[dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-title:before {
-  right: 1em;
-  left: auto;
-}
-
-/* Override default styling from jQuery UI. */
-#drupal-off-canvas .ui-state-default,
-#drupal-off-canvas .ui-widget-content .ui-state-default,
-#drupal-off-canvas .ui-widget-header .ui-state-default {
-  color: #333;
-  border: 0;
-  font-size: 14px;
-  font-weight: normal;
-}
-#drupal-off-canvas .ui-widget-content a {
-  color: #85bef4;
-}

core/misc/dialog/off-canvas/css/base.css

+/*
+ * 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.
+ *
+ * @internal
+ */
+
+#drupal-off-canvas-wrapper {
+  --off-canvas-background-color-light: #666;
+  --off-canvas-background-color-medium: #444;
+  --off-canvas-background-color-dark: #333;
+  --off-canvas-background-color: var(--off-canvas-background-color-medium);
+  --off-canvas-padding: 1.25rem;
+  --off-canvas-text-color: #e5e5e5;
+  --off-canvas-link-color: #85bef4;
+  --off-canvas-border-color: #666;
+  --off-canvas-font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
+  --off-canvas-vertical-spacing-unit: 0.5rem;
+  --off-canvas-focus-outline-width: 2px;
+  --off-canvas-focus-outline-color: #fff;
+
+  padding: 0 var(--off-canvas-padding) var(--off-canvas-padding);
+  color: var(--off-canvas-text-color);
+  background-color: var(--off-canvas-background-color);
+  font-family: var(--off-canvas-font-family)
+}
+
+#drupal-off-canvas-wrapper *:focus {
+    outline: solid var(--off-canvas-focus-outline-width) var(--off-canvas-focus-outline-color);
+    outline-offset: 2px;
+  }
+
+#drupal-off-canvas-wrapper a,
+  #drupal-off-canvas-wrapper .link {
+    text-decoration: none;
+    color: var(--off-canvas-link-color);
+  }
+
+#drupal-off-canvas-wrapper hr {
+    height: 1px;
+    background: var(--off-canvas-border-color);
+  }
+
+#drupal-off-canvas-wrapper h1,
+  #drupal-off-canvas-wrapper .heading-a {
+    font-size: 1.4375rem;
+    line-height: 1.2;
+  }
+
+#drupal-off-canvas-wrapper h2,
+  #drupal-off-canvas-wrapper .heading-b {
+    margin: var(--off-canvas-vertical-spacing-unit) 0;
+    font-size: 1.1875rem;
+  }
+
+#drupal-off-canvas-wrapper h3,
+  #drupal-off-canvas-wrapper .heading-c {
+    margin: var(--off-canvas-vertical-spacing-unit) 0;
+    font-size: 1.0625rem;
+  }
+
+#drupal-off-canvas-wrapper h4,
+  #drupal-off-canvas-wrapper .heading-d {
+    margin: var(--off-canvas-vertical-spacing-unit) 0;
+    font-size: 1rem;
+  }
+
+#drupal-off-canvas-wrapper h5,
+  #drupal-off-canvas-wrapper .heading-e,
+  #drupal-off-canvas-wrapper h6,
+  #drupal-off-canvas-wrapper .heading-f {
+    margin: var(--off-canvas-vertical-spacing-unit) 0;
+    font-size: 0.9375rem;
+  }
+
+#drupal-off-canvas-wrapper p {
+    margin: var(--off-canvas-vertical-spacing-unit) 0;
+  }
+
+#drupal-off-canvas-wrapper img {
+    max-width: 100%;
+    height: auto;
+  }
+
+#drupal-off-canvas-wrapper .links {
+    margin: 0;
+    padding: 0;
+    list-style: none
+  }
+
+#drupal-off-canvas-wrapper .links li {
+      margin: calc(var(--off-canvas-vertical-spacing-unit) /2) 0;
+    }

core/misc/dialog/off-canvas/css/base.pcss.css

+/**
+ * @file
+ * Set base styles for the off-canvas dialog.
+ *
+ * @internal
+ */
+
+#drupal-off-canvas-wrapper {
+  --off-canvas-background-color-light: #666;
+  --off-canvas-background-color-medium: #444;
+  --off-canvas-background-color-dark: #333;
+  --off-canvas-background-color: var(--off-canvas-background-color-medium);
+  --off-canvas-padding: 20px;
+  --off-canvas-text-color: #e5e5e5;
+  --off-canvas-link-color: #85bef4;
+  --off-canvas-border-color: #666;
+  --off-canvas-font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
+  --off-canvas-vertical-spacing-unit: 8px;
+  --off-canvas-focus-outline-width: 2px;
+  --off-canvas-focus-outline-color: #fff;
+
+  padding: 0 var(--off-canvas-padding) var(--off-canvas-padding);
+  color: var(--off-canvas-text-color);
+  background-color: var(--off-canvas-background-color);
+  font-family: var(--off-canvas-font-family);
+
+  & *:focus {
+    outline: solid var(--off-canvas-focus-outline-width) var(--off-canvas-focus-outline-color);
+    outline-offset: 2px;
+  }
+
+  & a,
+  & .link {
+    text-decoration: none;
+    color: var(--off-canvas-link-color);
+  }
+
+  & hr {
+    height: 1px;
+    background: var(--off-canvas-border-color);
+  }
+
+  & h1,
+  & .heading-a {
+    font-size: 23px;
+    line-height: 1.2;
+  }
+
+  & h2,
+  & .heading-b {
+    margin: var(--off-canvas-vertical-spacing-unit) 0;
+    font-size: 19px;
+  }
+
+  & h3,
+  & .heading-c {
+    margin: var(--off-canvas-vertical-spacing-unit) 0;
+    font-size: 17px;
+  }
+
+  & h4,
+  & .heading-d {
+    margin: var(--off-canvas-vertical-spacing-unit) 0;
+    font-size: 16px;
+  }
+
+  & h5,
+  & .heading-e,
+  & h6,
+  & .heading-f {
+    margin: var(--off-canvas-vertical-spacing-unit) 0;
+    font-size: 15px;
+  }
+
+  & p {
+    margin: var(--off-canvas-vertical-spacing-unit) 0;
+  }
+
+  & img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  & .links {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    & li {
+      margin: calc(var(--off-canvas-vertical-spacing-unit) /2) 0;
+    }
+  }
+}

core/misc/dialog/off-canvas/css/button.css

+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+/**
+ * @file
+ * Visual styling for buttons in the off-canvas dialog.
+ *
+ * @internal
+ */
+#drupal-off-canvas-wrapper {
+  --off-canvas-button-background-color: #777;
+  --off-canvas-button-background-color-hover: #999;
+  --off-canvas-button-text-color: #f5f5f5;
+  --off-canvas-button-text-color-hover: #fff;
+  --off-canvas-button-font-size: 0.875rem;
+  --off-canvas-button-padding: calc(var(--off-canvas-vertical-spacing-unit) / 2) 1.25rem;
+  --off-canvas-button-border-color: transparent;
+  --off-canvas-button-border-radius: 20em;
+  --off-canvas-button-font-weight: 600;
+  --off-canvas-primary-button-background-color: #277abd;
+  --off-canvas-primary-button-background-color-hover: #236aaf;
+  --off-canvas-primary-button-text-color: #fff;
+  --off-canvas-primary-button-text-color-hover: #fff
+}
+#drupal-off-canvas-wrapper .button {
+    display: inline-block;
+    width: 100%;
+    height: auto;
+    margin: 0 0 0.625rem;
+    padding: var(--off-canvas-button-padding);
+    cursor: pointer;
+    transition: background 0.5s ease;
+    text-align: center;
+    color: var(--off-canvas-button-text-color);
+    border: solid 1px var(--off-canvas-button-border-color);
+    border-radius: var(--off-canvas-button-border-radius);
+    background: var(--off-canvas-button-background-color);
+    font-family: inherit;
+    font-size: var(--off-canvas-button-font-size);
+    font-weight: var(--off-canvas-button-font-weight);
+    line-height: normal;
+    -webkit-appearance: none;
+    appearance: none
+  }
+#drupal-off-canvas-wrapper .button:hover,
+    #drupal-off-canvas-wrapper .button:active {
+      z-index: 10;
+      text-decoration: none;
+      color: var(--off-canvas-button-text-color-hover);
+      background-color: var(--off-canvas-button-background-color-hover);
+    }
+#drupal-off-canvas-wrapper .button:disabled,
+    #drupal-off-canvas-wrapper .button:disabled:active,
+    #drupal-off-canvas-wrapper .button.is-disabled,
+    #drupal-off-canvas-wrapper .button.is-disabled:active {
+      cursor: default;
+      color: #5c5c5c;
+      background: #555;
+      font-weight: normal;
+    }
+#drupal-off-canvas-wrapper .button--primary {
+    margin-top: 0.9375rem;
+    color: var(--off-canvas-primary-button-text-color);
+    background: var(--off-canvas-primary-button-background-color)
+  }
+#drupal-off-canvas-wrapper .button--primary:hover,
+    #drupal-off-canvas-wrapper .button--primary:active {
+      color: var(--off-canvas-primary-button-text-color-hover);
+      background: var(--off-canvas-primary-button-background-color-hover);
+    }
+#drupal-off-canvas-wrapper button.link {
+    display: inline;
+    transition: color 0.5s ease;
+    color: var(--off-canvas-link-color);
+    border: 0;
+    background: transparent;
+    font-size: var(--off-canvas-button-font-size)
+  }
+#drupal-off-canvas-wrapper button.link:hover,
+    #drupal-off-canvas-wrapper button.link:focus {
+      text-decoration: none;
+      color: var(--off-canvas-link-color);
+    }
+#drupal-off-canvas-wrapper .button--danger {
+    text-decoration: none;
+    color: #c72100;
+    border-radius: 0;
+    font-weight: 400
+  }
+#drupal-off-canvas-wrapper .button--danger:hover,
+    #drupal-off-canvas-wrapper .button--danger:focus,
+    #drupal-off-canvas-wrapper .button--danger:active {
+      text-decoration: none;
+      color: #ff2a00;
+      text-shadow: none;
+    }
+#drupal-off-canvas-wrapper .button--danger:disabled,
+    #drupal-off-canvas-wrapper .button--danger.is-disabled {
+      cursor: default;
+      color: #737373;
+    }
+.no-touchevents #drupal-off-canvas-wrapper .button--small {
+    padding: 2px 1em;
+    font-size: 0.8125rem
+}