diff --git a/css/src/base/elements.css b/css/src/base/elements.css
index a80ebf5..934439e 100644
--- a/css/src/base/elements.css
+++ b/css/src/base/elements.css
@@ -36,10 +36,6 @@ hr {
 
 summary {
   font-weight: bold;
-  text-transform: uppercase;
-}
-.simpletest-results-form summary {
-  text-transform: none;
 }
 
 /**
diff --git a/css/src/base/variables.css b/css/src/base/variables.css
index 36014e9..0baa6df 100644
--- a/css/src/base/variables.css
+++ b/css/src/base/variables.css
@@ -69,6 +69,7 @@
   --speed-transition: 0.2s;
   --transition: all var(--speed-transition) ease-out;
   --base-border-radius: 2px;
+  --focus-border-size: 3px;
   /*
    * Inputs.
    */
@@ -96,6 +97,7 @@
   --details-bg-color: rgba(243, 244, 249, 0.4);
   --details-border-color: rgba(216, 217, 224, 0.8);
   --details-summary-shadow-color: var(--color-focus);
+  --details-summary-focus-border-size: var(--focus-border-size);
   --details-desktop-wrapper-padding-start: calc(var(--space-m) + var(--space-s) + var(--space-xs));
   --details-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   --details-border-size: 1px;
diff --git a/css/src/components/details.css b/css/src/components/details.css
index 5b732f4..c30a430 100644
--- a/css/src/components/details.css
+++ b/css/src/components/details.css
@@ -31,7 +31,6 @@
 
 :root {
   --size-summary-border-radius: calc(var(--details-border-size-radius) - var(--details-border-size));
-  --size-summary-focus-border: 3px;
   --summary-accordion-padding-vertical: calc(var(--space-l) + ((var(--space-m) - var(--space-l)) / 2));
   --summary-accordion-line-height: var(--space-l);
 }
@@ -208,7 +207,7 @@
   left: -1px;
   transition: opacity var(--details-box-shadow-transition-duration) ease-in-out;
   opacity: 0;
-  box-shadow: inset 0 0 0 var(--size-summary-focus-border) var(--details-summary-shadow-color);
+  box-shadow: inset 0 0 0 var(--details-summary-focus-border-size) var(--details-summary-shadow-color);
   content: "";
   border-radius: var(--details-border-size-radius);
   pointer-events: none;
@@ -313,8 +312,8 @@
 [open] > .claro-details__summary--vertical-tabs-item:not(:focus):not(:active)::after,
 .collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
   box-shadow: none;
-  border: 3px solid var(--color-absolutezero);
-  border-width: 0 0 0 3px; /* LTR */
+  border: var(--details-summary-focus-border-size) solid var(--color-absolutezero);
+  border-width: 0 0 0 var(--details-summary-focus-border-size); /* LTR */
   opacity: 1;
 }
 [dir="rtl"] [open] > .claro-details__summary--accordion:not(:focus)::after,
@@ -323,7 +322,7 @@
 [dir="rtl"] .collapse-processed[open] > .claro-details__summary--accordion-item .details-title:not(:focus)::after,
 [dir="rtl"] [open] > .claro-details__summary--vertical-tabs-item:not(:focus)::after,
 [dir="rtl"] .collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
-  border-width: 0 3px 0 0;
+  border-width: 0 var(--details-summary-focus-border-size) 0 0;
 }
 
 .claro-details__summary:focus::after,
@@ -505,7 +504,7 @@
   transition: opacity var(--details-box-shadow-transition-duration) ease-in-out;
   opacity: 0;
   content: "";
-  border: 3px solid var(--color-focus);
+  border: var(--details-summary-focus-border-size) solid var(--color-focus);
   border-radius: var(--details-border-size-radius);
   pointer-events: none;
 }
