diff --git a/core/themes/claro/css/base/variables.css b/core/themes/claro/css/base/variables.css
index 14df9b551c6785849072c4a1583ce56105695d47..327c8b9ba971037df6bc152b63df99fec0f9086b 100644
--- a/core/themes/claro/css/base/variables.css
+++ b/core/themes/claro/css/base/variables.css
@@ -249,26 +249,4 @@
    * Breadcrumb.
    */
   --breadcrumb-height: 1.25rem;
-  /**
-    * 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;
 }
diff --git a/core/themes/claro/css/base/variables.pcss.css b/core/themes/claro/css/base/variables.pcss.css
index 9a17cf871058c293794c4f88e891e59c7f44647f..0db1ec674afea277a764f0aacac94ba561642cf0 100644
--- a/core/themes/claro/css/base/variables.pcss.css
+++ b/core/themes/claro/css/base/variables.pcss.css
@@ -243,26 +243,4 @@
    * Breadcrumb.
    */
   --breadcrumb-height: 1.25rem;
-  /**
-    * 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;
 }
diff --git a/core/themes/claro/css/components/vertical-tabs.css b/core/themes/claro/css/components/vertical-tabs.css
index 871ba2cc67af20db103a8fe406f8d7d4fe5d0757..f00e953cbb091413e5b2a5b050e33cb84ba278b5 100644
--- a/core/themes/claro/css/components/vertical-tabs.css
+++ b/core/themes/claro/css/components/vertical-tabs.css
@@ -12,15 +12,39 @@
  * 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.
  */
 
 .vertical-tabs {
-  margin-top: var(--vertical-tabs-margin-vertical);
-  margin-bottom: var(--vertical-tabs-margin-vertical);
-  border-top: 1px solid transparent; /* Need to hide the pane wrapper clearfix's height */
+  margin-block: var(--vertical-tabs-margin-vertical);
+  border-block-start: 1px solid transparent; /* Need to hide the pane wrapper clearfix's height */
 }
 
 /**
@@ -33,14 +57,13 @@
   float: left; /* LTR */
   width: var(--vertical-tabs-menu-width);
   margin: 0;
-  padding-top: var(--vertical-tabs-menu-item-shadow-extraspace);
+  padding-block-start: var(--vertical-tabs-menu-item-shadow-extraspace);
   list-style: none;
   color: var(--color-text);
 }
 
 [dir="rtl"] .vertical-tabs__menu {
   float: right;
-  margin: 0;
 }
 
 /**
@@ -49,15 +72,10 @@
 
 .vertical-tabs__menu-item {
   overflow: hidden;
-  margin: var(--vertical-tabs-menu-item--top-margin) var(--vertical-tabs-menu-item--right-margin) var(--vertical-tabs-menu-item--bottom-margin) var(--vertical-tabs-menu-item--left-margin); /* LTR */
-  padding: var(--vertical-tabs-menu-item-shadow-extraspace) 0 var(--vertical-tabs-menu-item-shadow-extraspace) var(--vertical-tabs-menu-item-shadow-extraspace); /* LTR */
-}
-
-[dir="rtl"] .vertical-tabs__menu-item {
-  margin-right: var(--vertical-tabs-menu-item--left-margin);
-  margin-left: var(--vertical-tabs-menu-item--right-margin);
-  padding-right: var(--vertical-tabs-menu-item-shadow-extraspace);
-  padding-left: 0;
+  margin-block: var(--vertical-tabs-menu-item--top-margin);
+  margin-inline: var(--vertical-tabs-menu-item--left-margin) var(--vertical-tabs-menu-item--right-margin);
+  padding-block: var(--vertical-tabs-menu-item-shadow-extraspace);
+  padding-inline: var(--vertical-tabs-menu-item-shadow-extraspace) 0;
 }
 
 /**
@@ -71,8 +89,8 @@
   z-index: 1; /* The line should be kept above the vertical tabs menu link to keep it visible even if the link is hovered and gets the 'hover' background color. */
   display: block;
   width: 100%;
-  margin-top: calc(var(--vertical-tabs-menu-separator-size) * -1);
-  border-top: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
+  margin-block-start: calc(var(--vertical-tabs-menu-separator-size) * -1);
+  border-block-start: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
 }
 
 /**
@@ -123,8 +141,8 @@
 .vertical-tabs__menu-link {
   position: relative;
   display: block;
-  margin-top: calc(var(--vertical-tabs-border-size) * -1);
-  padding: var(--space-s) var(--space-s) var(--space-s) calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size)); /* LTR */
+  margin-block-start: calc(var(--vertical-tabs-border-size) * -1);
+  padding: var(--space-s) var(--space-s) var(--space-s) calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size));
   -webkit-text-decoration: none;
   text-decoration: none;
   word-wrap: break-word;
