diff --git a/core/modules/shortcut/tests/src/Functional/ShortcutCacheTagsTest.php b/core/modules/shortcut/tests/src/Functional/ShortcutCacheTagsTest.php
index e479610aef..b6e924bd3e 100644
--- a/core/modules/shortcut/tests/src/Functional/ShortcutCacheTagsTest.php
+++ b/core/modules/shortcut/tests/src/Functional/ShortcutCacheTagsTest.php
@@ -101,6 +101,7 @@ public function testToolbar() {
       'config:block_list',
       'config:shortcut.set.default',
       'config:system.menu.admin',
+      'config:system.theme',
       'config:user.role.authenticated',
       'rendered',
       'user:' . $this->rootUser->id(),
diff --git a/core/modules/system/src/EventSubscriber/ConfigCacheTag.php b/core/modules/system/src/EventSubscriber/ConfigCacheTag.php
index 30f7d595ab..68050aa85a 100644
--- a/core/modules/system/src/EventSubscriber/ConfigCacheTag.php
+++ b/core/modules/system/src/EventSubscriber/ConfigCacheTag.php
@@ -60,6 +60,12 @@ public function onSave(ConfigCrudEvent $event) {
       $this->cacheTagsInvalidator->invalidateTags(['rendered']);
     }
 
+    // Library and template overrides potentially change for the default theme
+    // when the admin theme is changed.
+    if ($config_name === 'system.theme' && $event->isChanged('admin')) {
+      $this->cacheTagsInvalidator->invalidateTags(['library_info', 'theme_registry']);
+    }
+
     // Theme-specific settings, check if this matches a theme settings
     // configuration object (THEME_NAME.settings), in that case, clear the
     // rendered cache tag.
diff --git a/core/modules/system/system.module b/core/modules/system/system.module
index 064afafbce..d917af8343 100644
--- a/core/modules/system/system.module
+++ b/core/modules/system/system.module
@@ -1250,3 +1250,57 @@ function system_modules_uninstalled($modules) {
     }
   }
 }
+
+/**
+ * Determines if Claro is the admin theme but not the active theme.
+ *
+ * @return bool
+ *   TRUE if Claro is the admin theme but not the active theme.
+ */
+function _system_is_claro_admin_and_not_active() {
+  $admin_theme = \Drupal::configFactory()->get('system.theme')->get('admin');
+  $active_theme = \Drupal::theme()->getActiveTheme()->getName();
+  return $active_theme !== 'claro' && $admin_theme === 'claro';
+}
+
+/**
+ * Implements hook_library_info_alter().
+ */
+function system_library_info_alter(&$libraries, $extension) {
+  // If Claro is the admin theme but not the active theme, grant Claro the
+  // ability to override the toolbar library with its own assets.
+  if ($extension === 'toolbar' && _system_is_claro_admin_and_not_active()) {
+    require_once DRUPAL_ROOT . '/core/themes/claro/claro.theme';
+    claro_system_module_invoked_library_info_alter($libraries, $extension);
+  }
+}
+
+/**
+ * Implements hook_preprocess_toolbar().
+ */
+function system_preprocess_toolbar(array &$variables, $hook, $info) {
+  // When Claro is the admin theme, Claro overrides the active theme's if that
+  // active theme is not Claro. Because of these potential overrides, the
+  // toolbar cache should be invalidated any time the default or admin theme
+  // changes.
+  $variables['#cache']['tags'][] = 'config:system.theme';
+
+  // If Claro is the admin theme but not the active theme, still include Claro's
+  // toolbar preprocessing.
+  if (_system_is_claro_admin_and_not_active()) {
+    require_once DRUPAL_ROOT . '/core/themes/claro/claro.theme';
+    claro_preprocess_toolbar($variables, $hook, $info);
+  }
+}
+
+/**
+ * Implements hook_theme_registry_alter().
+ */
+function system_theme_registry_alter(array &$theme_registry) {
+  // If Claro is the admin theme but not the active theme, use Claro's toolbar
+  // templates.
+  if (_system_is_claro_admin_and_not_active()) {
+    require_once DRUPAL_ROOT . '/core/themes/claro/claro.theme';
+    claro_system_module_invoked_theme_registry_alter($theme_registry);
+  }
+}
diff --git a/core/modules/system/tests/src/Functional/Theme/ToolbarClaroOverridesTest.php b/core/modules/system/tests/src/Functional/Theme/ToolbarClaroOverridesTest.php
new file mode 100644
index 0000000000..5ea819b090
--- /dev/null
+++ b/core/modules/system/tests/src/Functional/Theme/ToolbarClaroOverridesTest.php
@@ -0,0 +1,139 @@
+<?php
+
+namespace Drupal\Tests\system\Functional\Theme;
+
+use Drupal\Tests\BrowserTestBase;
+
+/**
+ * Tests the loading of Claro assets on a non-Claro default theme.
+ *
+ * @group Theme
+ */
+class ToolbarClaroOverridesTest extends BrowserTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = ['toolbar', 'test_page_test', 'shortcut', 'node'];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'stark';
+
+  /**
+   * The theme installer used in this test for enabling themes.
+   *
+   * @var \Drupal\Core\Extension\ThemeInstallerInterface
+   */
+  protected $themeInstaller;
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp(): void {
+    parent::setUp();
+
+    $this->themeInstaller = $this->container->get('theme_installer');
+    $this->themeManager = $this->container->get('theme.manager');
+    $this->themeInstaller->install(['claro']);
+
+    // Create user with sufficient permissions to have the shortcut toolbar menu
+    // be available.
+    $this->drupalLogin($this->drupalCreateUser([
+      'access toolbar',
+      'access shortcuts',
+      'administer shortcuts',
+      'access content overview',
+    ]));
+  }
+
+  /**
+   * Confirm Claro assets load on a non-Claro default theme.
+   */
+  public function testClaroAssets() {
+    $default_stylesheets = [
+      'core/modules/toolbar/css/toolbar.module.css',
+      'core/modules/toolbar/css/toolbar.menu.css',
+      'core/modules/toolbar/css/toolbar.theme.css',
+      'core/modules/toolbar/css/toolbar.icons.theme.css',
+    ];
+
+    $claro_stylesheets = [
+      'core/themes/claro/css/components/toolbar.module.css',
+      'core/themes/claro/css/state/toolbar.menu.css',
+      'core/themes/claro/css/theme/toolbar.theme.css',
+      'core/themes/claro/css/theme/toolbar.icons.theme.css',
+    ];
+
+    $this->config('system.theme')->set('admin', 'stark')->save();
+
+    $this->drupalGet('test-page');
+    $this->assertSession()->statusCodeEquals(200);
+
+    $admin_theme = \Drupal::configFactory()->get('system.theme')->get('admin');
+    $default_theme = \Drupal::configFactory()->get('system.theme')->get('default');
+    $this->assertEquals('stark', $admin_theme);
+    $this->assertEquals('stark', $default_theme);
+
+    $head = $this->getSession()->getPage()->find('css', 'head')->getHtml();
+
+    // Confirm that Claro stylesheets are not loading, and the ones they would
+    // override were Claro enabled are still loading.
+    $stylesheet_positions = [];
+    foreach ($default_stylesheets as $stylesheet) {
+      $this->assertStringContainsString($stylesheet, $head);
+      $stylesheet_positions[] = strpos($head, $stylesheet);
+    }
+    $sorted_stylesheet_positions = $stylesheet_positions;
+    sort($sorted_stylesheet_positions);
+    $this->assertEquals($sorted_stylesheet_positions, $stylesheet_positions);
+
+    foreach ($claro_stylesheets as $stylesheet) {
+      $this->assertStringNotContainsString($stylesheet, $head);
+    }
+
+    // Confirm toolbar is not processed by claro_preprocess_toolbar().
+    $this->assertFalse($this->getSession()->getPage()->find('css', '#toolbar-administration')->hasAttribute('data-drupal-claro-processed-toolbar'));
+
+    // Confirm menu--toolbar.html.twig is not loaded from Claro.
+    $this->assertFalse($this->getSession()->getPage()->find('css', '.toolbar-menu')->hasClass('claro-toolbar-menu'));
+    $this->assertFalse($this->getSession()->getPage()->find('css', '.toolbar')->hasClass('claro-toolbar'));
+
+    $this->config('system.theme')->set('admin', 'claro')->save();
+    $this->drupalGet('test-page');
+    $this->assertSession()->statusCodeEquals(200);
+
+
+
+    $admin_theme = \Drupal::configFactory()->get('system.theme')->get('admin');
+    $default_theme = \Drupal::configFactory()->get('system.theme')->get('default');
+    $this->assertEquals('claro', $admin_theme);
+    $this->assertEquals('stark', $default_theme);
+
+    $head = $this->getSession()->getPage()->find('css', 'head')->getHtml();
+
+    // Confirm that Claro stylesheets are loading, and the ones they override
+    // are not loading.
+    $stylesheet_positions = [];
+    foreach ($claro_stylesheets as $stylesheet) {
+      $this->assertStringContainsString($stylesheet, $head);
+      $stylesheet_positions[] = strpos($head, $stylesheet);
+    }
+    $sorted_stylesheet_positions = $stylesheet_positions;
+    sort($sorted_stylesheet_positions);
+    $this->assertEquals($sorted_stylesheet_positions, $stylesheet_positions);
+
+    foreach ($default_stylesheets as $stylesheet) {
+      $this->assertStringNotContainsString($stylesheet, $head);
+    }
+
+    // Confirm toolbar is processed by claro_preprocess_toolbar().
+    $this->assertTrue($this->getSession()->getPage()->find('css', '#toolbar-administration')->hasAttribute('data-drupal-claro-processed-toolbar'));
+
+    // Confirm toolbar templates are loaded from Claro.
+    $this->assertTrue($this->getSession()->getPage()->find('css', '.toolbar')->hasClass('claro-toolbar'));
+    $this->assertTrue($this->getSession()->getPage()->find('css', '.toolbar-menu')->hasClass('claro-toolbar-menu'));
+  }
+
+}
diff --git a/core/themes/claro/claro.info.yml b/core/themes/claro/claro.info.yml
index 99397ee0fc..daa697ff5d 100644
--- a/core/themes/claro/claro.info.yml
+++ b/core/themes/claro/claro.info.yml
@@ -76,6 +76,18 @@ libraries-override:
       theme:
         css/field_ui.admin.css: css/theme/field-ui.admin.css
 
