diff --git a/core/themes/claro/css/base/variables.css b/core/themes/claro/css/base/variables.css
index 5dcccbf2608daa6948a9af616df3ccc6ced13310..80e8ca32d77c4e9a6fa7b2b75a60ba1a776b9b7a 100644
--- a/core/themes/claro/css/base/variables.css
+++ b/core/themes/claro/css/base/variables.css
@@ -253,4 +253,30 @@
*/
--layout-region-edit-width: min(60rem, 100%);
--layout-region-edit-extended-width: min(68rem, 100%);
+ /**
+ * Vertical Tabs.
+ *
+ * These are shared between the vertical tabs and media library.
+ * @see ../components/vertical-tabs.pcss.css
+ * @see ../theme/media-library.pcss.css
+ */
+ --vertical-tabs-margin-vertical: var(--space-s);
+ --vertical-tabs-border-radius: var(--details-accordion-border-size-radius);
+ --vertical-tabs-shadow: var(--details-box-shadow);
+ --vertical-tabs-border-color: var(--details-border-color);
+ --vertical-tabs-border-size: 1px;
+ --vertical-tabs-border: var(--vertical-tabs-border-size) solid var(--vertical-tabs-border-color);
+ --vertical-tabs-menu-item-shadow-extraspace: 0.5rem;
+ --vertical-tabs-menu-item--top-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2);
+ --vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size) * -1);
+ --vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
+ --vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
+ --vertical-tabs-menu-separator-color: var(--color-gray-200);
+ --vertical-tabs-menu-separator-size: 1px;
+ --vertical-tabs-menu-width: 20em;
+ --vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width));
+ --vertical-tabs-menu-link-focus-border-size: var(--details-summary-focus-border-size);
+ --vertical-tabs-menu-link--active-border-size: 0.25rem;
+ --vertical-tabs-menu-link--active-border-color: var(--color-absolutezero);
+ --vertical-tabs-menu--z-index: 0;
}
diff --git a/core/themes/claro/css/base/variables.pcss.css b/core/themes/claro/css/base/variables.pcss.css
index 202787031f3673a97af8d38b1149b0039ab07562..96f738aa269a83532365a14cab90ac7995274ad3 100644
--- a/core/themes/claro/css/base/variables.pcss.css
+++ b/core/themes/claro/css/base/variables.pcss.css
@@ -247,4 +247,30 @@
*/
--layout-region-edit-width: min(960px, 100%);
--layout-region-edit-extended-width: min(1088px, 100%);
+ /**
+ * Vertical Tabs.
+ *
+ * These are shared between the vertical tabs and media library.
+ * @see ../components/vertical-tabs.pcss.css
+ * @see ../theme/media-library.pcss.css
+ */
+ --vertical-tabs-margin-vertical: var(--space-s);
+ --vertical-tabs-border-radius: var(--details-accordion-border-size-radius);
+ --vertical-tabs-shadow: var(--details-box-shadow);
+ --vertical-tabs-border-color: var(--details-border-color);
+ --vertical-tabs-border-size: 1px;
+ --vertical-tabs-border: var(--vertical-tabs-border-size) solid var(--vertical-tabs-border-color);
+ --vertical-tabs-menu-item-shadow-extraspace: 0.5rem;
+ --vertical-tabs-menu-item--top-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2);
+ --vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size) * -1);
+ --vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
+ --vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
+ --vertical-tabs-menu-separator-color: var(--color-gray-200);
+ --vertical-tabs-menu-separator-size: 1px;
+ --vertical-tabs-menu-width: 20em;
+ --vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width));
+ --vertical-tabs-menu-link-focus-border-size: var(--details-summary-focus-border-size);
+ --vertical-tabs-menu-link--active-border-size: 4px;
+ --vertical-tabs-menu-link--active-border-color: var(--color-absolutezero);
+ --vertical-tabs-menu--z-index: 0;
}
diff --git a/core/themes/claro/css/components/vertical-tabs.css b/core/themes/claro/css/components/vertical-tabs.css
index f00e953cbb091413e5b2a5b050e33cb84ba278b5..85d0f0f82f38ed4b97fab0166b73887d79dbacbb 100644
--- a/core/themes/claro/css/components/vertical-tabs.css
+++ b/core/themes/claro/css/components/vertical-tabs.css
@@ -12,31 +12,6 @@
* Replaces /core/misc/vertical-tabs.css.
*/
-:root {
- /**
- * Vertical Tabs.
- */
- --vertical-tabs-margin-vertical: var(--space-s);
- --vertical-tabs-border-radius: var(--details-accordion-border-size-radius);
- --vertical-tabs-shadow: var(--details-box-shadow);
- --vertical-tabs-border-color: var(--details-border-color);
- --vertical-tabs-border-size: 1px;
- --vertical-tabs-border: var(--vertical-tabs-border-size) solid var(--vertical-tabs-border-color);
- --vertical-tabs-menu-item-shadow-extraspace: 0.5rem;
- --vertical-tabs-menu-item--top-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2);
- --vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size) * -1);
- --vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
- --vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
- --vertical-tabs-menu-separator-color: var(--color-gray-200);
- --vertical-tabs-menu-separator-size: 1px;
- --vertical-tabs-menu-width: 20em;
- --vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width));
- --vertical-tabs-menu-link-focus-border-size: var(--details-summary-focus-border-size);
- --vertical-tabs-menu-link--active-border-size: 0.25rem;
- --vertical-tabs-menu-link--active-border-color: var(--color-absolutezero);
- --vertical-tabs-menu--z-index: 0;
-}
-
/**
* Main wrapper of vertical tabs.
* This wrapper div is added by JavaScript.
diff --git a/core/themes/claro/css/components/vertical-tabs.pcss.css b/core/themes/claro/css/components/vertical-tabs.pcss.css
index c85061f70b88a0fdbfb0a09c5b3c32825bafdf99..7c38c47e95cf8c0e0ed4e6cc95b75efd5bb9cd12 100644
--- a/core/themes/claro/css/components/vertical-tabs.pcss.css
+++ b/core/themes/claro/css/components/vertical-tabs.pcss.css
@@ -5,31 +5,6 @@
* Replaces /core/misc/vertical-tabs.css.
*/
-:root {
- /**
- * Vertical Tabs.
- */
- --vertical-tabs-margin-vertical: var(--space-s);
- --vertical-tabs-border-radius: var(--details-accordion-border-size-radius);
- --vertical-tabs-shadow: var(--details-box-shadow);
- --vertical-tabs-border-color: var(--details-border-color);
- --vertical-tabs-border-size: 1px;
- --vertical-tabs-border: var(--vertical-tabs-border-size) solid var(--vertical-tabs-border-color);
- --vertical-tabs-menu-item-shadow-extraspace: 0.5rem;
- --vertical-tabs-menu-item--top-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2);
- --vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size) * -1);
- --vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
- --vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
- --vertical-tabs-menu-separator-color: var(--color-gray-200);
- --vertical-tabs-menu-separator-size: 1px;
- --vertical-tabs-menu-width: 20em;
- --vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width));
- --vertical-tabs-menu-link-focus-border-size: var(--details-summary-focus-border-size);
- --vertical-tabs-menu-link--active-border-size: 4px;
- --vertical-tabs-menu-link--active-border-color: var(--color-absolutezero);
- --vertical-tabs-menu--z-index: 0;
-}
-
/**
* Main wrapper of vertical tabs.
* This wrapper div is added by JavaScript.