@@ -132,19 +150,14 @@
   hyphens: auto;
   color: var(--color-text);
   border: var(--vertical-tabs-border-size) solid transparent;
-  border-width: var(--vertical-tabs-border-size) 0 var(--vertical-tabs-border-size) var(--vertical-tabs-menu-link--active-border-size); /* LTR */
-  border-radius: var(--vertical-tabs-border-radius) 0 0 var(--vertical-tabs-border-radius); /* LTR */
+  border-block-width: var(--vertical-tabs-border-size);
+  border-inline-width: var(--vertical-tabs-menu-link--active-border-size) 0;
+  border-start-start-radius: var(--vertical-tabs-border-radius);
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  border-end-start-radius: var(--vertical-tabs-border-radius);
 }
 
-[dir="rtl"] .vertical-tabs__menu-link {
-  padding-right: calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size));
-  padding-left: var(--space-s);
-  border-width: var(--vertical-tabs-border-size) var(--vertical-tabs-menu-link--active-border-size) var(--vertical-tabs-border-size) 0;
-  border-radius: 0 var(--vertical-tabs-border-radius) var(--vertical-tabs-border-radius) 0;
-}
-
-/* Menu link states. */
-
 .vertical-tabs__menu-link:focus {
   z-index: 4; /* Focus state should be on the highest level to make the focus effect be fully visible. This also means that it should have bigger z-index than the selected link. */
   -webkit-text-decoration: none;
@@ -152,46 +165,34 @@
   box-shadow: none;
 }
 