+  toolbar/toolbar:
+    css:
+      component:
+        css/toolbar.module.css: css/components/toolbar.module.css
+      theme:
+        css/toolbar.theme.css: css/theme/toolbar.theme.css
+        css/toolbar.icons.theme.css: css/theme/toolbar.icons.theme.css
+  toolbar/toolbar.menu:
+    css:
+      state:
+        css/toolbar.menu.css: css/state/toolbar.menu.css
+
   views_ui/admin.styling:
     css:
       theme:
diff --git a/core/themes/claro/claro.theme b/core/themes/claro/claro.theme
index 5d735acb6b..368c483257 100644
--- a/core/themes/claro/claro.theme
+++ b/core/themes/claro/claro.theme
@@ -1413,3 +1413,62 @@ function claro_preprocess_links__media_library_menu(array &$variables) {
     }
   }
 }
+
+/**
+ * Implements hook_preprocess_toolbar().
+ *
+ * This is also called by system_preprocess_toolbar() in instances where Claro
+ * is the admin theme but not the active theme.
+ *
+ * @see system_preprocess_toolbar()
+ */
+function claro_preprocess_toolbar(&$variables, $hook, $info) {
+  $variables['attributes']['data-drupal-claro-processed-toolbar'] = TRUE;
+}
+
+/**
+ * Called by system.module via its hook_library_info_alter().
+ *
+ * If the active theme is not Claro, but Claro is the admin theme, this alters
+ * the toolbar library config so Claro's toolbar stylesheets are used.
+ *
+ * @see system_library_info_alter()
+ */
+function claro_system_module_invoked_library_info_alter(&$libraries, $extension) {
+  if ($extension === 'toolbar') {
+    $claro_info = \Drupal::service('theme_handler')->listInfo()['claro']->info;
+    $path_prefix = '/core/themes/claro/';
+    $claro_toolbar_overrides = $claro_info['libraries-override']['toolbar/toolbar'];
+    foreach ($claro_toolbar_overrides['css'] as $concern => $overrides) {
+      foreach ($claro_toolbar_overrides['css'][$concern] as $key => $value) {
+        $config = $libraries['toolbar']['css'][$concern][$key];
+        $libraries['toolbar']['css'][$concern][$path_prefix . $value] = $config;
+        unset($libraries['toolbar']['css'][$concern][$key]);
+      }
+    }
+    $claro_toolbar_menu_overrides = $claro_info['libraries-override']['toolbar/toolbar.menu'];
+    foreach ($claro_toolbar_menu_overrides['css'] as $concern => $overrides) {
+      foreach ($claro_toolbar_menu_overrides['css'][$concern] as $key => $value) {
+        $config = $libraries['toolbar.menu']['css'][$concern][$key];
+        $libraries['toolbar.menu']['css'][$concern][$path_prefix . $value] = $config;
+        unset($libraries['toolbar.menu']['css'][$concern][$key]);
+      }
+    }
+  }
+}
+
+/**
+ * Called by system.module via its hook_theme_registry_alter().
+ *
+ * If the active theme is not Claro, but Claro is the admin theme, this alters
+ * the registry so Claro's toolbar templates are used.
+ *
+ * @see system_theme_registry_alter()
+ */
+function claro_system_module_invoked_theme_registry_alter(array &$theme_registry) {
+  foreach (['toolbar', 'menu__toolbar'] as $registry_item) {
+    if (isset($theme_registry[$registry_item])) {
+      $theme_registry[$registry_item]['path'] = 'core/themes/claro/templates/navigation';
+    }
+  }
+}
diff --git a/core/modules/toolbar/css/toolbar.module.css b/core/themes/claro/css/components/toolbar.module.css
similarity index 96%
copy from core/modules/toolbar/css/toolbar.module.css
copy to core/themes/claro/css/components/toolbar.module.css
index e4bc7f6652..dbd346b5e1 100644
--- a/core/modules/toolbar/css/toolbar.module.css
+++ b/core/themes/claro/css/components/toolbar.module.css
@@ -1,9 +1,18 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
 /**
  * @file toolbar.module.css
  *
  *
  * Aggressive resets so we can achieve a consistent look in hostile CSS
  * environments.
+ *
+ * If Claro is the admin theme, this stylesheet will be used by the active theme
+ * even if the active theme is not Claro.
  */
 #toolbar-administration,
 #toolbar-administration * {