diff --git a/css/src/components/vertical-tabs.css b/css/src/components/vertical-tabs.css
index 81e7913..82cc2ca 100644
--- a/css/src/components/vertical-tabs.css
+++ b/css/src/components/vertical-tabs.css
@@ -6,18 +6,34 @@
  */
 
 :root {
-  --vtabs-trigger-border: 1px solid var(--color-lightgray);
-  --vtabs-invisible-border: 1px solid transparent;
-  --shadow-trigger-active-vertical-tab: 0 2px 4px rgba(0, 0, 0, 0.1);
-  --vtabs-max-width: 20em;
+  --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-separator-color: var(--color-lightgray);
+  --vertical-tabs-menu-separator-size: 1px;
+  --vertical-tabs-menu-width: 40%;
+  --vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width));
+  --vertical-tabs-menu-max-width: 20em;
+  --vertical-tabs-menu-link-focus-border-size: var(--details-summary-focus-border-size);
+  --vertical-tabs-menu-link-focus-offset: 2px;
+  --vertical-tabs-menu-link--active-border-size: 4px;
+  --vertical-tabs-menu-link--active-border-color: var(--color-absolutezero);
 }
 
 /**
  * Main wrapper of vertical tabs.
- *
- * Styles for .vertical-tabs are needed only from medium and wide breakpoints.
  * This wrapper div is added by JavaScript.
  */
+
+.vertical-tabs {
+  margin-top: var(--vertical-tabs-margin-vertical);
+  margin-bottom: var(--vertical-tabs-margin-vertical);
+}
+
 @media screen and (min-width: 38em) {
   .toolbar-tray-open:not(.toolbar-vertical) .vertical-tabs,
   body:not(.toolbar-tray-open) .vertical-tabs {
@@ -41,14 +57,13 @@
 .vertical-tabs__menu {
   position: relative;
   display: none;
-  flex: 0 0 40%;
+  flex: 0 0 var(--vertical-tabs-menu-width);
+  max-width: var(--vertical-tabs-menu-width);
   margin: 0;
-  max-width: 40%;
-  padding-top: 0.5rem;
-  border-top: 1px solid transparent;
-  list-style: none;
+  padding-top: var(--vertical-tabs-menu-item-shadow-extraspace);
+  border-top: var(--vertical-tabs-menu-separator-size) solid transparent;
   color: var(--color-text);
-  background: var(--color-white);
+  list-style: none;
 }
 [dir="rtl"] .vertical-tabs__menu {
   margin: 0;
@@ -68,7 +83,7 @@
 @media screen and (min-width: 56em) {
   .toolbar-tray-open:not(.toolbar-vertical) .vertical-tabs__menu,
   body:not(.toolbar-tray-open) .vertical-tabs__menu {
-    max-width: var(--vtabs-max-width);
+    max-width: var(--vertical-tabs-menu-max-width);
   }
 }
 
@@ -84,7 +99,7 @@
  */
 @media screen and (min-width: 71em) {
   .vertical-tabs__menu {
-    max-width: var(--vtabs-max-width);
+    max-width: var(--vertical-tabs-menu-max-width);
   }
 }
 
@@ -98,14 +113,14 @@
  * Vertical tabs menu item.
  */
 .vertical-tabs__menu-item {
-  margin: -1rem -1px -0.5rem -0.5rem; /* LTR */
-  padding: 0.5rem 0 0.5rem 0.5rem; /* LTR */
+  margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -2) calc(var(--vertical-tabs-border-size) * -1) calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1) calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1); /* 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 */
   overflow: hidden;
 }
 [dir="rtl"] .vertical-tabs__menu-item {
-  margin-right: -0.5rem;
-  margin-left: -1px;
-  padding-right: 0.5rem;
+  margin-right: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
+  margin-left: calc(var(--vertical-tabs-border-size) * -1);
+  padding-right: var(--vertical-tabs-menu-item-shadow-extraspace);
   padding-left: 0;
 }
 
@@ -114,12 +129,13 @@
   display: block;
   position: absolute;
   width: 100%;
-  border-top: 1px solid var(--color-lightgray);
-  margin-top: -1px;
+  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);
   z-index: 1;
 }
 
 .vertical-tabs__menu-item::after {
+  border-color: var(--color-white);
   z-index: 2;
 }
 
@@ -129,8 +145,8 @@
 
 /* Menu item states. */
 .vertical-tabs__menu-item:focus {
-  outline: 0;
   box-shadow: none;
+  outline: 0;
 }
 
 .vertical-tabs__menu-item.is-selected::before,