-.vertical-tabs__menu-link:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: var(--color-absolutezero);
-}
-
-/* This pseudo element provides the background for the hover state. */
-
-.vertical-tabs__menu-link::before {
+.vertical-tabs__menu-link:focus::after {
   position: absolute;
-  z-index: 0; /* This should be on a lower level than the menu-item separator lines. */
-  top: calc(var(--vertical-tabs-border-size) * -1);
-  right: 0; /* LTR */
-  bottom: calc(var(--vertical-tabs-border-size) * -1);
-  left: calc(var(--vertical-tabs-menu-link--active-border-size) * -1); /* LTR */
+  inset: 0;
+  margin: calc(var(--vertical-tabs-border-size) * -1) calc(var(--vertical-tabs-menu-link--active-border-size) * -1);
   content: "";
   pointer-events: none;
-  background-clip: padding-box;
+  border: var(--vertical-tabs-menu-link-focus-border-size) solid var(--color-focus);
+  border-radius: var(--vertical-tabs-border-radius);
 }
 
-[dir="rtl"] .vertical-tabs__menu-link::before {
-  right: calc(var(--vertical-tabs-menu-link--active-border-size) * -1);
-  left: 0;
+.vertical-tabs__menu-link:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: var(--color-absolutezero);
 }
 
 .vertical-tabs__menu-link:hover::before {
   background: var(--color-bgblue-hover);
 }
 
-.vertical-tabs__menu-link:focus::after {
+.vertical-tabs__menu-link::before {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  margin: calc(var(--vertical-tabs-border-size) * -1) calc(var(--vertical-tabs-menu-link--active-border-size) * -1);
+  z-index: 0; /* This should be on a lower level than the menu-item separator lines. */
+  inset-block: calc(var(--vertical-tabs-border-size) * -1);
+  inset-inline: calc(var(--vertical-tabs-menu-link--active-border-size) * -1) 0;
   content: "";
   pointer-events: none;
-  border: var(--vertical-tabs-menu-link-focus-border-size) solid var(--color-focus);
-  border-radius: var(--vertical-tabs-border-radius);
+  background-clip: padding-box;
 }
 
 .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link {
@@ -209,14 +210,12 @@
 
 .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::before {
   z-index: 1; /* The blue active-tab indication should be on a higher level than the green focus border. */
-  border-left: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color); /* LTR */
-  border-radius: var(--base-border-radius) 0 0 var(--base-border-radius); /* LTR */
-}
-
-[dir="rtl"] .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::before {
-  border-right: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color);
-  border-left: 0;
-  border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0;
+  border-inline-start: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color);
+  border-radius: var(--base-border-radius) 0 0 var(--base-border-radius);
+  border-start-start-radius: var(--base-border-radius);
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  border-end-start-radius: var(--base-border-radius);
 }
 
 .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link:hover::before {
@@ -245,8 +244,7 @@
 
 .vertical-tabs__items {
   box-sizing: border-box;
-  margin-top: var(--vertical-tabs-margin-vertical);
-  margin-bottom: var(--vertical-tabs-margin-vertical);
+  margin-block: var(--vertical-tabs-margin-vertical);
   color: var(--color-text);
   border: var(--vertical-tabs-border);
   border-radius: var(--vertical-tabs-border-radius);
@@ -259,29 +257,23 @@
 .vertical-tabs__panes {
   position: relative;
   z-index: 1; /* The wrapper of the details of the vertical tabs should be on a higher level than the vertical tabs menu */
-  top: -1px;
-  margin-top: 0;
-  margin-bottom: 0;
+  inset-block-start: -1px;
+  margin-block: 0;
 }
 
-/* This clearfix makes the pane wrapper at least as tall as the menu. */
-
 .vertical-tabs__panes::after {
-  display: block;
+  display: block; /* This clearfix makes the pane wrapper at least as tall as the menu. */
   clear: both;
   content: "";
 }
 
 .vertical-tabs .vertical-tabs__panes {
-  margin-left: var(--vertical-tabs-menu-width); /* LTR */
-  border-top-left-radius: 0; /* LTR */
+  margin-inline-start: var(--vertical-tabs-menu-width);
+  border-top-left-radius: 0;
 }
 
-[dir="rtl"] .vertical-tabs .vertical-tabs__panes {
-  margin-right: var(--vertical-tabs-menu-width);
-  margin-left: 0;
+[dir="rtl"] :is(.vertical-tabs .vertical-tabs__panes) {
   border-top-left-radius: var(--vertical-tabs-border-radius);
-  border-top-right-radius: 0;
 }
 
 /**
diff --git a/core/themes/claro/css/components/vertical-tabs.pcss.css b/core/themes/claro/css/components/vertical-tabs.pcss.css
index f391624ec34eb665def2a986df727712a354b261..c85061f70b88a0fdbfb0a09c5b3c32825bafdf99 100644
--- a/core/themes/claro/css/components/vertical-tabs.pcss.css
+++ b/core/themes/claro/css/components/vertical-tabs.pcss.css
@@ -5,14 +5,38 @@
  * 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.
  */
 .vertical-tabs {
-  margin-top: var(--vertical-tabs-margin-vertical);
-  margin-bottom: var(--vertical-tabs-margin-vertical);
-  border-top: 1px solid transparent; /* Need to hide the pane wrapper clearfix's height */
+  margin-block: var(--vertical-tabs-margin-vertical);
+  border-block-start: 1px solid transparent; /* Need to hide the pane wrapper clearfix's height */
 }
 
 /**
@@ -24,13 +48,13 @@
   float: left; /* LTR */
   width: var(--vertical-tabs-menu-width);
   margin: 0;
-  padding-top: var(--vertical-tabs-menu-item-shadow-extraspace);
+  padding-block-start: var(--vertical-tabs-menu-item-shadow-extraspace);
   list-style: none;
   color: var(--color-text);
-}
-[dir="rtl"] .vertical-tabs__menu {
-  float: right;
-  margin: 0;
+
+  @nest [dir="rtl"] & {
+    float: right;
+  }
 }
 
 /**
@@ -38,14 +62,10 @@
  */
 .vertical-tabs__menu-item {
   overflow: hidden;
-  margin: var(--vertical-tabs-menu-item--top-margin) var(--vertical-tabs-menu-item--right-margin) var(--vertical-tabs-menu-item--bottom-margin) var(--vertical-tabs-menu-item--left-margin); /* LTR */
-  padding: var(--vertical-tabs-menu-item-shadow-extraspace) 0 var(--vertical-tabs-menu-item-shadow-extraspace) var(--vertical-tabs-menu-item-shadow-extraspace); /* LTR */
-}
-[dir="rtl"] .vertical-tabs__menu-item {
-  margin-right: var(--vertical-tabs-menu-item--left-margin);
-  margin-left: var(--vertical-tabs-menu-item--right-margin);
-  padding-right: var(--vertical-tabs-menu-item-shadow-extraspace);
-  padding-left: 0;
+  margin-block: var(--vertical-tabs-menu-item--top-margin);
+  margin-inline: var(--vertical-tabs-menu-item--left-margin) var(--vertical-tabs-menu-item--right-margin);
+  padding-block: var(--vertical-tabs-menu-item-shadow-extraspace);
+  padding-inline: var(--vertical-tabs-menu-item-shadow-extraspace) 0;
 }
 
 /**
@@ -58,8 +78,8 @@
   z-index: 1; /* The line should be kept above the vertical tabs menu link to keep it visible even if the link is hovered and gets the 'hover' background color. */
   display: block;
   width: 100%;
-  margin-top: calc(var(--vertical-tabs-menu-separator-size) * -1);
-  border-top: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
+  margin-block-start: calc(var(--vertical-tabs-menu-separator-size) * -1);
+  border-block-start: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
 }
 
 /**
@@ -105,67 +125,53 @@
 .vertical-tabs__menu-link {
   position: relative;
   display: block;
-  margin-top: calc(var(--vertical-tabs-border-size) * -1);
-  padding: var(--space-s) var(--space-s) var(--space-s) calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size)); /* LTR */
+  margin-block-start: calc(var(--vertical-tabs-border-size) * -1);
+  padding: var(--space-s) var(--space-s) var(--space-s) calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size));
   text-decoration: none;
   word-wrap: break-word;
   hyphens: auto;
   color: var(--color-text);
   border: var(--vertical-tabs-border-size) solid transparent;