@@ -16,7 +25,6 @@
   font-size: small;
   line-height: 1;
 }
-
 @media print {
   #toolbar-administration {
     display: none;
@@ -50,7 +58,6 @@
   display: block;
   line-height: 1;
 }
-
 /**
  * Administration menu.
  */
@@ -96,7 +103,6 @@
     display: block;
   }
 }
-
 /* Layer the bar just above the trays and above contextual link triggers. */
 .toolbar-oriented .toolbar-bar {
   z-index: 502;
@@ -114,7 +120,6 @@ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {
   width: 240px;
   width: 15rem;
 }
-
 /* Present the admin toolbar tabs horizontally as a default on user agents that
  * do not understand media queries or on user agents where JavaScript is
  * disabled. */
@@ -163,7 +168,6 @@ body.toolbar-tray-open.toolbar-fixed.toolbar-vertical .toolbar-oriented {
 [dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal li {
   float: right;
 }
-
 /**
  * Toolbar tray.
  */
@@ -221,7 +225,6 @@ body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
   margin-left: 240px; /* LTR */
   margin-left: 15rem; /* LTR */
 }
-
 @media print {
   body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
     margin-left: 0;
@@ -232,7 +235,6 @@ body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
   margin-right: 15rem;
   margin-left: auto;
 }
-
 @media print {
   [dir="rtl"] body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
     margin-right: 0;
@@ -268,7 +270,6 @@ body.toolbar-tray-open.toolbar-vertical.toolbar-fixed {
 [dir="rtl"] .toolbar-oriented .toolbar-tray-vertical .toolbar-toggle-orientation {
   float: left;
 }
-
 /**
  * Toolbar home button toggle.
  */
diff --git a/core/modules/toolbar/css/toolbar.module.css b/core/themes/claro/css/components/toolbar.module.pcss.css
similarity index 98%
copy from core/modules/toolbar/css/toolbar.module.css
copy to core/themes/claro/css/components/toolbar.module.pcss.css
index e4bc7f6652..b1e23b20c5 100644
--- a/core/modules/toolbar/css/toolbar.module.css
+++ b/core/themes/claro/css/components/toolbar.module.pcss.css
@@ -4,6 +4,9 @@
  *
  * Aggressive resets so we can achieve a consistent look in hostile CSS
  * environments.
+ *
+ * If Claro is the admin theme, this stylesheet will be used by the active theme
+ * even if the active theme is not Claro.
  */
 #toolbar-administration,
 #toolbar-administration * {
diff --git a/core/modules/toolbar/css/toolbar.menu.css b/core/themes/claro/css/state/toolbar.menu.css
similarity index 90%
copy from core/modules/toolbar/css/toolbar.menu.css
copy to core/themes/claro/css/state/toolbar.menu.css
index e35d0adc2d..cf8b55c323 100644
--- a/core/modules/toolbar/css/toolbar.menu.css
+++ b/core/themes/claro/css/state/toolbar.menu.css
@@ -1,5 +1,14 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
 /**
  * @file toolbar.menu.css
+ *
+ * If Claro is the admin theme, this stylesheet will be used by the active theme
+ * even if the active theme is not Claro.
  */
 .toolbar .toolbar-menu,
 [dir="rtl"] .toolbar .toolbar-menu {
@@ -13,14 +22,12 @@
   width: auto;
   line-height: 1em; /* this prevents the value "normal" from being returned as the line-height */
 }
-
 /**
  * Hidden vertical toolbar sub-menus by default.
  */
 .toolbar .toolbar-tray-vertical .toolbar-menu ul {
   display: none;
 }
-
 /**
  * Hidden horizontal toolbar handle icon.
  */
@@ -48,14 +55,12 @@
   color: #000;
   font-weight: bold;
 }
-
 /* ----- Toolbar menu tray for viewports less than 320px ------ */
 @media screen and (max-width: 319px) {
   .toolbar .toolbar-tray-vertical.is-active {
     width: 100%;
   }
 }
-
 /**
  * Items.
  */
@@ -94,7 +99,6 @@
   border-bottom-color: #ccc;
   background-color: #ddd;
 }
-
 /**
  * Handle.
  */
diff --git a/core/themes/stable/css/toolbar/toolbar.menu.css b/core/themes/claro/css/state/toolbar.menu.pcss.css
similarity index 95%
copy from core/themes/stable/css/toolbar/toolbar.menu.css
copy to core/themes/claro/css/state/toolbar.menu.pcss.css
index e35d0adc2d..c42ff768ca 100644
--- a/core/themes/stable/css/toolbar/toolbar.menu.css
+++ b/core/themes/claro/css/state/toolbar.menu.pcss.css
@@ -1,5 +1,8 @@
 /**
  * @file toolbar.menu.css
+ *
+ * If Claro is the admin theme, this stylesheet will be used by the active theme
+ * even if the active theme is not Claro.
  */
 .toolbar .toolbar-menu,
 [dir="rtl"] .toolbar .toolbar-menu {
diff --git a/core/themes/claro/css/theme/toolbar.icons.theme.css b/core/themes/claro/css/theme/toolbar.icons.theme.css
new file mode 100644
index 0000000000..22bc14fd92
--- /dev/null
+++ b/core/themes/claro/css/theme/toolbar.icons.theme.css
@@ -0,0 +1,365 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Styling for toolbar module icons.
+ *
+ * If Claro is the admin theme, this stylesheet will be used by the active theme
+ * even if the active theme is not Claro.
+ */
+
+.toolbar .toolbar-icon {
+  position: relative;
+  padding-left: 2.75em; /* LTR */
+}
+
+[dir="rtl"] .toolbar .toolbar-icon {
+  padding-right: 2.75em;
+  padding-left: 1.3333em;
+}
+
+.toolbar .toolbar-icon:before {
+  position: absolute;
+  top: 0;
+  left: 0.6667em; /* LTR */
+  display: block;
+  width: 20px;
+  height: 100%;
+  content: "";
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-attachment: scroll;
+  background-position: center center;
+  background-size: 100% auto;
+}
+
+[dir="rtl"] .toolbar .toolbar-icon:before {
+  right: 0.6667em;
+  left: auto;
+}
+
+.toolbar button.toolbar-icon {
+  border: 0;
+  background-color: transparent;
+  font-size: 1em;
+}
+
+.toolbar .toolbar-menu ul .toolbar-icon {
+  padding-left: 1.3333em; /* LTR */
+}
+
+[dir="rtl"] .toolbar .toolbar-menu ul .toolbar-icon {
+  padding-right: 1.3333em;
+  padding-left: 0;
+}
+
+.toolbar .toolbar-menu ul a.toolbar-icon:before {
+  display: none;
+}
+
+.toolbar .toolbar-tray-vertical .toolbar-menu ul a {
+  padding-left: 2.75em; /* LTR */
+}
+
+[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul a {
+  padding-right: 2.75em;
+  padding-left: 0;
+}
+
+.toolbar .toolbar-tray-vertical .toolbar-menu ul ul a {
+  padding-left: 3.75em; /* LTR */
+}
+
+[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul ul a {
+  padding-right: 3.75em;
+  padding-left: 0;
+}
+
+.toolbar .toolbar-tray-vertical .toolbar-menu a {
+  padding-right: 4em; /* LTR */
+  padding-left: 2.75em; /* LTR */
+}
+
+[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu a {
+  padding-right: 2.75em;
+  padding-left: 4em;
+}
+
+/**
+ * Top level icons.
+ */
+
+.toolbar-bar .toolbar-icon-menu:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23bebebe' d='M14.752 6h-13.502c-.69 0-1.25.56-1.25 1.25v.5c0 .689.56 1.25 1.25 1.25h13.502c.689 0 1.25-.561 1.25-1.25v-.5c0-.69-.561-1.25-1.25-1.25zM14.752 0h-13.502c-.69 0-1.25.56-1.25 1.25v.5c0 .69.56 1.25 1.25 1.25h13.502c.689 0 1.25-.56 1.25-1.25v-.5c0-.69-.561-1.25-1.25-1.25zM14.752 12h-13.502c-.69 0-1.25.561-1.25 1.25v.5c0 .689.56 1.25 1.25 1.25h13.502c.689 0 1.25-.561 1.25-1.25v-.5c0-.689-.561-1.25-1.25-1.25z'/%3e%3c/g%3e%3c/svg%3e");
+}
+
+.toolbar-bar .toolbar-icon-menu:active:before,
+.toolbar-bar .toolbar-icon-menu.is-active:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23ffffff' d='M14.752 6h-13.502c-.69 0-1.25.56-1.25 1.25v.5c0 .689.56 1.25 1.25 1.25h13.502c.689 0 1.25-.561 1.25-1.25v-.5c0-.69-.561-1.25-1.25-1.25zM14.752 0h-13.502c-.69 0-1.25.56-1.25 1.25v.5c0 .69.56 1.25 1.25 1.25h13.502c.689 0 1.25-.56 1.25-1.25v-.5c0-.69-.561-1.25-1.25-1.25zM14.752 12h-13.502c-.69 0-1.25.561-1.25 1.25v.5c0 .689.56 1.25 1.25 1.25h13.502c.689 0 1.25-.561 1.25-1.25v-.5c0-.689-.561-1.25-1.25-1.25z'/%3e%3c/g%3e%3c/svg%3e");
+}
+
+.toolbar-bar .toolbar-icon-help:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' 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-7zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393-.168.148-.35.299-.545.447l-.203.189-.141.129-.096.17-.021.235v.63h-2.001v-.704c.026-.396.078-.73.204-.999.125-.269.271-.498.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18c.098-.152.168-.323.168-.518 0-.552-.447-1-1-1s-1.002.448-1.002 1h-2c0-1.657 1.343-3 3.002-3 1.656 0 3 1.343 3 3zm-1.75 6.619c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z'/%3e%3c/svg%3e");
+}
+
+.toolbar-bar .toolbar-icon-help:active:before,
+.toolbar-bar .toolbar-icon-help.is-active:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23ffffff' 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-7zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393-.168.148-.35.299-.545.447l-.203.189-.141.129-.096.17-.021.235v.63h-2.001v-.704c.026-.396.078-.73.204-.999.125-.269.271-.498.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18c.098-.152.168-.323.168-.518 0-.552-.447-1-1-1s-1.002.448-1.002 1h-2c0-1.657 1.343-3 3.002-3 1.656 0 3 1.343 3 3zm-1.75 6.619c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z'/%3e%3c/svg%3e");
+}
+
+/**
+ * Main menu icons.
+ */
+
+.toolbar-icon-system-admin-content:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M12.502 7h-5c-.276 0-.502-.225-.502-.5v-5c0-.275-.225-.5-.5-.5h-3c-.275 0-.5.225-.5.5v12.029c0 .275.225.5.5.5h9.002c.275 0 .5-.225.5-.5v-6.029c0-.275-.225-.5-.5-.5zM8.502 6h4c.275 0 .34-.159.146-.354l-4.293-4.292c-.195-.195-.353-.129-.353.146v4c0 .275.225.5.5.5z'/%3e%3c/g%3e%3c/svg%3e");
+}
+
+.toolbar-icon-system-admin-content:active:before,
+.toolbar-icon-system-admin-content.is-active:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23000000' d='M12.502 7h-5c-.276 0-.502-.225-.502-.5v-5c0-.275-.225-.5-.5-.5h-3c-.275 0-.5.225-.5.5v12.029c0 .275.225.5.5.5h9.002c.275 0 .5-.225.5-.5v-6.029c0-.275-.225-.5-.5-.5zM8.502 6h4c.275 0 .34-.159.146-.354l-4.293-4.292c-.195-.195-.353-.129-.353.146v4c0 .275.225.5.5.5z'/%3e%3c/g%3e%3c/svg%3e");
+}
+
+.toolbar-icon-system-admin-structure:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3e%3cpath fill='%23787878' d='M15.002,11.277c0-0.721,0-1.471,0-2.014c0-1.456-0.824-2.25-2.25-2.25c-1.428,0-3.5,0-3.5,0c-0.139,0-0.25-0.112-0.25-0.25v-2.04c0.596-0.346,1-0.984,1-1.723c0-1.104-0.895-2-2-2C6.896,1,6,1.896,6,3c0,0.738,0.405,1.376,1,1.722v2.042c0,0.138-0.112,0.25-0.25,0.25c0,0-2.138,0-3.5,0S1,7.932,1,9.266c0,0.521,0,1.277,0,2.012c-0.595,0.353-1,0.984-1,1.729c0,1.104,0.896,2,2,2s2-0.896,2-2c0-0.732-0.405-1.377-1-1.729V9.266c0-0.139,0.112-0.25,0.25-0.25h3.536C6.904,9.034,7,9.126,7,9.25v2.027C6.405,11.624,6,12.26,6,13c0,1.104,0.896,2,2.002,2c1.105,0,2-0.896,2-2c0-0.738-0.404-1.376-1-1.723V9.25c0-0.124,0.098-0.216,0.215-0.234h3.535c0.137,0,0.25,0.111,0.25,0.25v2.012c-0.596,0.353-1,0.984-1,1.729c0,1.104,0.896,2,2,2s2-0.896,2-2C16.002,12.262,15.598,11.623,15.002,11.277z'/%3e%3c/svg%3e");
+}
+
+.toolbar-icon-system-admin-structure:active:before,
+.toolbar-icon-system-admin-structure.is-active:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px'%3e%3cpath d='M15.002,11.277c0-0.721,0-1.471,0-2.014c0-1.456-0.824-2.25-2.25-2.25c-1.428,0-3.5,0-3.5,0c-0.139,0-0.25-0.112-0.25-0.25v-2.04c0.596-0.346,1-0.984,1-1.723c0-1.104-0.895-2-2-2C6.896,1,6,1.896,6,3c0,0.738,0.405,1.376,1,1.722v2.042c0,0.138-0.112,0.25-0.25,0.25c0,0-2.138,0-3.5,0S1,7.932,1,9.266c0,0.521,0,1.277,0,2.012c-0.595,0.353-1,0.984-1,1.729c0,1.104,0.896,2,2,2s2-0.896,2-2c0-0.732-0.405-1.377-1-1.729V9.266c0-0.139,0.112-0.25,0.25-0.25h3.536C6.904,9.034,7,9.126,7,9.25v2.027C6.405,11.624,6,12.26,6,13c0,1.104,0.896,2,2.002,2c1.105,0,2-0.896,2-2c0-0.738-0.404-1.376-1-1.723V9.25c0-0.124,0.098-0.216,0.215-0.234h3.535c0.137,0,0.25,0.111,0.25,0.25v2.012c-0.596,0.353-1,0.984-1,1.729c0,1.104,0.896,2,2,2s2-0.896,2-2C16.002,12.262,15.598,11.623,15.002,11.277z'/%3e%3c/svg%3e");
+}
+
+.toolbar-icon-system-themes-page:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M8.184 7.928l-1.905 1.983-3.538-2.436 4.714-4.713 2.623 3.183-1.894 1.983zm-1.746-7.523c-.236-.416-.803-.649-1.346.083-.259.349-4.727 4.764-4.91 4.983-.182.218-.294.721.044.976.34.258 5.611 3.933 5.611 3.933l-.225.229c.7.729.816.854 1.046.863.75.016 2.035-1.457 2.578-.854.541.604 3.537 3.979 3.537 3.979.51.531 1.305.559 1.815.041.521-.521.541-1.311.025-1.848 0 0-2.742-2.635-3.904-3.619-.578-.479.869-2.051.854-2.839-.008-.238-.125-.361-.823-1.095l-.22.243c0 .003-3.846-4.659-4.082-5.075z'/%3e%3c/svg%3e");
+}
+
+.toolbar-icon-system-themes-page:active:before,
+.toolbar-icon-system-themes-page.is-active:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23000000' d='M8.184 7.928l-1.905 1.983-3.538-2.436 4.714-4.713 2.623 3.183-1.894 1.983zm-1.746-7.523c-.236-.416-.803-.649-1.346.083-.259.349-4.727 4.764-4.91 4.983-.182.218-.294.721.044.976.34.258 5.611 3.933 5.611 3.933l-.225.229c.7.729.816.854 1.046.863.75.016 2.035-1.457 2.578-.854.541.604 3.537 3.979 3.537 3.979.51.531 1.305.559 1.815.041.521-.521.541-1.311.025-1.848 0 0-2.742-2.635-3.904-3.619-.578-.479.869-2.051.854-2.839-.008-.238-.125-.361-.823-1.095l-.22.243c0 .003-3.846-4.659-4.082-5.075z'/%3e%3c/svg%3e");
+}
+
+.toolbar-icon-entity-user-collection:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M6.722 11.291l.451-.17-.165-.32c-.536-1.039-.685-1.934-.761-2.672-.082-.808-.144-2.831 1.053-4.189.244-.278.493-.493.743-.675.012-.826-.135-1.766-.646-2.345-.618-.7-1.4-.787-1.4-.787l-.497-.055-.498.055s-.783.087-1.398.787c-.617.702-.717 1.948-.625 2.855.06.583.17 1.263.574 2.05.274.533.341.617.355 1.01.022.595.027 1.153-.671 1.538-.697.383-1.564.508-2.403 1.088-.596.41-.709 1.033-.78 1.459l-.051.41c-.029.273.173.498.448.498h5.012c.457-.24.89-.402 1.259-.537zM5.064 15.096c.07-.427.184-1.05.78-1.46.838-.581 1.708-.706 2.404-1.089.699-.385.693-.943.672-1.537-.014-.393-.08-.477-.354-1.01-.406-.787-.515-1.467-.576-2.049-.093-.909.008-2.155.625-2.856.615-.7 1.398-.787 1.398-.787l.492-.055h.002l.496.055s.781.087 1.396.787c.615.701.72 1.947.623 2.855-.062.583-.172 1.262-.571 2.049-.271.533-.341.617-.354 1.01-.021.595-.062 1.22.637 1.604.697.385 1.604.527 2.438 1.104.923.641.822 1.783.822 1.783-.022.275-.269.5-.542.5h-9.991c-.275 0-.477-.223-.448-.496l.051-.408z'/%3e%3c/g%3e%3c/svg%3e");
+}
+
+.toolbar-icon-entity-user-collection:active:before,
+.toolbar-icon-entity-user-collection.is-active:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23000000' d='M6.722 11.291l.451-.17-.165-.32c-.536-1.039-.685-1.934-.761-2.672-.082-.808-.144-2.831 1.053-4.189.244-.278.493-.493.743-.675.012-.826-.135-1.766-.646-2.345-.618-.7-1.4-.787-1.4-.787l-.497-.055-.498.055s-.783.087-1.398.787c-.617.702-.717 1.948-.625 2.855.06.583.17 1.263.574 2.05.274.533.341.617.355 1.01.022.595.027 1.153-.671 1.538-.697.383-1.564.508-2.403 1.088-.596.41-.709 1.033-.78 1.459l-.051.41c-.029.273.173.498.448.498h5.012c.457-.24.89-.402 1.259-.537zM5.064 15.096c.07-.427.184-1.05.78-1.46.838-.581 1.708-.706 2.404-1.089.699-.385.693-.943.672-1.537-.014-.393-.08-.477-.354-1.01-.406-.787-.515-1.467-.576-2.049-.093-.909.008-2.155.625-2.856.615-.7 1.398-.787 1.398-.787l.492-.055h.002l.496.055s.781.087 1.396.787c.615.701.72 1.947.623 2.855-.062.583-.172 1.262-.571 2.049-.271.533-.341.617-.354 1.01-.021.595-.062 1.22.637 1.604.697.385 1.604.527 2.438 1.104.923.641.822 1.783.822 1.783-.022.275-.269.5-.542.5h-9.991c-.275 0-.477-.223-.448-.496l.051-.408z'/%3e%3c/g%3e%3c/svg%3e");
+}
+
+.toolbar-icon-system-modules-list:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M11.002 11v2.529c0 .275-.225.471-.5.471h-3c-.827 0-1.112-.754-.604-1.316l.81-.725c.509-.562.513-1.461-.097-2.01-.383-.344-1.027-.728-2.111-.728s-1.727.386-2.109.731c-.609.549-.606 1.45-.097 2.015l.808.717c.509.562.223 1.316-.602 1.316h-3c-.276 0-.5-.193-.5-.471v-9.029c0-.276.224-.5.5-.5h3c.825 0 1.111-.768.602-1.332l-.808-.73c-.51-.563-.513-1.465.097-2.014.382-.344 1.025-.731 2.109-.731s1.728.387 2.111.731c.608.548.606 1.45.097 2.014l-.81.73c-.509.564-.223 1.332.603 1.332h3c.274 0 .5.224.5.5v2.5c0 .825.642 1.111 1.233.602l.771-.808c.599-.51 1.547-.513 2.127.097.364.383.772 1.025.772 2.109s-.408 1.727-.771 2.109c-.58.604-1.529.604-2.127.097l-.77-.808c-.593-.509-1.234-.223-1.234.602z'/%3e%3c/svg%3e");
+}
+
+.toolbar-icon-system-modules-list:active:before,
+.toolbar-icon-system-modules-list.is-active:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23000000' d='M11.002 11v2.529c0 .275-.225.471-.5.471h-3c-.827 0-1.112-.754-.604-1.316l.81-.725c.509-.562.513-1.461-.097-2.01-.383-.344-1.027-.728-2.111-.728s-1.727.386-2.109.731c-.609.549-.606 1.45-.097 2.015l.808.717c.509.562.223 1.316-.602 1.316h-3c-.276 0-.5-.193-.5-.471v-9.029c0-.276.224-.5.5-.5h3c.825 0 1.111-.768.602-1.332l-.808-.73c-.51-.563-.513-1.465.097-2.014.382-.344 1.025-.731 2.109-.731s1.728.387 2.111.731c.608.548.606 1.45.097 2.014l-.81.73c-.509.564-.223 1.332.603 1.332h3c.274 0 .5.224.5.5v2.5c0 .825.642 1.111 1.233.602l.771-.808c.599-.51 1.547-.513 2.127.097.364.383.772 1.025.772 2.109s-.408 1.727-.771 2.109c-.58.604-1.529.604-2.127.097l-.77-.808c-.593-.509-1.234-.223-1.234.602z'/%3e%3c/svg%3e");
+}
+
+.toolbar-icon-system-admin-config:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M14.416 11.586l-.01-.008v-.001l-5.656-5.656c.15-.449.252-.921.252-1.421 0-2.485-2.016-4.5-4.502-4.5-.505 0-.981.102-1.434.255l2.431 2.431-.588 2.196-2.196.588-2.445-2.445c-.162.464-.268.956-.268 1.475 0 2.486 2.014 4.5 4.5 4.5.5 0 .972-.102 1.421-.251l5.667 5.665c.781.781 2.047.781 2.828 0s.781-2.047 0-2.828z'/%3e%3c/svg%3e");
+}
+
+.toolbar-icon-system-admin-config:active:before,
+.toolbar-icon-system-admin-config.is-active:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23000000' d='M14.416 11.586l-.01-.008v-.001l-5.656-5.656c.15-.449.252-.921.252-1.421 0-2.485-2.016-4.5-4.502-4.5-.505 0-.981.102-1.434.255l2.431 2.431-.588 2.196-2.196.588-2.445-2.445c-.162.464-.268.956-.268 1.475 0 2.486 2.014 4.5 4.5 4.5.5 0 .972-.102 1.421-.251l5.667 5.665c.781.781 2.047.781 2.828 0s.781-2.047 0-2.828z'/%3e%3c/svg%3e");
+}
+
+.toolbar-icon-system-admin-reports:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M4 13.529c0 .275-.225.5-.5.5h-3c-.275 0-.5-.225-.5-.5v-4.25c0-.274.225-.5.5-.5h3c.275 0 .5.226.5.5v4.25zM10.002 13.529c0 .275-.225.5-.5.5h-3.002c-.275 0-.5-.225-.5-.5v-13c0-.275.225-.5.5-.5h3.002c.275 0 .5.225.5.5v13zM16.002 13.529c0 .275-.225.5-.5.5h-3c-.275 0-.5-.225-.5-.5v-9.5c0-.275.225-.5.5-.5h3c.275 0 .5.225.5.5v9.5z'/%3e%3c/g%3e%3c/svg%3e");
+}
+
+.toolbar-icon-system-admin-reports:active:before,
+.toolbar-icon-system-admin-reports.is-active:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23000000' d='M4 13.529c0 .275-.225.5-.5.5h-3c-.275 0-.5-.225-.5-.5v-4.25c0-.274.225-.5.5-.5h3c.275 0 .5.226.5.5v4.25zM10.002 13.529c0 .275-.225.5-.5.5h-3.002c-.275 0-.5-.225-.5-.5v-13c0-.275.225-.5.5-.5h3.002c.275 0 .5.225.5.5v13zM16.002 13.529c0 .275-.225.5-.5.5h-3c-.275 0-.5-.225-.5-.5v-9.5c0-.275.225-.5.5-.5h3c.275 0 .5.225.5.5v9.5z'/%3e%3c/g%3e%3c/svg%3e");
+}
+
+.toolbar-icon-help-main:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' 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-7zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393-.168.148-.35.299-.545.447l-.203.189-.141.129-.096.17-.021.235v.63h-2.001v-.704c.026-.396.078-.73.204-.999.125-.269.271-.498.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18c.098-.152.168-.323.168-.518 0-.552-.447-1-1-1s-1.002.448-1.002 1h-2c0-1.657 1.343-3 3.002-3 1.656 0 3 1.343 3 3zm-1.75 6.619c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z'/%3e%3c/svg%3e");
+}
+
+.toolbar-icon-help-main:active:before,
+.toolbar-icon-help-main.is-active:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23000000' 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-7zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393-.168.148-.35.299-.545.447l-.203.189-.141.129-.096.17-.021.235v.63h-2.001v-.704c.026-.396.078-.73.204-.999.125-.269.271-.498.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18c.098-.152.168-.323.168-.518 0-.552-.447-1-1-1s-1.002.448-1.002 1h-2c0-1.657 1.343-3 3.002-3 1.656 0 3 1.343 3 3zm-1.75 6.619c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z'/%3e%3c/svg%3e");
+}
+
+@media only screen and (min-width: 16.5em) {
+  .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
+    width: 4em;
+    margin-right: 0;
+    margin-left: 0;
+    padding-right: 0;
+    padding-left: 0;
+    text-indent: -9999px;
+  }
+  .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
+    left: 0; /* LTR */
+    width: 100%;
+    background-size: 42% auto;
+  }
+  .no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
+    background-size: auto auto;
+  }
+  [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
+    right: 0;
+    left: auto;
+  }
+}
+
+@media only screen and (min-width: 36em) {
+  .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
+    width: auto;
+    padding-right: 1.3333em; /* LTR */
+    padding-left: 2.75em; /* LTR */
+    text-indent: 0;
+    background-position: left center; /* LTR */
+  }
+  [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
+    padding-right: 2.75em;
+    padding-left: 1.3333em;
+    background-position: right center;
+  }
+  .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
+    left: 0.6667em; /* LTR */
+    width: 20px;
+    background-size: 100% auto;
+  }
+  .no-svg .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
+    background-size: auto auto;
+  }
+  [dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon:before {
+    right: 0.6667em;
+    left: 0;
+  }
+}
+
+/**
+ *  Accessibility/focus
+ */
+
+.toolbar-tab a:focus {
+  text-decoration: underline;
+  outline: none;
+}
+
+.toolbar-lining button:focus {
+  outline: none;
+}
+
+.toolbar-tray-horizontal a:focus,
+.toolbar-box a:focus {
+  outline: none;
+  background-color: #f5f5f5;
+}
+
+.toolbar-box a:hover:focus {
+  text-decoration: underline;
+}
+
+.toolbar .toolbar-icon.toolbar-handle:focus {
+  outline: none;
+  background-color: #f5f5f5;
+}
+
+/**
+ * Handle.
+ */
+
+.toolbar .toolbar-icon.toolbar-handle {
+  width: 4em;
+  text-indent: -9999px;
+}
+
+.toolbar .toolbar-icon.toolbar-handle:before {
+  left: 1.6667em; /* LTR */
+}
+
+[dir="rtl"] .toolbar .toolbar-icon.toolbar-handle:before {
+  right: 1.6667em;
+  left: auto;
+}
+
+.toolbar .toolbar-icon.toolbar-handle:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%235181C6' d='M8.002 1c-3.869 0-7.002 3.134-7.002 7s3.133 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.459 6.336l-4.105 4.105c-.196.189-.515.189-.708 0l-4.107-4.105c-.194-.194-.194-.513 0-.707l.977-.978c.194-.194.513-.194.707 0l2.422 2.421c.192.195.513.195.708 0l2.422-2.42c.188-.194.512-.194.707 0l.977.977c.193.194.193.513 0 .707z'/%3e%3c/svg%3e");
+}
+
+.toolbar .toolbar-icon.toolbar-handle.open:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M8.002 1c-3.867 0-7.002 3.134-7.002 7s3.135 7 7.002 7 7-3.134 7-7-3.133-7-7-7zm4.462 8.37l-.979.979c-.19.19-.516.19-.707 0l-2.422-2.419c-.196-.194-.515-.194-.708 0l-2.423 2.417c-.194.193-.513.193-.707 0l-.977-.976c-.194-.194-.194-.514 0-.707l4.106-4.106c.193-.194.515-.194.708 0l4.109 4.105c.19.192.19.513 0 .707z'/%3e%3c/svg%3e");
+}
+
+.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%235181C6' d='M2.611 5.393c-.17-.216-.084-.393.191-.393h10.397c.275 0 .361.177.191.393l-5.08 6.464c-.17.216-.452.216-.622 0l-5.077-6.464z'/%3e%3c/svg%3e");
+  background-size: 75%;
+}
+
+.toolbar .toolbar-menu .toolbar-menu .toolbar-icon.toolbar-handle.open:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M13.391 10.607c.17.216.084.393-.191.393h-10.398c-.275 0-.361-.177-.191-.393l5.08-6.464c.17-.216.45-.216.62 0l5.08 6.464z'/%3e%3c/svg%3e");
+  background-size: 75%;
+}
+
+.toolbar .toolbar-icon-escape-admin:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M8.002 1c-3.868 0-7.002 3.133-7.002 7 0 3.865 3.134 7 7.002 7 3.865 0 7-3.135 7-7 0-3.867-3.135-7-7-7zm2.348 10.482l-.977.977c-.195.193-.514.193-.707 0l-4.108-4.105c-.194-.195-.194-.514 0-.708l4.108-4.105c.193-.194.512-.194.707 0l.979.977c.191.194.191.513 0 .707l-2.422 2.421c-.195.194-.195.515 0 .708l2.419 2.421c.196.19.196.512.001.707z'/%3e%3c/svg%3e");
+}
+
+[dir="rtl"] .toolbar .toolbar-icon-escape-admin:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M8.002 1c-3.868 0-7.002 3.135-7.002 7 0 3.867 3.134 7 7.002 7 3.865 0 7-3.133 7-7 0-3.865-3.135-7-7-7zm3.441 7.357l-4.106 4.104c-.194.191-.514.191-.708 0l-.978-.979c-.194-.193-.194-.518 0-.707l2.423-2.421c.195-.195.195-.514 0-.708l-2.422-2.421c-.194-.194-.194-.513 0-.707l.977-.977c.194-.194.514-.194.708 0l4.106 4.108c.191.194.191.515 0 .708z'/%3e%3c/svg%3e");
+}
+
+/**
+ * Orientation toggle.
+ */
+
+.toolbar .toolbar-toggle-orientation button {
+  width: 39px;
+  height: 39px;
+  padding: 0;
+  text-indent: -999em;
+}
+
+.toolbar .toolbar-toggle-orientation button:before {
+  right: 0;
+  left: 0;
+  margin: 0 auto;
+}
+
+[dir="rtl"] .toolbar .toolbar-toggle-orientation .toolbar-icon {
+  padding: 0;
+}
+
+/**
+ * In order to support a hover effect on the SVG images, while also supporting
+ * RTL text direction and no SVG support, this little icon requires some very
+ * specific targeting, setting and unsetting.
+ */
+
+.toolbar .toolbar-toggle-orientation [value="vertical"]:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23bebebe' d='M2.5 2h-2.491v12.029h2.491c.276 0 .5-.225.5-.5v-11.029c0-.276-.224-.5-.5-.5zM14.502 6.029h-4c-.275 0-.5-.225-.5-.5v-1c0-.275-.16-.341-.354-.146l-3.294 3.292c-.194.194-.194.513 0 .708l3.294 3.293c.188.193.354.129.354-.146v-1c0-.271.227-.5.5-.5h4c.275 0 .5-.225.5-.5v-3c0-.276-.225-.501-.5-.501z'/%3e%3c/g%3e%3c/svg%3e"); /* LTR */
+}
+
+.toolbar .toolbar-toggle-orientation [value="vertical"]:hover:before,
+.toolbar .toolbar-toggle-orientation [value="vertical"]:focus:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M2.5 2h-2.491v12.029h2.491c.276 0 .5-.225.5-.5v-11.029c0-.276-.224-.5-.5-.5zM14.502 6.029h-4c-.275 0-.5-.225-.5-.5v-1c0-.275-.16-.341-.354-.146l-3.294 3.292c-.194.194-.194.513 0 .708l3.294 3.293c.188.193.354.129.354-.146v-1c0-.271.227-.5.5-.5h4c.275 0 .5-.225.5-.5v-3c0-.276-.225-.501-.5-.501z'/%3e%3c/g%3e%3c/svg%3e"); /* LTR */
+}
+
+[dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23bebebe' d='M13.51 2c-.275 0-.5.224-.5.5v11.029c0 .275.225.5.5.5h2.492v-12.029h-2.492zM6.362 4.382c-.194-.194-.353-.128-.353.147v1c0 .275-.225.5-.5.5h-4c-.275 0-.5.225-.5.5v3c0 .271.225.5.5.5h4c.275 0 .5.225.5.5v1c0 .271.159.34.354.146l3.295-3.293c.193-.194.193-.513 0-.708l-3.296-3.292z'/%3e%3c/g%3e%3c/svg%3e");
+}
+
+[dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:hover:before,
+[dir="rtl"] .toolbar .toolbar-toggle-orientation [value="vertical"]:focus:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M13.51 2c-.275 0-.5.224-.5.5v11.029c0 .275.225.5.5.5h2.492v-12.029h-2.492zM6.362 4.382c-.194-.194-.353-.128-.353.147v1c0 .275-.225.5-.5.5h-4c-.275 0-.5.225-.5.5v3c0 .271.225.5.5.5h4c.275 0 .5.225.5.5v1c0 .271.159.34.354.146l3.295-3.293c.193-.194.193-.513 0-.708l-3.296-3.292z'/%3e%3c/g%3e%3c/svg%3e");
+}
+
+.toolbar .toolbar-toggle-orientation [value="horizontal"]:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23bebebe' d='M1.986.019v2.491c0 .276.225.5.5.5h11.032c.275 0 .5-.224.5-.5v-2.491h-12.032zM8.342 6.334c-.193-.194-.513-.194-.708 0l-3.294 3.293c-.194.195-.129.353.146.353h1c.275 0 .5.227.5.5v4.02c0 .275.225.5.5.5h3.002c.271 0 .5-.225.5-.5v-4.02c0-.274.225-.5.5-.5h1c.271 0 .34-.158.145-.354l-3.291-3.292z'/%3e%3c/g%3e%3c/svg%3e");
+}
+
+.toolbar .toolbar-toggle-orientation [value="horizontal"]:hover:before,
+.toolbar .toolbar-toggle-orientation [value="horizontal"]:focus:before {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M1.986.019v2.491c0 .276.225.5.5.5h11.032c.275 0 .5-.224.5-.5v-2.491h-12.032zM8.342 6.334c-.193-.194-.513-.194-.708 0l-3.294 3.293c-.194.195-.129.353.146.353h1c.275 0 .5.227.5.5v4.02c0 .275.225.5.5.5h3.002c.271 0 .5-.225.5-.5v-4.02c0-.274.225-.5.5-.5h1c.271 0 .34-.158.145-.354l-3.291-3.292z'/%3e%3c/g%3e%3c/svg%3e");
+}
diff --git a/core/themes/stable9/css/toolbar/toolbar.icons.theme.css b/core/themes/claro/css/theme/toolbar.icons.theme.pcss.css
similarity index 98%
copy from core/themes/stable9/css/toolbar/toolbar.icons.theme.css
copy to core/themes/claro/css/theme/toolbar.icons.theme.pcss.css
index b0942631b8..371d729f1d 100644
--- a/core/themes/stable9/css/toolbar/toolbar.icons.theme.css
+++ b/core/themes/claro/css/theme/toolbar.icons.theme.pcss.css
@@ -1,6 +1,9 @@
 /**
  * @file
  * Styling for toolbar module icons.
+ *
+ * If Claro is the admin theme, this stylesheet will be used by the active theme
+ * even if the active theme is not Claro.
  */
 
 .toolbar .toolbar-icon {
diff --git a/core/themes/stable9/css/toolbar/toolbar.theme.css b/core/themes/claro/css/theme/toolbar.theme.css
similarity index 94%
copy from core/themes/stable9/css/toolbar/toolbar.theme.css
copy to core/themes/claro/css/theme/toolbar.theme.css
index 0416c056ad..3fc152aeea 100644
--- a/core/themes/stable9/css/toolbar/toolbar.theme.css
+++ b/core/themes/claro/css/theme/toolbar.theme.css
@@ -1,5 +1,14 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
 /**
  * @file toolbar.theme.css
+ *
+ * If Claro is the admin theme, this stylesheet will be used by the active theme
+ * even if the active theme is not Claro.
  */
 .toolbar {
   font-family: "Source Sans Pro", "Lucida Grande", Verdana, sans-serif;
@@ -24,7 +33,6 @@
 .toolbar .toolbar-item:focus {
   text-decoration: underline;
 }
-
 /**
  * Toolbar bar.
  */
@@ -44,14 +52,11 @@
 }
 .toolbar .toolbar-bar .toolbar-tab > .toolbar-item:hover,
 .toolbar .toolbar-bar .toolbar-tab > .toolbar-item:focus {
-  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
   background-image: linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
 }
 .toolbar .toolbar-bar .toolbar-tab > .toolbar-item.is-active {
-  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
   background-image: linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
 }
-
 /**
  * Toolbar tray.
  */
@@ -140,7 +145,6 @@
 .toolbar .toolbar-menu .toolbar-menu a {
   color: #434343;
 }
-
 /**
  * Orientation toggle.
  */
diff --git a/core/themes/stable9/css/toolbar/toolbar.theme.css b/core/themes/claro/css/theme/toolbar.theme.pcss.css
similarity index 97%
copy from core/themes/stable9/css/toolbar/toolbar.theme.css
copy to core/themes/claro/css/theme/toolbar.theme.pcss.css
index 0416c056ad..578d98eeb0 100644
--- a/core/themes/stable9/css/toolbar/toolbar.theme.css
+++ b/core/themes/claro/css/theme/toolbar.theme.pcss.css
@@ -1,5 +1,8 @@
 /**
  * @file toolbar.theme.css
+ *
+ * If Claro is the admin theme, this stylesheet will be used by the active theme
+ * even if the active theme is not Claro.
  */
 .toolbar {
   font-family: "Source Sans Pro", "Lucida Grande", Verdana, sans-serif;
diff --git a/core/themes/stable/templates/navigation/menu--toolbar.html.twig b/core/themes/claro/templates/navigation/menu--toolbar.html.twig
similarity index 89%
copy from core/themes/stable/templates/navigation/menu--toolbar.html.twig
copy to core/themes/claro/templates/navigation/menu--toolbar.html.twig
index c9702f5c06..fd9350d376 100644
--- a/core/themes/stable/templates/navigation/menu--toolbar.html.twig
+++ b/core/themes/claro/templates/navigation/menu--toolbar.html.twig
@@ -3,6 +3,9 @@
  * @file
  * Theme override to display a toolbar menu.
  *
+ * If Claro is the admin theme, this template will be used by the active theme
+ * even if the active theme is not Claro.
+ *
  * Available variables:
  * - menu_name: The machine name of the menu.
  * - items: A nested list of menu items. Each menu item contains:
@@ -30,7 +33,7 @@
   {% import _self as menus %}
   {% if items %}
     {% if menu_level == 0 %}
-      <ul{{ attributes.addClass('toolbar-menu') }}>
+      <ul{{ attributes.addClass('toolbar-menu', 'claro-toolbar-menu') }}>
     {% else %}
       <ul class="toolbar-menu">
     {% endif %}
diff --git a/core/themes/stable/templates/navigation/toolbar.html.twig b/core/themes/claro/templates/navigation/toolbar.html.twig
similarity index 89%
copy from core/themes/stable/templates/navigation/toolbar.html.twig
copy to core/themes/claro/templates/navigation/toolbar.html.twig
index efbe00c2db..f7057544c4 100644
--- a/core/themes/stable/templates/navigation/toolbar.html.twig
+++ b/core/themes/claro/templates/navigation/toolbar.html.twig
@@ -3,6 +3,9 @@
  * @file
  * Theme override for the administrative toolbar.
  *
+ * If Claro is the admin theme, this template will be used by the active theme
+ * even if the active theme is not Claro.
+ *
  * Available variables:
  * - attributes: HTML attributes for the wrapper.
  * - toolbar_attributes: HTML attributes to apply to the toolbar.
@@ -20,7 +23,7 @@
  * @see template_preprocess_toolbar()
  */
 #}
-<div{{ attributes.addClass('toolbar') }}>
+<div{{ attributes.addClass('toolbar', 'claro-toolbar') }}>
   <nav{{ toolbar_attributes.addClass('toolbar-bar') }}>
     <h2 class="visually-hidden">{{ toolbar_heading }}</h2>
     {% for key, tab in tabs %}