@@ -148,20 +164,20 @@
 .vertical-tabs__menu-link {
   position: relative;
   display: block;
-  margin-top: -1px;
-  padding: var(--space-s) var(--space-s) var(--space-s) calc(var(--space-l) - 4px); /* LTR */
-  border: 1px solid transparent;
-  border-width: 1px 0 1px 4px; /* LTR */
-  border-radius: 2px 0 0 2px; /* LTR */
+  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 */
+  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 */
   color: var(--color-text);
   text-decoration: none;
   word-wrap: break-word;
 }
 [dir="rtl"] .vertical-tabs__menu-link {
-  padding-right: calc(var(--space-l) - 4px);
+  padding-right: calc(var(--space-l) - var(--vertical-tabs-menu-link--active-border-size));
   padding-left: var(--space-s);
-  border-width: 1px 4px 1px 0;
-  border-radius: 0 2px 2px 0;
+  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;
 }
 
 @media screen and (-ms-high-contrast: active) {
@@ -179,10 +195,29 @@
 
 .vertical-tabs__menu-link:hover {
   color: var(--color-absolutezero);
-  background-color: var(--color-bgblue-hover);
   text-decoration: none;
 }
 
+.vertical-tabs__menu-link::before {
+  content: '';
+  position: absolute;
+  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 */
+  z-index: -1;
+  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;
+}
+
+.vertical-tabs__menu-link:hover::before {
+  background: var(--color-bgblue-hover);
+}
+
 .vertical-tabs__menu-link:focus::after {
   content: '';
   position: absolute;
@@ -190,21 +225,19 @@
   right: 0;
   bottom: 0;
   left: 0;
-  margin: -6px -9px;
-  border: 3px solid var(--color-focus);
-  border-radius: 2px;
+  margin: calc((var(--vertical-tabs-border-size) + var(--vertical-tabs-menu-link-focus-offset) + var(--vertical-tabs-menu-link-focus-border-size)) * -1) calc((var(--vertical-tabs-menu-link--active-border-size) + var(--vertical-tabs-menu-link-focus-offset) + var(--vertical-tabs-menu-link-focus-border-size)) * -1);
+  border: var(--vertical-tabs-menu-link-focus-border-size) solid var(--color-focus);
+  border-radius: var(--vertical-tabs-border-radius);
+  pointer-events: none;
 }
 
 .is-selected .vertical-tabs__menu-link {
   color: var(--color-absolutezero);
   background-color: var(--color-white);
-  border-color: var(--color-lightgray) transparent;
-  box-shadow: var(--shadow-trigger-active-vertical-tab);
+  border-color: var(--vertical-tabs-border-color) transparent;
+  box-shadow: var(--vertical-tabs-shadow);
   z-index: 3;
 }
-[dir=rtl] .is-selected .vertical-tabs__menu-link {
-  border-radius: 0 var(--tabs-base-border) var(--base-border-radius) 0;
-}
 
 .is-selected .vertical-tabs__menu-link:hover {
   background-color: var(--color-bgblue-hover);
@@ -212,22 +245,19 @@
 }
 
 .is-selected .vertical-tabs__menu-link::before {
-  content: '';
-  position: absolute;
-  top: -1px;
-  right: 100%; /* LTR */
-  bottom: -1px;
-  border-left: 4px solid var(--color-absolutezero); /* LTR */
+  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] .is-selected .vertical-tabs__menu-link::before {
-  right: auto;
-  left: 100%;
   border-left: 0;
-  border-right: 4px solid var(--color-absolutezero);
+  border-right: var(--vertical-tabs-menu-link--active-border-size) solid var(--vertical-tabs-menu-link--active-border-color);
   border-radius: 0 var(--base-border-radius) var(--base-border-radius) 0;
 }
 
+.is-selected .vertical-tabs__menu-link:hover::before {
+  background: none;
+}
+
 @media screen and (-ms-high-contrast: active) {
   .is-selected .vertical-tabs__menu-link {
     border-color: windowText transparent;
@@ -258,22 +288,19 @@
  */
 .vertical-tabs__items {
   display: flex;
-  margin: var(--space-s) 0;
+  margin-top: var(--vertical-tabs-margin-vertical);
+  margin-bottom: var(--vertical-tabs-margin-vertical);
   flex-direction: column;
   background-color: var(--color-white);
   color: var(--color-text);
-  border: var(--details-border-size) solid var(--details-border-color);
-  border-radius: var(--details-accordion-border-size-radius);
-  box-shadow: var(--details-box-shadow);
+  border: var(--vertical-tabs-border);
+  border-radius: var(--vertical-tabs-border-radius);
+  box-shadow: var(--vertical-tabs-shadow);
 }
 
 /* This modifier is added by JavaScript. */
 .vertical-tabs__items--processed {
-  border: var(--vtabs-trigger-border);
-  background-color: var(--color-white);
-  box-shadow: var(--shadow-trigger-active-vertical-tab);
-  flex: 1 0 60%;
-  z-index: 1;
+  flex: 1 0 var(--vertical-tabs-pane-width);
   margin-top: 0;
   margin-bottom: 0;
 }
@@ -281,22 +308,24 @@
 @media screen and (min-width: 38em) {
   .js .toolbar-tray-open:not(.toolbar-vertical) .vertical-tabs__items--processed,
   .js body:not(.toolbar-tray-open) .vertical-tabs__items--processed {
-    border-radius: 0 var(--base-border-radius) var(--base-border-radius) var(--base-border-radius); /* LTR */
+    border-top-left-radius: 0; /* LTR */
   }
 
   .js[dir="rtl"] .toolbar-tray-open:not(.toolbar-vertical) .vertical-tabs__items--processed,
   .js[dir="rtl"] body:not(.toolbar-tray-open) .vertical-tabs__items--processed {
-    border-radius: var(--base-border-radius) 0 var(--base-border-radius) var(--base-border-radius);
+    border-top-left-radius: var(--vertical-tabs-border-radius);
+    border-top-right-radius: 0;
   }
 }
 
 @media screen and (min-width: 60em) {
   .js .vertical-tabs__items--processed {
-    border-radius: 0 var(--base-border-radius) var(--base-border-radius) var(--base-border-radius); /* LTR */
+    border-top-left-radius: 0; /* LTR */
   }
 
   .js[dir="rtl"] .vertical-tabs__items--processed {
-    border-radius: var(--base-border-radius) 0 var(--base-border-radius) var(--base-border-radius);
+    border-top-left-radius: var(--vertical-tabs-border-radius);
+    border-top-right-radius: 0;
   }
 }
 
@@ -306,7 +335,8 @@
  * This is a claro-details element with a vertical-tabs-item modifier.
  */
 .vertical-tabs__item {
-  margin: -1px -1px 0;
+  /* We should cover 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;
 }
 
@@ -316,7 +346,7 @@
 }
 
 .vertical-tabs__item--last {
-  margin-bottom: -1px;
+  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);
 }
@@ -328,6 +358,13 @@
     border: 0;
   }
 
+  .js .toolbar-tray-open:not(.toolbar-vertical) .vertical-tabs__item--first,
+  .js body:not(.toolbar-tray-open) .vertical-tabs__item--first,
+  .js .toolbar-tray-open:not(.toolbar-vertical) .vertical-tabs__item--last,
+  .js body:not(.toolbar-tray-open) .vertical-tabs__item--last {
+    border-radius: 0;
+  }
+
   .js .toolbar-tray-open:not(.toolbar-vertical) .vertical-tabs__item > summary,
   .js body:not(.toolbar-tray-open) .vertical-tabs__item > summary {
     display: none;
@@ -340,6 +377,11 @@
     border: 0;
   }
 
+  .js .vertical-tabs__item--first,
+  .js .vertical-tabs__item--last {
+    border-radius: 0;
+  }
+
   .js .vertical-tabs__item > summary {
     display: none;
   }
diff --git a/js/claro.vertical-tabs.es6.js b/js/claro.vertical-tabs.es6.js
index 0224569..eaffd79 100644
--- a/js/claro.vertical-tabs.es6.js
+++ b/js/claro.vertical-tabs.es6.js
@@ -193,8 +193,9 @@
       if (event.keyCode === 13) {
         event.preventDefault();
         self.focus();
-        // Set focus on the first input field of the visible details/tab pane.
-        $('.js-vertical-tabs-pane :input:visible:enabled')
+        // Set focus on the first input field of the current visible details/tab
+        // pane.
+        self.details.find(':input:visible:enabled')
           .eq(0)
           .trigger('focus');
       }
diff --git a/js/claro.vertical-tabs.js b/js/claro.vertical-tabs.js
index 4f6a26a..05c9406 100644
--- a/js/claro.vertical-tabs.js
+++ b/js/claro.vertical-tabs.js
@@ -107,7 +107,7 @@
         event.preventDefault();
         self.focus();
 
-        $('.js-vertical-tabs-pane :input:visible:enabled').eq(0).trigger('focus');
+        self.details.find(':input:visible:enabled').eq(0).trigger('focus');
       }
     });