-  border-width: var(--vertical-tabs-border-size) 0 var(--vertical-tabs-border-size) var(--vertical-tabs-menu-link--active-border-size); /* LTR */
-  border-radius: var(--vertical-tabs-border-radius) 0 0 var(--vertical-tabs-border-radius); /* LTR */
-}
-[dir="rtl"] .vertical-tabs__menu-link {
-  padding-right: calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size));
-  padding-left: var(--space-s);
-  border-width: var(--vertical-tabs-border-size) var(--vertical-tabs-menu-link--active-border-size) var(--vertical-tabs-border-size) 0;
-  border-radius: 0 var(--vertical-tabs-border-radius) var(--vertical-tabs-border-radius) 0;
-}
+  border-block-width: var(--vertical-tabs-border-size);
+  border-inline-width: var(--vertical-tabs-menu-link--active-border-size) 0;
+  border-start-start-radius: var(--vertical-tabs-border-radius);
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  border-end-start-radius: var(--vertical-tabs-border-radius);
 
-/* Menu link states. */
-.vertical-tabs__menu-link:focus {
-  z-index: 4; /* Focus state should be on the highest level to make the focus effect be fully visible. This also means that it should have bigger z-index than the selected link. */
-  text-decoration: none;
-  box-shadow: none;
-}
-
-.vertical-tabs__menu-link:hover {
-  text-decoration: none;
-  color: var(--color-absolutezero);
-}
+  &:focus {
+    z-index: 4; /* Focus state should be on the highest level to make the focus effect be fully visible. This also means that it should have bigger z-index than the selected link. */
+    text-decoration: none;
+    box-shadow: none;
 
-/* This pseudo element provides the background for the hover state. */
-.vertical-tabs__menu-link::before {
-  position: absolute;
-  z-index: 0; /* This should be on a lower level than the menu-item separator lines. */
-  top: calc(var(--vertical-tabs-border-size) * -1);
-  right: 0; /* LTR */
-  bottom: calc(var(--vertical-tabs-border-size) * -1);
-  left: calc(var(--vertical-tabs-menu-link--active-border-size) * -1); /* LTR */
-  content: "";
-  pointer-events: none;
-  background-clip: padding-box;
-}
-[dir="rtl"] .vertical-tabs__menu-link::before {
-  right: calc(var(--vertical-tabs-menu-link--active-border-size) * -1);
-  left: 0;
-}
+    &::after {
+      position: absolute;
+      inset: 0;
+      margin: calc(var(--vertical-tabs-border-size) * -1) calc(var(--vertical-tabs-menu-link--active-border-size) * -1);
+      content: "";
+      pointer-events: none;
+      border: var(--vertical-tabs-menu-link-focus-border-size) solid var(--color-focus);
+      border-radius: var(--vertical-tabs-border-radius);
+    }
+  }
 
-.vertical-tabs__menu-link:hover::before {
-  background: var(--color-bgblue-hover);
-}
+  &:hover {
+    text-decoration: none;
+    color: var(--color-absolutezero);
+    &::before {
+      background: var(--color-bgblue-hover);
+    }
+  }
 
-.vertical-tabs__menu-link:focus::after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  margin: calc(var(--vertical-tabs-border-size) * -1) calc(var(--vertical-tabs-menu-link--active-border-size) * -1);
-  content: "";
-  pointer-events: none;
-  border: var(--vertical-tabs-menu-link-focus-border-size) solid var(--color-focus);
-  border-radius: var(--vertical-tabs-border-radius);
+  &::before {
+    position: absolute;
+    z-index: 0; /* This should be on a lower level than the menu-item separator lines. */
+    inset-block: calc(var(--vertical-tabs-border-size) * -1);
+    inset-inline: calc(var(--vertical-tabs-menu-link--active-border-size) * -1) 0;
+    content: "";
+    pointer-events: none;
+    background-clip: padding-box;
+  }
 }
 
 .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link {
@@ -183,13 +189,12 @@
 
 .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::before {
   z-index: 1; /* The blue active-tab indication should be on a higher level than the green focus border. */
-  border-left: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color); /* LTR */
-  border-radius: var(--base-border-radius) 0 0 var(--base-border-radius); /* LTR */
-}
-[dir=rtl] .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link::before {
-  border-right: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color);
-  border-left: 0;
-  border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0;
+  border-inline-start: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color);
+  border-radius: var(--base-border-radius) 0 0 var(--base-border-radius);
+  border-start-start-radius: var(--base-border-radius);
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  border-end-start-radius: var(--base-border-radius);
 }
 
 .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link:hover::before {
@@ -216,8 +221,7 @@
  */
 .vertical-tabs__items {
   box-sizing: border-box;
-  margin-top: var(--vertical-tabs-margin-vertical);
-  margin-bottom: var(--vertical-tabs-margin-vertical);
+  margin-block: var(--vertical-tabs-margin-vertical);
   color: var(--color-text);
   border: var(--vertical-tabs-border);
   border-radius: var(--vertical-tabs-border-radius);
@@ -229,27 +233,23 @@
 .vertical-tabs__panes {
   position: relative;
   z-index: 1; /* The wrapper of the details of the vertical tabs should be on a higher level than the vertical tabs menu */
-  top: -1px;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-/* This clearfix makes the pane wrapper at least as tall as the menu. */
-.vertical-tabs__panes::after {
-  display: block;
-  clear: both;
-  content: "";
+  inset-block-start: -1px;
+  margin-block: 0;
+
+  &::after {
+    display: block; /* This clearfix makes the pane wrapper at least as tall as the menu. */
+    clear: both;
+    content: "";
+  }
 }
 
 .vertical-tabs .vertical-tabs__panes {
-  margin-left: var(--vertical-tabs-menu-width); /* LTR */
-  border-top-left-radius: 0; /* LTR */
-}
+  margin-inline-start: var(--vertical-tabs-menu-width);
+  border-top-left-radius: 0;
 
-[dir="rtl"] .vertical-tabs .vertical-tabs__panes {
-  margin-right: var(--vertical-tabs-menu-width);
-  margin-left: 0;
-  border-top-left-radius: var(--vertical-tabs-border-radius);
-  border-top-right-radius: 0;
+  @nest [dir="rtl"] & {
+    border-top-left-radius: var(--vertical-tabs-border-radius);
+  }
 }
 
 /**
@@ -262,30 +262,30 @@
   /* Render on top of the border of vertical-tabs__items. */
   margin: calc(var(--vertical-tabs-border-size) * -1) calc(var(--vertical-tabs-border-size) * -1) 0;
   border-radius: 0;
-}
 
-.vertical-tabs__item.first {
-  border-top-left-radius: var(--details-accordion-border-size-radius);
-  border-top-right-radius: var(--details-accordion-border-size-radius);
-}
+  &.first {
+    border-top-left-radius: var(--details-accordion-border-size-radius);
+    border-top-right-radius: var(--details-accordion-border-size-radius);
+  }
 
-.vertical-tabs__item.last {
-  margin-bottom: calc(var(--vertical-tabs-border-size) * -1);
-  border-bottom-right-radius: var(--details-accordion-border-size-radius);
-  border-bottom-left-radius: var(--details-accordion-border-size-radius);
+  &.last {
+    margin-bottom: calc(var(--vertical-tabs-border-size) * -1);
+    border-bottom-right-radius: var(--details-accordion-border-size-radius);
+    border-bottom-left-radius: var(--details-accordion-border-size-radius);
+  }
 }
 
 .js .vertical-tabs .vertical-tabs__item {
   overflow: hidden;
   margin: 0;
   border: 0;
-}
 
-.js .vertical-tabs .vertical-tabs__item.first,
-.js .vertical-tabs .vertical-tabs__item.last {
-  border-radius: 0;
-}
+  &.first,
+  &.last {
+    border-radius: 0;
+  }
 
-.js .vertical-tabs .vertical-tabs__item > summary {
-  display: none;
+  & > summary {
+    display: none;
+  }
 }