diff --git a/core/misc/icons/545560/ex.svg b/core/misc/icons/545560/ex.svg
new file mode 100644
index 0000000000..bef63c1022
--- /dev/null
+++ b/core/misc/icons/545560/ex.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.34351 2.34283L13.6572 13.6565" stroke="#55565B" stroke-width="3"/><path d="M2.34351 13.6572L13.6572 2.34349" stroke="#55565B" stroke-width="3"/></svg>
diff --git a/core/misc/icons/545560/pencil.svg b/core/misc/icons/545560/pencil.svg
new file mode 100644
index 0000000000..2808993ddf
--- /dev/null
+++ b/core/misc/icons/545560/pencil.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><g><path fill="#545560" d="M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z"/><rect fill="#545560" x="5.129" y="3.8" transform="matrix(-.707 -.707 .707 -.707 6.189 20.064)" width="4.243" height="9.899"/><path fill="#545560" d="M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z"/></g></svg>
diff --git a/core/themes/claro/claro.libraries.yml b/core/themes/claro/claro.libraries.yml
index d4fbca8419..492044d1c2 100644
--- a/core/themes/claro/claro.libraries.yml
+++ b/core/themes/claro/claro.libraries.yml
@@ -186,6 +186,12 @@ checkbox:
   dependencies:
     - core/drupal
 
+icon-link:
+  version: VERSION
+  css:
+    component:
+      css/components/icon-link.css: {}
+
 dropbutton:
   version: VERSION
   js:
@@ -258,6 +264,8 @@ media_library.theme:
   css:
     theme:
       css/theme/media-library.css: {}
+  dependencies:
+    - claro/icon-link
 
 media_library.ui:
   version: VERSION
diff --git a/core/themes/claro/claro.theme b/core/themes/claro/claro.theme
index 5d735acb6b..bf355e9817 100644
--- a/core/themes/claro/claro.theme
+++ b/core/themes/claro/claro.theme
@@ -639,7 +639,7 @@ function claro_views_ui_display_tab_alter(&$element) {
 }
 
 /**
- * Implements hook_preprocess_HOOK for views_exposed_form.
+ * Implements hook_preprocess_HOOK() for views_exposed_form.
  */
 function claro_preprocess_views_exposed_form(&$variables) {
   $form = &$variables['form'];
@@ -679,11 +679,21 @@ function claro_form_views_exposed_form_alter(&$form, FormStateInterface $form_st
   $view = $form_state->getStorage()['view'];
   $view_title = $view->getTitle();
 
+  // Use small form elements.
+  $form['#attributes']['class'][] = 'form--small';
+
   // Add a label so screenreaders can identify the purpose of the exposed form
   // without having to scan content that appears further down the page.
   $form['#attributes']['aria-label'] = t('Filter the contents of the %view_title view', ['%view_title' => $view_title]);
 }
 
+/**
+ * Implements hook_form_FORM_ID_alter() for views_exposed_form.
+ */
+function claro_form_block_admin_display_form_alter(&$form, FormStateInterface $form_state) {
+  $form['#attributes']['class'][] = 'form--extrasmall';
+}
+
 /**
  * Implements hook_preprocess_form_element().
  */
@@ -760,10 +770,6 @@ function claro_preprocess_select(&$variables) {
   $variables['attributes']['class'][] = $variables['element']['#multiple'] ?
     'form-element--type-select-multiple' :
     'form-element--type-select';
-
-  if (in_array('block-region-select', $variables['attributes']['class'])) {
-    $variables['attributes']['class'][] = 'form-element--extrasmall';
-  }
 }
 
 /**
@@ -1263,7 +1269,11 @@ function claro_form_media_library_add_form_alter(array &$form, FormStateInterfac
  */
 function claro_form_media_library_add_form_upload_alter(array &$form, FormStateInterface $form_state) {
   $form['#attributes']['class'][] = 'media-library-add-form--upload';
-
+  $form['#attributes']['class'][] = 'form--small';
+  if (isset($form['container']['upload'])) {
+    // Set this flag so we can remove the details element.
+    $form['container']['upload']['#do_not_wrap_in_details'] = TRUE;
+  }
   if (isset($form['container'])) {
     $form['container']['#attributes']['class'][] = 'media-library-add-form__input-wrapper';
   }
@@ -1274,6 +1284,7 @@ function claro_form_media_library_add_form_upload_alter(array &$form, FormStateI
  */
 function claro_form_media_library_add_form_oembed_alter(array &$form, FormStateInterface $form_state) {
   $form['#attributes']['class'][] = 'media-library-add-form--oembed';
+  $form['#attributes']['class'][] = 'form--small';
 
   // If no media items have been added yet, add a couple of styling classes
   // to the initial URL form.
@@ -1291,15 +1302,22 @@ function claro_form_media_library_add_form_oembed_alter(array &$form, FormStateI
  * they are saved.
  */
 function claro_preprocess_item_list__media_library_add_form_media_list(array &$variables) {
+  $variables['attributes']['class'][] = 'form--small';
+
   foreach ($variables['items'] as &$item) {
     $item['value']['preview']['#attributes']['class'][] = 'media-library-add-form__preview';
     $item['value']['fields']['#attributes']['class'][] = 'media-library-add-form__fields';
     $item['value']['remove_button']['#attributes']['class'][] = 'media-library-add-form__remove-button';
+    $item['value']['remove_button']['#attributes']['class'][] = 'button--extrasmall';
 
     // #source_field_name is set by AddFormBase::buildEntityFormElement()
     // to help themes and form_alter hooks identify the source field.
     $fields = &$item['value']['fields'];
     $source_field_name = $fields['#source_field_name'];
+
+    // Set this flag so we can remove the details element.
+    $fields[$source_field_name]['widget'][0]['#do_not_wrap_in_details'] = TRUE;
+
     if (isset($fields[$source_field_name])) {
       $fields[$source_field_name]['#attributes']['class'][] = 'media-library-add-form__source-field';
     }
@@ -1313,6 +1331,7 @@ function claro_preprocess_item_list__media_library_add_form_media_list(array &$v
  */
 function claro_preprocess_media_library_item__widget(array &$variables) {
   $variables['content']['remove_button']['#attributes']['class'][] = 'media-library-item__remove';
+  $variables['content']['remove_button']['#attributes']['class'][] = 'icon-link';
 }
 
 /**
@@ -1333,6 +1352,9 @@ function claro_preprocess_media_library_item__small(array &$variables) {
  */
 function claro_preprocess_fieldset__media_library_widget(array &$variables) {
   if (isset($variables['prefix']['weight_toggle'])) {
+    $variables['prefix']['weight_toggle']['#attributes']['class'][] = 'action-link';
+    $variables['prefix']['weight_toggle']['#attributes']['class'][] = 'action-link--extrasmall';
+    $variables['prefix']['weight_toggle']['#attributes']['class'][] = 'action-link--icon-show';
     $variables['prefix']['weight_toggle']['#attributes']['class'][] = 'media-library-widget__toggle-weight';
   }
   if (isset($variables['suffix']['open_button'])) {
@@ -1368,9 +1390,11 @@ function claro_views_pre_render(ViewExecutable $view) {
       }
       if (array_key_exists('edit_media', $view->field)) {
         $add_classes($view->field['edit_media']->options['alter']['link_class'], ['media-library-item__edit']);
+        $add_classes($view->field['edit_media']->options['alter']['link_class'], ['icon-link']);
       }
       if (array_key_exists('delete_media', $view->field)) {
         $add_classes($view->field['delete_media']->options['alter']['link_class'], ['media-library-item__remove']);
+        $add_classes($view->field['delete_media']->options['alter']['link_class'], ['icon-link']);
       }
     }
     elseif (strpos($view->current_display, 'widget') === 0) {
@@ -1402,6 +1426,9 @@ function claro_views_pre_render(ViewExecutable $view) {
  */
 function claro_preprocess_links__media_library_menu(array &$variables) {
   foreach ($variables['links'] as &$link) {
+    // Add a class to the Media Library menu items.
+    $link['attributes']->addClass('media-library-menu__item');
+
     // This conditional exists because the media-library-menu__link class is
     // currently added by Classy, but Claro will eventually not use Classy as a
     // base theme.
diff --git a/core/themes/claro/css/base/elements.css b/core/themes/claro/css/base/elements.css
index 92f9c7fb95..d0900edf3e 100644
--- a/core/themes/claro/css/base/elements.css
+++ b/core/themes/claro/css/base/elements.css
@@ -29,7 +29,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -54,6 +54,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 html {
diff --git a/core/themes/claro/css/base/off-canvas.theme.css b/core/themes/claro/css/base/off-canvas.theme.css
index 2e42193f1b..9974715ce4 100644
--- a/core/themes/claro/css/base/off-canvas.theme.css
+++ b/core/themes/claro/css/base/off-canvas.theme.css
@@ -32,7 +32,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -57,6 +57,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 /* Style the dialog-off-canvas container. */
diff --git a/core/themes/claro/css/base/variables.css b/core/themes/claro/css/base/variables.css
index 69dc17481c..95efe6c3b2 100644
--- a/core/themes/claro/css/base/variables.css
+++ b/core/themes/claro/css/base/variables.css
@@ -24,7 +24,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -49,4 +49,7 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
diff --git a/core/themes/claro/css/base/variables.pcss.css b/core/themes/claro/css/base/variables.pcss.css
index c0987bb801..4b7f00952c 100644
--- a/core/themes/claro/css/base/variables.pcss.css
+++ b/core/themes/claro/css/base/variables.pcss.css
@@ -98,14 +98,21 @@
   --input-border-radius-size: 0.125rem; /* (1/8)em ~ 2px */
   --input-border-size: 1px; /* (1/16)em ~ 1px */
   --input--error-border-size: 2px;
-  --input-padding-vertical: calc(var(--space-s) - var(--input-border-size));
+  --input-min-height: var(--space-xl); /* 48px */
+  --input-padding-vertical: calc((var(--input-min-height) - var(--input-line-height) - (var(--input-border-size) * 2)) / 2);
   --input-padding-horizontal: calc(var(--space-m) - var(--input-border-size));
   --input-font-size: var(--font-size-base);
-  --input-line-height: var(--space-l);
-  --input--extrasmall-padding-vertical: calc(0.15rem - var(--input-border-size));
-  --input--extrasmall-padding-horizontal: calc(var(--space-xs) - var(--input-border-size));
-  --input--extrasmall-font-size: var(--font-size-s);
-  --input--extrasmall-line-height: calc(var(--space-m) + 0.2rem); /* Font size is too big to use 1rem for extrasmall line-height */
+  --input-line-height: calc(var(--input-font-size) * 1.5); /* 150% */
+  --input-min-height--small: 2rem; /* 32px */
+  --input-padding-vertical--small: calc((var(--input-min-height--small) - var(--input-line-height--small) - (var(--input-border-size) * 2)) / 2);
+  --input-padding-horizontal--small: var(--input-padding-horizontal);
+  --input-font-size--small: var(--font-size-s);
+  --input-line-height--small: calc(var(--font-size-s) * 1.5); /* 150 % */
+  --input-min-height--extrasmall: var(--space-l); /* 24px */
+  --input-padding-vertical--extrasmall: calc((var(--input-min-height--extrasmall) - var(--input-line-height--extrasmall) - (var(--input-border-size) * 2)) / 2);
+  --input-padding-horizontal--extrasmall: calc(var(--space-xs) - var(--input-border-size));
+  --input-font-size--extrasmall: var(--font-size-xs);
+  --input-line-height--extrasmall: calc(var(--input-font-size--extrasmall) * 1.5); /* 150% */
   --input--required-mark-size: 0.4375rem; /* 7px inside the form element label. */
   --input--label-spacing: 1.6875rem; /* 8px with the checkbox width of 19px */
   /*
@@ -196,4 +203,26 @@
    * 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-lightgray);
+  --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/accordion.css b/core/themes/claro/css/components/accordion.css
index 80d41e2d0b..e0a6477f22 100644
--- a/core/themes/claro/css/components/accordion.css
+++ b/core/themes/claro/css/components/accordion.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 .accordion {
diff --git a/core/themes/claro/css/components/action-link.css b/core/themes/claro/css/components/action-link.css
index f573a6684e..5d9c1daed0 100644
--- a/core/themes/claro/css/components/action-link.css
+++ b/core/themes/claro/css/components/action-link.css
@@ -32,7 +32,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -57,6 +57,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 /**
@@ -111,14 +114,16 @@
 
 /* Small variant. */
 
-.no-touchevents .action-link--small {
+.no-touchevents .action-link--small,
+.no-touchevents .form--small .action-link {
   padding: 0.375rem 0.75rem;
   font-size: 0.889rem;
 }
 
 /* Extra small variant. */
 
-.no-touchevents .action-link--extrasmall {
+.no-touchevents .action-link--extrasmall,
+.no-touchevents .form--extrasmall .action-link {
   padding: 0 0.5rem;
   font-size: 0.889rem;
 }
diff --git a/core/themes/claro/css/components/action-link.pcss.css b/core/themes/claro/css/components/action-link.pcss.css
index c281c0e600..64ebf398c1 100644
--- a/core/themes/claro/css/components/action-link.pcss.css
+++ b/core/themes/claro/css/components/action-link.pcss.css
@@ -54,13 +54,15 @@
 }
 
 /* Small variant. */
-.no-touchevents .action-link--small {
+.no-touchevents .action-link--small,
+.no-touchevents .form--small .action-link {
   padding: calc(var(--space-s) - ((var(--space-l) - var(--space-s)) / 2)) var(--space-s);
   font-size: var(--font-size-s);
 }
 
 /* Extra small variant. */
-.no-touchevents .action-link--extrasmall {
+.no-touchevents .action-link--extrasmall,
+.no-touchevents .form--extrasmall .action-link {
   padding: 0 var(--space-xs);
   font-size: var(--font-size-s);
 }
diff --git a/core/themes/claro/css/components/ajax-progress.module.css b/core/themes/claro/css/components/ajax-progress.module.css
index 707ff3cd8f..1b147867a4 100644
--- a/core/themes/claro/css/components/ajax-progress.module.css
+++ b/core/themes/claro/css/components/ajax-progress.module.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 .ajax-progress {
diff --git a/core/themes/claro/css/components/autocomplete-loading.module.css b/core/themes/claro/css/components/autocomplete-loading.module.css
index f4e79323ca..2c493d97d8 100644
--- a/core/themes/claro/css/components/autocomplete-loading.module.css
+++ b/core/themes/claro/css/components/autocomplete-loading.module.css
@@ -32,7 +32,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -57,6 +57,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 /**
@@ -79,9 +82,22 @@
  */
 
 .js .form-autocomplete {
-  background-image: url("data:image/svg+xml,%3csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 1C3.46.827-.188 5.787 1.313 10.068c1.176 4.384 6.993 6.417 10.637 3.7.326-.39.565.276.846.442l3.74 3.739 1.413-1.414-4.35-4.35c2.811-3.468 1.15-9.247-3.062-10.71A7.003 7.003 0 008 1zm0 2c3.242-.123 5.849 3.42 4.777 6.477-.842 3.132-4.994 4.58-7.6 2.65-2.745-1.73-2.9-6.125-.285-8.044A5.006 5.006 0 018 3z' fill='%23868686'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8.31.073C2.999-.128-1.275 5.676.481 10.687c1.376 5.131 8.184 7.51 12.448 4.33.382-.457.662.323.991.517l4.374 4.376 1.656-1.654-5.091-5.092C18.151 9.107 16.207 2.341 11.277.63A8.193 8.193 0 008.31.073zm-.001 2.342c3.796-.145 6.844 4.001 5.589 7.58-.985 3.665-5.846 5.361-8.895 3.101-3.211-2.024-3.392-7.168-.331-9.414a5.858 5.858 0 013.637-1.267z' fill='%23868686'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
-  background-position: 100% 50%;
+  background-position: calc(100% - 1rem + 1px) 50%; /* LTR */
+  background-size: calc(1rem + 2px) 100%;
+}
+
+.js .form--small .form-autocomplete,
+.js .form-autocomplete.form-element--small {
+  background-position: calc(100% - 0.5rem - 2px) 50%; /* LTR */
+  background-size: calc(0.75rem + 2px) 100%;
+}
+
+.js .form--extrasmall .form-autocomplete,
+.js .form-autocomplete.form-element--extrasmall {
+  background-position: calc(100% - 0.5rem - 2px) 50%;
+  background-size: 0.75rem 100%;
 }
 
 .js .form-autocomplete::-ms-clear {
@@ -89,8 +105,18 @@
 }
 
 .js[dir="rtl"] .form-autocomplete {
-  background-image: url("data:image/svg+xml,%3csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12 1c4.54-.173 8.188 4.787 6.687 9.068-1.176 4.384-6.993 6.417-10.637 3.7-.326-.39-.565.276-.846.442l-3.74 3.739-1.413-1.414 4.35-4.35C3.59 8.717 5.25 2.938 9.462 1.475A7.003 7.003 0 0112 1zm0 2c-3.242-.123-5.849 3.42-4.777 6.477.842 3.132 4.994 4.58 7.6 2.65 2.745-1.73 2.9-6.125.285-8.044A5.006 5.006 0 0012 3z' fill='%23868686'/%3e%3c/svg%3e");
-  background-position: 0 50%;
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.699.102c5.307-.201 9.574 5.598 7.819 10.605-1.377 5.126-8.178 7.503-12.438 4.326-.381-.457-.662.323-.989.516l-4.374 4.373-1.653-1.655 5.086-5.085C1.864 9.127 3.807 2.368 8.732.659a8.2 8.2 0 012.967-.557zm0 2.339c-3.792-.144-6.84 3.999-5.586 7.575.983 3.662 5.839 5.355 8.886 3.097 3.209-2.022 3.391-7.161.334-9.405a5.862 5.862 0 00-3.634-1.267z' fill='%23868686'/%3e%3c/svg%3e");
+  background-position: calc(1rem - 1px) 50%;
+}
+
+.js[dir="rtl"] .form--small .form-autocomplete,
+.js[dir="rtl"] .form-autocomplete.form-element--small {
+  background-position: calc(0.5rem - 2px) 50%;
+}
+
+.js[dir="rtl"] .form--extrasmall .form-autocomplete,
+.js[dir="rtl"] .form-autocomplete.form-element--extrasmall {
+  background-position: calc(0.5rem - 2px) 50%;
 }
 
 .js .form-autocomplete.is-autocompleting {
@@ -149,3 +175,14 @@ _:-ms-fullscreen,
 .js .is-autocompleting + .claro-autocomplete__message {
   display: block;
 }
+
+@media screen and (max-width: 600px) {
+  /**
+   * Under 600px, all form element widths are 100%, so it is not necessary to
+   * have `.claro-autocomplete` disply as inline-block. Setting it to block
+   * ensures the autocomplete input will assume the same width as other fields.
+   */
+  .claro-autocomplete {
+    display: block;
+  }
+}
diff --git a/core/themes/claro/css/components/autocomplete-loading.module.pcss.css b/core/themes/claro/css/components/autocomplete-loading.module.pcss.css
index fc81d5ce43..916194fc77 100644
--- a/core/themes/claro/css/components/autocomplete-loading.module.pcss.css
+++ b/core/themes/claro/css/components/autocomplete-loading.module.pcss.css
@@ -26,17 +26,42 @@
  * feedback would be a usability/accessibility issue as well.
  */
 
+:root {
+  --autocomplete-background-width: calc(var(--space-m) + (var(--input-border-size) * 2));
+  --autocomplete-background-width--small: calc(var(--space-s) + (var(--input-border-size) * 2));
+  --autocomplete-background-width--extrasmall: var(--space-s);
+}
+
 .js .form-autocomplete {
   background-image: url(../../images/icons/868686/magnifier.svg);
   background-repeat: no-repeat;
-  background-position: 100% 50%;
+  background-position: calc(100% - var(--input-padding-horizontal)) 50%; /* LTR */
+  background-size: var(--autocomplete-background-width) 100%;
+}
+.js .form--small .form-autocomplete,
+.js .form-autocomplete.form-element--small {
+  background-position: calc(100% - var(--space-xs) - (var(--input-border-size) * 2)) 50%; /* LTR */
+  background-size: var(--autocomplete-background-width--small) 100%;
+}
+.js .form--extrasmall .form-autocomplete,
+.js .form-autocomplete.form-element--extrasmall {
+  background-position: calc(100% - var(--space-xs) - (var(--input-border-size) * 2)) 50%;
+  background-size: var(--autocomplete-background-width--extrasmall) 100%;
 }
 .js .form-autocomplete::-ms-clear {
   display: none;
 }
 .js[dir="rtl"] .form-autocomplete {
   background-image: url(../../images/icons/868686/magnifier-rtl.svg);
-  background-position: 0 50%;
+  background-position: var(--input-padding-horizontal) 50%;
+}
+.js[dir="rtl"] .form--small .form-autocomplete,
+.js[dir="rtl"] .form-autocomplete.form-element--small {
+  background-position: calc(var(--space-xs) - (var(--input-border-size) * 2)) 50%;
+}
+.js[dir="rtl"] .form--extrasmall .form-autocomplete,
+.js[dir="rtl"] .form-autocomplete.form-element--extrasmall {
+  background-position: calc(var(--space-xs) - (var(--input-border-size) * 2)) 50%;
 }
 .js .form-autocomplete.is-autocompleting {
   background-image: url(../../images/icons/004adc/spinner.svg);
@@ -84,3 +109,14 @@ _:-ms-fullscreen,
 .js .is-autocompleting + .claro-autocomplete__message {
   display: block;
 }
+
+@media screen and (max-width: 600px) {
+  /**
+   * Under 600px, all form element widths are 100%, so it is not necessary to
+   * have `.claro-autocomplete` disply as inline-block. Setting it to block
+   * ensures the autocomplete input will assume the same width as other fields.
+   */
+  .claro-autocomplete {
+    display: block;
+  }
+}
diff --git a/core/themes/claro/css/components/breadcrumb.css b/core/themes/claro/css/components/breadcrumb.css
index 70a7ae25ef..15be69f5aa 100644
--- a/core/themes/claro/css/components/breadcrumb.css
+++ b/core/themes/claro/css/components/breadcrumb.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 .breadcrumb {
diff --git a/core/themes/claro/css/components/button.css b/core/themes/claro/css/components/button.css
index ffe9155cb5..100344f138 100644
--- a/core/themes/claro/css/components/button.css
+++ b/core/themes/claro/css/components/button.css
@@ -32,7 +32,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -57,6 +57,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 /**
@@ -123,24 +126,33 @@
   background-color: #adaeb3;
 }
 
-/* Common styles for small buttons */
+/**
+ * On touch devices, extrasmall receives small styling in order to provide
+ * adequate target height.
+ */
 
-.no-touchevents .button--small {
+.button--small,
+.form--small .button,
+.touchevents .button--extrasmall,
+.touchevents .form--extrasmall .button {
   margin: 0.75rem 0.5rem 0.75rem 0; /* LTR */
   padding: calc(0.5rem - 1px) calc(1rem - 1px); /* 1 */
   font-size: 0.79rem;
 }
 
-/* Common styles for extra small buttons */
-
-.no-touchevents .button--extrasmall {
+.no-touchevents .button--extrasmall,
+.no-touchevents .form--extrasmall .button {
   margin: 0.5rem 0.5rem 0.5rem 0; /* LTR */
   padding: calc(0.25rem - 1px) calc(0.75rem - 1px); /* 1 */
   font-size: 0.79rem;
 }
 
-[dir="rtl"].no-touchevents .button--small,
-[dir="rtl"].no-touchevents .button--extrasmall {
+[dir="rtl"] .button--small,
+[dir="rtl"] .form--small .button,
+[dir="rtl"].touchevents .button--extrasmall,
+[dir="rtl"].touchevents .form--extrasmall .button,
+[dir="rtl"].no-touchevents .button--extrasmall,
+[dir="rtl"].no-touchevents .form--extrasmall .button {
   margin-right: 0;
   margin-left: 0.5rem;
 }
diff --git a/core/themes/claro/css/components/button.pcss.css b/core/themes/claro/css/components/button.pcss.css
index f1f95222bd..5daab97b86 100644
--- a/core/themes/claro/css/components/button.pcss.css
+++ b/core/themes/claro/css/components/button.pcss.css
@@ -67,21 +67,30 @@
   background-color: var(--button--active-bg-color);
 }
 
-/* Common styles for small buttons */
-.no-touchevents .button--small {
+/**
+ * On touch devices, extrasmall receives small styling in order to provide
+ * adequate target height.
+ */
+.button--small,
+.form--small .button,
+.touchevents .button--extrasmall,
+.touchevents .form--extrasmall .button {
   margin: var(--space-s) var(--space-xs) var(--space-s) 0; /* LTR */
   padding: calc(var(--space-xs) - 1px) calc(var(--space-m) - 1px); /* 1 */
   font-size: var(--font-size-xs);
 }
-
-/* Common styles for extra small buttons */
-.no-touchevents .button--extrasmall {
+.no-touchevents .button--extrasmall,
+.no-touchevents .form--extrasmall .button {
   margin: var(--space-xs) var(--space-xs) var(--space-xs) 0; /* LTR */
   padding: calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) - 1px); /* 1 */
   font-size: var(--font-size-xs);
 }
-[dir="rtl"].no-touchevents .button--small,
-[dir="rtl"].no-touchevents .button--extrasmall {
+[dir="rtl"] .button--small,
+[dir="rtl"] .form--small .button,
+[dir="rtl"].touchevents .button--extrasmall,
+[dir="rtl"].touchevents .form--extrasmall .button,
+[dir="rtl"].no-touchevents .button--extrasmall,
+[dir="rtl"].no-touchevents .form--extrasmall .button {
   margin-right: 0;
   margin-left: var(--space-xs);
 }
diff --git a/core/themes/claro/css/components/card.css b/core/themes/claro/css/components/card.css
index 28024590d2..d6c0745d84 100644
--- a/core/themes/claro/css/components/card.css
+++ b/core/themes/claro/css/components/card.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 .card {
diff --git a/core/themes/claro/css/components/content-header.css b/core/themes/claro/css/components/content-header.css
index 0e30ab77cf..987aca902e 100644
--- a/core/themes/claro/css/components/content-header.css
+++ b/core/themes/claro/css/components/content-header.css
@@ -29,7 +29,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -54,6 +54,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 .content-header {
diff --git a/core/themes/claro/css/components/details.css b/core/themes/claro/css/components/details.css
index 434a55c0e8..71f2865647 100644
--- a/core/themes/claro/css/components/details.css
+++ b/core/themes/claro/css/components/details.css
@@ -32,7 +32,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -57,6 +57,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 /**
diff --git a/core/themes/claro/css/components/dialog.css b/core/themes/claro/css/components/dialog.css
index 0b7708e77d..ddcbba09b9 100644
--- a/core/themes/claro/css/components/dialog.css
+++ b/core/themes/claro/css/components/dialog.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 .ui-dialog {
diff --git a/core/themes/claro/css/components/divider.css b/core/themes/claro/css/components/divider.css
index 2bcd2dedbb..6a3b6199b9 100644
--- a/core/themes/claro/css/components/divider.css
+++ b/core/themes/claro/css/components/divider.css
@@ -29,7 +29,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -54,6 +54,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 .divider {
diff --git a/core/themes/claro/css/components/dropbutton.css b/core/themes/claro/css/components/dropbutton.css
index 18678113b7..4c392128ce 100644
--- a/core/themes/claro/css/components/dropbutton.css
+++ b/core/themes/claro/css/components/dropbutton.css
@@ -34,7 +34,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -59,6 +59,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 :root {
diff --git a/core/themes/claro/css/components/entity-meta.css b/core/themes/claro/css/components/entity-meta.css
index 0a66978711..9fdaaaac03 100644
--- a/core/themes/claro/css/components/entity-meta.css
+++ b/core/themes/claro/css/components/entity-meta.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 .entity-meta__header {
diff --git a/core/themes/claro/css/components/fieldset.css b/core/themes/claro/css/components/fieldset.css
index 5fcf6d4dea..8a75f7bb4c 100644
--- a/core/themes/claro/css/components/fieldset.css
+++ b/core/themes/claro/css/components/fieldset.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 .fieldset {
diff --git a/core/themes/claro/css/components/file.css b/core/themes/claro/css/components/file.css
index d060f2c89c..65cb6bef38 100644
--- a/core/themes/claro/css/components/file.css
+++ b/core/themes/claro/css/components/file.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 .file {
diff --git a/core/themes/claro/css/components/form--checkbox-radio--ie.css b/core/themes/claro/css/components/form--checkbox-radio--ie.css
index 464aa0cd5b..e46ace0bd4 100644
--- a/core/themes/claro/css/components/form--checkbox-radio--ie.css
+++ b/core/themes/claro/css/components/form--checkbox-radio--ie.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 .form-boolean::-ms-check {
diff --git a/core/themes/claro/css/components/form--checkbox-radio.css b/core/themes/claro/css/components/form--checkbox-radio.css
index 874ed5d57a..b422d78fba 100644
--- a/core/themes/claro/css/components/form--checkbox-radio.css
+++ b/core/themes/claro/css/components/form--checkbox-radio.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 /**
diff --git a/core/themes/claro/css/components/form--field-multiple.css b/core/themes/claro/css/components/form--field-multiple.css
index 4ca64d7205..5a45aa8666 100644
--- a/core/themes/claro/css/components/form--field-multiple.css
+++ b/core/themes/claro/css/components/form--field-multiple.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 .field-multiple-table {
diff --git a/core/themes/claro/css/components/form--managed-file.css b/core/themes/claro/css/components/form--managed-file.css
index dd4b30f98f..f04c547776 100644
--- a/core/themes/claro/css/components/form--managed-file.css
+++ b/core/themes/claro/css/components/form--managed-file.css
@@ -32,7 +32,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -57,6 +57,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 /**
diff --git a/core/themes/claro/css/components/form--password-confirm.css b/core/themes/claro/css/components/form--password-confirm.css
index aed9c2bec1..834ae464f2 100644
--- a/core/themes/claro/css/components/form--password-confirm.css
+++ b/core/themes/claro/css/components/form--password-confirm.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 :root {
diff --git a/core/themes/claro/css/components/form--select.css b/core/themes/claro/css/components/form--select.css
index 063e96077c..3ff481de49 100644
--- a/core/themes/claro/css/components/form--select.css
+++ b/core/themes/claro/css/components/form--select.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,32 +55,61 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
+}
+
+:root { /* SVG background image has width:14px height:9px. 9 / 14 = .642 */
 }
 
 .form-element--type-select {
-  padding-right: calc(2rem - 1px);
+  padding-right: calc(3rem - 2px); /* LTR */
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%23545560'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
-  background-position: 100% 50%;
-  background-size: 2.75rem 0.5625rem; /* w: 14px + (2 * 15px), h: 9px */
+  background-position: calc(100% - 1rem + 1px) calc(50% + 1px); /* LTR */
+  background-size: 1rem 0.642rem;
 }
 
 [dir="rtl"] .form-element--type-select {
   padding-right: calc(1rem - 1px);
-  padding-left: calc(2rem - 1px);
-  background-position: 0 50%;
+  padding-left: calc(3rem - 2px);
+  background-position: calc(1rem - 1px) calc(50% + 1px);
+}
+
+/**
+ * On touch devices, extrasmall receives small styling in order to provide
+ * adequate target height.
+ */
+
+.form--small .form-element--type-select,
+.form-element--type-select.form-element--small,
+.touchevents .form--extrasmall .form-element--type-select,
+.touchevents .form-element--type-select.form-element--extrasmall {
+  padding-right: calc(2.75rem - 2px); /* LTR */
+  background-size: 0.75rem 0.4815rem;
+}
+
+[dir="rtl"] .form-element--type-select.form-element--small,
+[dir="rtl"] .form--small .form-element--type-select,
+[dir="rtl"].touchevents .form-element--type-select.form-element--extrasmall,
+[dir="rtl"].touchevents .form--extrasmall .form-element--type-select {
+  padding-right: calc(1rem - 1px);
+  padding-left: calc(2.75rem - 2px);
 }
 
-.no-touchevents .form-element--type-select.form-element--extrasmall,
-.no-touchevents .form-element--type-select[name$="][_weight]"] {
-  padding-right: calc(1.5rem - 1px);
-  background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */
+.no-touchevents .form--extrasmall .form-element--type-select,
+.no-touchevents .form-element--type-select.form-element--extrasmall {
+  padding-right: calc(1.75rem - 2px); /* LTR */
+  background-position: calc(100% - 0.5rem + 1px) 50%; /* LTR */
+  background-size: 0.75rem 0.4815rem;
 }
 
-[dir="rtl"].no-touchevents .form-element--type-select.form-element--extrasmall,
-[dir="rtl"].no-touchevents .form-element--type-select[name$="][_weight]"] {
+[dir="rtl"].no-touchevents .form--extrasmall .form-element--type-select,
+[dir="rtl"].no-touchevents .form-element--type-select.form-element--extrasmall {
   padding-right: calc(0.5rem - 1px);
-  padding-left: calc(1.5rem - 1px);
+  padding-left: calc(1.75rem - 2px);
+  background-position: calc(0.5rem - 1px) 50%;
 }
 
 .form-element--type-select::-ms-expand {
diff --git a/core/themes/claro/css/components/form--select.pcss.css b/core/themes/claro/css/components/form--select.pcss.css
index 70433a81dd..219e1eaf65 100644
--- a/core/themes/claro/css/components/form--select.pcss.css
+++ b/core/themes/claro/css/components/form--select.pcss.css
@@ -5,28 +5,59 @@
 
 @import "../base/variables.pcss.css";
 
+:root {
+  --select-background-image-height-width-ratio: 0.642; /* SVG background image has width:14px height:9px. 9 / 14 = .642 */
+  --select-background-image-width: var(--space-m);
+  --select-background-image-height: calc(var(--select-background-image-width) * var(--select-background-image-height-width-ratio));
+  --select-background-image-width--small: var(--space-s);
+  --select-background-image-height--small: calc(var(--select-background-image-width--small) * var(--select-background-image-height-width-ratio));
+  --select-background-image-width--extrasmall: var(--space-s);
+  --select-background-image-height--extrasmall: calc(var(--select-background-image-width--small) * var(--select-background-image-height-width-ratio));
+}
+
 .form-element--type-select {
-  padding-right: calc(2rem - var(--input-border-size));
+  padding-right: calc(var(--select-background-image-width) + (var(--input-padding-horizontal) * 2)); /* LTR */
   background-image: url(../../images/icons/545560/chevron-down.svg);
   background-repeat: no-repeat;
-  background-position: 100% 50%;
-  background-size: 2.75rem 0.5625rem; /* w: 14px + (2 * 15px), h: 9px */
+  background-position: calc(100% - var(--input-padding-horizontal)) calc(50% + var(--input-border-size)); /* LTR */
+  background-size: var(--select-background-image-width) var(--select-background-image-height);
 }
 [dir="rtl"] .form-element--type-select {
-  padding-right: calc(1rem - var(--input-border-size));
-  padding-left: calc(2rem - var(--input-border-size));
-  background-position: 0 50%;
+  padding-right: var(--input-padding-horizontal);
+  padding-left: calc(var(--select-background-image-width) + (var(--input-padding-horizontal) * 2));
+  background-position: var(--input-padding-horizontal) calc(50% + var(--input-border-size));
+}
+
+/**
+ * On touch devices, extrasmall receives small styling in order to provide
+ * adequate target height.
+ */
+.form--small .form-element--type-select,
+.form-element--type-select.form-element--small,
+.touchevents .form--extrasmall .form-element--type-select,
+.touchevents .form-element--type-select.form-element--extrasmall {
+  padding-right: calc(var(--select-background-image-width--small) + (var(--input-padding-horizontal) * 2)); /* LTR */
+  background-size: var(--select-background-image-width--small) var(--select-background-image-height--small);
+}
+[dir="rtl"] .form-element--type-select.form-element--small,
+[dir="rtl"] .form--small .form-element--type-select,
+[dir="rtl"].touchevents .form-element--type-select.form-element--extrasmall,
+[dir="rtl"].touchevents .form--extrasmall .form-element--type-select {
+  padding-right: var(--input-padding-horizontal);
+  padding-left: calc(var(--select-background-image-width--small) + (var(--input-padding-horizontal) * 2));
 }
 
-.no-touchevents .form-element--type-select.form-element--extrasmall,
-.no-touchevents .form-element--type-select[name$="][_weight]"] {
-  padding-right: calc(1.5rem - var(--input-border-size));
-  background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */
-}
-[dir="rtl"].no-touchevents .form-element--type-select.form-element--extrasmall,
-[dir="rtl"].no-touchevents .form-element--type-select[name$="][_weight]"] {
-  padding-right: calc(0.5rem - var(--input-border-size));
-  padding-left: calc(1.5rem - var(--input-border-size));
+.no-touchevents .form--extrasmall .form-element--type-select,
+.no-touchevents .form-element--type-select.form-element--extrasmall {
+  padding-right: calc(var(--select-background-image-width--extrasmall) + (var(--input-padding-horizontal--extrasmall) * 2)); /* LTR */
+  background-position: calc(100% - var(--input-padding-horizontal--extrasmall)) 50%; /* LTR */
+  background-size: var(--select-background-image-width--extrasmall) var(--select-background-image-height--extrasmall);
+}
+[dir="rtl"].no-touchevents .form--extrasmall .form-element--type-select,
+[dir="rtl"].no-touchevents .form-element--type-select.form-element--extrasmall {
+  padding-right: var(--input-padding-horizontal--extrasmall);
+  padding-left: calc(var(--select-background-image-width--extrasmall) + (var(--input-padding-horizontal--extrasmall) * 2));
+  background-position: var(--input-padding-horizontal--extrasmall) 50%;
 }
 
 .form-element--type-select::-ms-expand {
diff --git a/core/themes/claro/css/components/form--text.css b/core/themes/claro/css/components/form--text.css
index a4ec1ca5e4..eb98ac2436 100644
--- a/core/themes/claro/css/components/form--text.css
+++ b/core/themes/claro/css/components/form--text.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,13 +55,16 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 .form-element {
   box-sizing: border-box;
   max-width: 100%;
-  min-height: 3rem; /* iOS. */
-  padding: calc(0.75rem - 1px) calc(1rem - 1px);
+  min-height: 3rem;
+  padding: calc((1.5rem - 2px)/2) calc(1rem - 1px);
   color: #222330;
   border: 1px solid #8e929c;
   border-radius: 0.125rem;
@@ -73,12 +76,27 @@
   appearance: none; /* Being able to control inner box shadow on iOS. */
 }
 
-.no-touchevents .form-element--extrasmall,
-.no-touchevents .form-element[name$="][_weight]"] {
-  min-height: 1.5rem; /* iOS. */
-  padding: calc(0.15rem - 1px) calc(0.5rem - 1px);
+/**
+ * On touch devices, extrasmall receives small styling in order to provide
+ * adequate target height.
+ */
+
+.form--small .form-element,
+.form-element--small,
+.touchevents .form--extrasmall .form-element,
+.touchevents .form-element--extrasmall {
+  min-height: 2rem;
+  padding: calc((0.6665rem - 2px)/2) calc(1rem - 1px);
   font-size: 0.889rem;
-  line-height: 1.2rem;
+  line-height: 1.3335rem;
+}
+
+.no-touchevents .form--extrasmall .form-element,
+.no-touchevents .form-element--extrasmall {
+  min-height: 1.5rem; /* iOS. */
+  padding: calc((0.315rem - 2px)/2) calc(0.5rem - 1px);
+  font-size: 0.79rem;
+  line-height: 1.185rem;
 }
 
 /**
diff --git a/core/themes/claro/css/components/form--text.pcss.css b/core/themes/claro/css/components/form--text.pcss.css
index d6d09b6f88..281ba8096a 100644
--- a/core/themes/claro/css/components/form--text.pcss.css
+++ b/core/themes/claro/css/components/form--text.pcss.css
@@ -8,7 +8,7 @@
 .form-element {
   box-sizing: border-box;
   max-width: 100%;
-  min-height: calc(((var(--input-padding-vertical) + var(--input-border-size)) * 2) + var(--input-line-height)); /* iOS. */
+  min-height: var(--input-min-height);
   padding: var(--input-padding-vertical) var(--input-padding-horizontal);
   color: var(--input-fg-color);
   border: var(--input-border-size) solid var(--input-border-color);
@@ -19,12 +19,26 @@
   appearance: none; /* Being able to control inner box shadow on iOS. */
 }
 
-.no-touchevents .form-element--extrasmall,
-.no-touchevents .form-element[name$="][_weight]"] {
-  min-height: calc(((var(--input--extrasmall-padding-vertical) + var(--input-border-size)) * 2) + var(--input--extrasmall-line-height)); /* iOS. */
-  padding: var(--input--extrasmall-padding-vertical) var(--input--extrasmall-padding-horizontal);
-  font-size: var(--input--extrasmall-font-size);
-  line-height: var(--input--extrasmall-line-height);
+/**
+ * On touch devices, extrasmall receives small styling in order to provide
+ * adequate target height.
+ */
+.form--small .form-element,
+.form-element--small,
+.touchevents .form--extrasmall .form-element,
+.touchevents .form-element--extrasmall {
+  min-height: var(--input-min-height--small);
+  padding: var(--input-padding-vertical--small) var(--input-padding-horizontal--small);
+  font-size: var(--input-font-size--small);
+  line-height: var(--input-line-height--small);
+}
+
+.no-touchevents .form--extrasmall .form-element,
+.no-touchevents .form-element--extrasmall {
+  min-height: var(--input-min-height--extrasmall); /* iOS. */
+  padding: var(--input-padding-vertical--extrasmall) var(--input-padding-horizontal--extrasmall);
+  font-size: var(--input-font-size--extrasmall);
+  line-height: var(--input-line-height--extrasmall);
 }
 
 /**
diff --git a/core/themes/claro/css/components/form.css b/core/themes/claro/css/components/form.css
index 0638d300a4..88dbfb6e77 100644
--- a/core/themes/claro/css/components/form.css
+++ b/core/themes/claro/css/components/form.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 :-ms-input-placeholder {
diff --git a/core/themes/claro/css/components/icon-link.css b/core/themes/claro/css/components/icon-link.css
new file mode 100644
index 0000000000..95ddafcaa5
--- /dev/null
+++ b/core/themes/claro/css/components/icon-link.css
@@ -0,0 +1,94 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Icon link component.
+ */
+
+:root {
+  /*
+   * Color Palette.
+   */
+  /* Secondary. */
+  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+  /*
+   * Base.
+   */
+  /*
+   * Typography.
+   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+  /**
+   * Spaces.
+   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+  /*
+   * Common.
+   */
+  /*
+   * Inputs.
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+  /*
+   * Details.
+   */
+  /**
+   * Buttons.
+   */
+  /**
+   * jQuery.UI dropdown.
+   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+  /**
+   * jQuery.UI dialog.
+   */
+  /**
+   * Progress bar.
+   */
+  /**
+   * Tabledrag icon size.
+   */ /* 17px */
+  /**
+   * Ajax progress.
+   */
+  /**
+   * Breadcrumb.
+   */
+  /**
+    * Vertical Tabs.
+    */
+}
+
+:root {
+  /* default */
+  /* active */
+  /* hover */
+}
+
+.icon-link {
+  display: flex;
+  padding: 0;
+  border: 1px solid #d4d4d8;
+  border-radius: 50%;
+  background-color: #fff;
+}
+
+.icon-link:hover {
+  border-color: rgba(212, 212, 218, 0.8);
+  background-color: #f0f5fd;
+}
+
+.icon-link:focus {
+  box-shadow: 0 0 0 1.5px #fff, 0 0 0 3.5px #26a769;
+}
+
+.icon-link:active,
+.open > .icon-link {
+  border-color: #003cc5;
+  background-color: #003cc5;
+}
+
+.icon-link--small:focus {
+  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #26a769;
+}
diff --git a/core/themes/claro/css/components/icon-link.pcss.css b/core/themes/claro/css/components/icon-link.pcss.css
new file mode 100644
index 0000000000..cdbfc8e685
--- /dev/null
+++ b/core/themes/claro/css/components/icon-link.pcss.css
@@ -0,0 +1,45 @@
+/**
+ * @file
+ * Icon link component.
+ */
+
+@import "../base/variables.pcss.css";
+
+:root {
+  /* default */
+  --icon-link-bg-color: var(--color-white);
+  --icon-link-border-color: var(--color-lightgray);
+  /* active */
+  --icon-link--active-bg-color: var(--color-absolutezero);
+  --icon-link--active-border-color: var(--color-absolutezero);
+  /* hover */
+  --icon-link--hover-bg-color: var(--color-bgblue-hover);
+  --icon-link--hover-border-color: var(--color-lightgray-o-80);
+}
+
+.icon-link {
+  display: flex;
+  padding: 0;
+  border: 1px solid var(--icon-link-border-color);
+  border-radius: 50%;
+  background-color: var(--icon-link-bg-color);
+}
+
+.icon-link:hover {
+  border-color: var(--icon-link--hover-border-color);
+  background-color: var(--icon-link--hover-bg-color);
+}
+
+.icon-link:focus {
+  box-shadow: 0 0 0 1.5px var(--color-white), 0 0 0 3.5px var(--color-focus);
+}
+
+.icon-link:active,
+.open > .icon-link {
+  border-color: var(--icon-link--active-border-color);
+  background-color: var(--icon-link--active-bg-color);
+}
+
+.icon-link--small:focus {
+  box-shadow: 0 0 0 1px var(--color-white), 0 0 0 3px var(--color-focus);
+}
diff --git a/core/themes/claro/css/components/image-preview.css b/core/themes/claro/css/components/image-preview.css
index ff2c2d66b8..8d596f6e48 100644
--- a/core/themes/claro/css/components/image-preview.css
+++ b/core/themes/claro/css/components/image-preview.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 /**
diff --git a/core/themes/claro/css/components/jquery.ui/theme.css b/core/themes/claro/css/components/jquery.ui/theme.css
index ba7ff2623d..8f06cd4f36 100644
--- a/core/themes/claro/css/components/jquery.ui/theme.css
+++ b/core/themes/claro/css/components/jquery.ui/theme.css
@@ -31,7 +31,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -56,6 +56,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 /**
diff --git a/core/themes/claro/css/components/media-library.ui.css b/core/themes/claro/css/components/media-library.ui.css
index 20a038df8e..27b9f91750 100644
--- a/core/themes/claro/css/components/media-library.ui.css
+++ b/core/themes/claro/css/components/media-library.ui.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 .media-library-selected-count {
diff --git a/core/themes/claro/css/components/messages.css b/core/themes/claro/css/components/messages.css
index 6cb9cd9c1d..ccffaf7e58 100644
--- a/core/themes/claro/css/components/messages.css
+++ b/core/themes/claro/css/components/messages.css
@@ -32,7 +32,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -57,6 +57,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 .messages-list {
diff --git a/core/themes/claro/css/components/page-title.css b/core/themes/claro/css/components/page-title.css
index 31699cc219..b9c90f639b 100644
--- a/core/themes/claro/css/components/page-title.css
+++ b/core/themes/claro/css/components/page-title.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 .block-page-title-block {
diff --git a/core/themes/claro/css/components/pager.css b/core/themes/claro/css/components/pager.css
index 785eaab110..5f38ab18d0 100644
--- a/core/themes/claro/css/components/pager.css
+++ b/core/themes/claro/css/components/pager.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 :root {
diff --git a/core/themes/claro/css/components/progress.css b/core/themes/claro/css/components/progress.css
index 6dc9a7549e..066d7bf53c 100644
--- a/core/themes/claro/css/components/progress.css
+++ b/core/themes/claro/css/components/progress.css
@@ -32,7 +32,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -57,6 +57,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 .progress::after {
diff --git a/core/themes/claro/css/components/shortcut.css b/core/themes/claro/css/components/shortcut.css
index f9384c830c..4c1d460929 100644
--- a/core/themes/claro/css/components/shortcut.css
+++ b/core/themes/claro/css/components/shortcut.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 :root {
diff --git a/core/themes/claro/css/components/system-admin--admin-list.css b/core/themes/claro/css/components/system-admin--admin-list.css
index bd2a7ea079..393aaedac9 100644
--- a/core/themes/claro/css/components/system-admin--admin-list.css
+++ b/core/themes/claro/css/components/system-admin--admin-list.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 /**
diff --git a/core/themes/claro/css/components/system-admin--panel.css b/core/themes/claro/css/components/system-admin--panel.css
index d45b4d95b5..1d3798a484 100644
--- a/core/themes/claro/css/components/system-admin--panel.css
+++ b/core/themes/claro/css/components/system-admin--panel.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 .panel {
diff --git a/core/themes/claro/css/components/table--file-multiple-widget.css b/core/themes/claro/css/components/table--file-multiple-widget.css
index b7f88d3d85..44aa75bfce 100644
--- a/core/themes/claro/css/components/table--file-multiple-widget.css
+++ b/core/themes/claro/css/components/table--file-multiple-widget.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 .table-file-multiple-widget tbody {
diff --git a/core/themes/claro/css/components/tabledrag.css b/core/themes/claro/css/components/tabledrag.css
index 39ae18e2c6..a819ab72f9 100644
--- a/core/themes/claro/css/components/tabledrag.css
+++ b/core/themes/claro/css/components/tabledrag.css
@@ -34,7 +34,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -59,6 +59,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 body.drag {
diff --git a/core/themes/claro/css/components/tables.css b/core/themes/claro/css/components/tables.css
index b59d94772e..f7b4206dc9 100644
--- a/core/themes/claro/css/components/tables.css
+++ b/core/themes/claro/css/components/tables.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 table {
diff --git a/core/themes/claro/css/components/tableselect.css b/core/themes/claro/css/components/tableselect.css
index f335a9dbfe..bc2a3660b4 100644
--- a/core/themes/claro/css/components/tableselect.css
+++ b/core/themes/claro/css/components/tableselect.css
@@ -32,7 +32,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -57,6 +57,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 td.checkbox,
diff --git a/core/themes/claro/css/components/tabs.css b/core/themes/claro/css/components/tabs.css
index c2d5233156..5f79fd715e 100644
--- a/core/themes/claro/css/components/tabs.css
+++ b/core/themes/claro/css/components/tabs.css
@@ -29,7 +29,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -54,6 +54,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 :root {
diff --git a/core/themes/claro/css/components/vertical-tabs.css b/core/themes/claro/css/components/vertical-tabs.css
index 7e939da826..aec8b0e79c 100644
--- a/core/themes/claro/css/components/vertical-tabs.css
+++ b/core/themes/claro/css/components/vertical-tabs.css
@@ -32,7 +32,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -57,6 +57,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 /**
diff --git a/core/themes/claro/css/components/vertical-tabs.pcss.css b/core/themes/claro/css/components/vertical-tabs.pcss.css
index 12ed6a8647..3410a989b0 100644
--- a/core/themes/claro/css/components/vertical-tabs.pcss.css
+++ b/core/themes/claro/css/components/vertical-tabs.pcss.css
@@ -7,23 +7,6 @@
 
 @import "../base/variables.pcss.css";
 
-:root {
-  --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: 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);
-}
-
 /**
  * Main wrapper of vertical tabs.
  * This wrapper div is added by JavaScript.
@@ -70,12 +53,12 @@
  */
 .vertical-tabs__menu-item {
   overflow: hidden;
-  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 */
+  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: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
-  margin-left: calc(var(--vertical-tabs-border-size) * -1);
+  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;
 }
diff --git a/core/themes/claro/css/components/views-exposed-form.css b/core/themes/claro/css/components/views-exposed-form.css
index 71fffe4879..12ac158641 100644
--- a/core/themes/claro/css/components/views-exposed-form.css
+++ b/core/themes/claro/css/components/views-exposed-form.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 /**
@@ -105,8 +108,15 @@ rgba(0, 0, 0, 0.1);
   margin-left: 1rem;
 }
 
-.views-exposed-form__item--actions.views-exposed-form__item--actions .button {
-  margin-bottom: 0;
+.views-exposed-form__item--actions.views-exposed-form__item--actions {
+  margin: 0;
+  padding: 0;
+}
+
+.views-exposed-form__item--actions.views-exposed-form__item--actions .button,
+.form--small .views-exposed-form__item--actions.views-exposed-form__item--actions .button,
+.form--extrasmall .views-exposed-form__item--actions.views-exposed-form__item--actions .button {
+  margin-bottom: 1px;
 }
 
 .views-exposed-form__item--actions.views-exposed-form__item--actions .button:last-child {
@@ -116,3 +126,13 @@ rgba(0, 0, 0, 0.1);
 [dir="rtl"] .views-exposed-form__item--actions.views-exposed-form__item--actions:last-child {
   margin-left: 0;
 }
+
+/**
+ * If touch events are active, the button will be taller than other inputs in
+ * the form. Setting the width to 100% ensures it is on its own line so the
+ * button's height difference does not appear incongruous.
+ */
+
+.touchevents .views-exposed-form__item--actions {
+  width: 100%;
+}
diff --git a/core/themes/claro/css/components/views-exposed-form.pcss.css b/core/themes/claro/css/components/views-exposed-form.pcss.css
index 994163730d..3062149ea8 100644
--- a/core/themes/claro/css/components/views-exposed-form.pcss.css
+++ b/core/themes/claro/css/components/views-exposed-form.pcss.css
@@ -48,8 +48,14 @@
   margin-left: var(--space-m);
 }
 
-.views-exposed-form__item--actions.views-exposed-form__item--actions .button {
-  margin-bottom: 0;
+.views-exposed-form__item--actions.views-exposed-form__item--actions {
+  margin: 0;
+  padding: 0;
+}
+.views-exposed-form__item--actions.views-exposed-form__item--actions .button,
+.form--small .views-exposed-form__item--actions.views-exposed-form__item--actions .button,
+.form--extrasmall .views-exposed-form__item--actions.views-exposed-form__item--actions .button {
+  margin-bottom: var(--input-border-size);
 }
 
 .views-exposed-form__item--actions.views-exposed-form__item--actions .button:last-child {
@@ -58,3 +64,12 @@
 [dir="rtl"] .views-exposed-form__item--actions.views-exposed-form__item--actions:last-child {
   margin-left: 0;
 }
+
+/**
+ * If touch events are active, the button will be taller than other inputs in
+ * the form. Setting the width to 100% ensures it is on its own line so the
+ * button's height difference does not appear incongruous.
+ */
+.touchevents .views-exposed-form__item--actions {
+  width: 100%;
+}
diff --git a/core/themes/claro/css/layout/breadcrumb.css b/core/themes/claro/css/layout/breadcrumb.css
index 520a8969f9..b81d445140 100644
--- a/core/themes/claro/css/layout/breadcrumb.css
+++ b/core/themes/claro/css/layout/breadcrumb.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 .region-breadcrumb {
diff --git a/core/themes/claro/css/layout/card-list.css b/core/themes/claro/css/layout/card-list.css
index 5da854a642..99a1908889 100644
--- a/core/themes/claro/css/layout/card-list.css
+++ b/core/themes/claro/css/layout/card-list.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 :root {
diff --git a/core/themes/claro/css/layout/local-actions.css b/core/themes/claro/css/layout/local-actions.css
index 18a6051ed0..a7228d7f7a 100644
--- a/core/themes/claro/css/layout/local-actions.css
+++ b/core/themes/claro/css/layout/local-actions.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 /**
diff --git a/core/themes/claro/css/layout/node-add.css b/core/themes/claro/css/layout/node-add.css
index 8492379c06..281870a854 100644
--- a/core/themes/claro/css/layout/node-add.css
+++ b/core/themes/claro/css/layout/node-add.css
@@ -29,7 +29,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -54,6 +54,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 .layout-region-node-footer__content {
diff --git a/core/themes/claro/css/theme/ckeditor-dialog.css b/core/themes/claro/css/theme/ckeditor-dialog.css
index e6b3f894ce..9efd135702 100644
--- a/core/themes/claro/css/theme/ckeditor-dialog.css
+++ b/core/themes/claro/css/theme/ckeditor-dialog.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 .cke_dialog_background_cover {
diff --git a/core/themes/claro/css/theme/ckeditor-editor.css b/core/themes/claro/css/theme/ckeditor-editor.css
index 0bc8a385a4..14832c1509 100644
--- a/core/themes/claro/css/theme/ckeditor-editor.css
+++ b/core/themes/claro/css/theme/ckeditor-editor.css
@@ -28,7 +28,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -53,6 +53,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 :root { /* 1px */
   /* Inner border size must be based on chrome border size. */ /* 1px */
diff --git a/core/themes/claro/css/theme/ckeditor-frame.css b/core/themes/claro/css/theme/ckeditor-frame.css
index e02957cc42..b49b2254c5 100644
--- a/core/themes/claro/css/theme/ckeditor-frame.css
+++ b/core/themes/claro/css/theme/ckeditor-frame.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 .cke_editable:not(.cke_editable_inline) {
diff --git a/core/themes/claro/css/theme/field-ui.admin.css b/core/themes/claro/css/theme/field-ui.admin.css
index a4d6f428a8..f1445b483e 100644
--- a/core/themes/claro/css/theme/field-ui.admin.css
+++ b/core/themes/claro/css/theme/field-ui.admin.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 /* 'Manage fields' and 'Manage display' overviews */
diff --git a/core/themes/claro/css/theme/filter.theme.css b/core/themes/claro/css/theme/filter.theme.css
index b198bafe7f..ae7f28cb6c 100644
--- a/core/themes/claro/css/theme/filter.theme.css
+++ b/core/themes/claro/css/theme/filter.theme.css
@@ -30,7 +30,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -55,6 +55,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 /**
diff --git a/core/themes/claro/css/theme/media-library.css b/core/themes/claro/css/theme/media-library.css
index 4724c8473e..ecb55cae40 100644
--- a/core/themes/claro/css/theme/media-library.css
+++ b/core/themes/claro/css/theme/media-library.css
@@ -11,9 +11,70 @@
  * Styling for Media Library.
  */
 
+:root {
+  /*
+   * Color Palette.
+   */
+  /* Secondary. */
+  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+  /*
+   * Base.
+   */
+  /*
+   * Typography.
+   */ /* 1rem = 16px if font root is 100% ands browser defaults are used. */ /* ~32px */ /* ~29px */ /* ~26px */ /* ~23px */ /* ~20px */ /* 18px */ /* ~14px */ /* ~13px */ /* ~11px */
+  /**
+   * Spaces.
+   */ /* 3 * 16px = 48px */ /* 1.5 * 16px = 24px */ /* 1 * 16px = 16px */ /* 0.75 * 16px = 12px */ /* 0.5 * 16px = 8px */
+  /*
+   * Common.
+   */
+  /*
+   * Inputs.
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+  /*
+   * Details.
+   */
+  /**
+   * Buttons.
+   */
+  /**
+   * jQuery.UI dropdown.
+   */ /* Light gray with 0.8 opacity. */ /* Text color with 0.1 opacity. */
+  /**
+   * jQuery.UI dialog.
+   */
+  /**
+   * Progress bar.
+   */
+  /**
+   * Tabledrag icon size.
+   */ /* 17px */
+  /**
+   * Ajax progress.
+   */
+  /**
+   * Breadcrumb.
+   */
+  /**
+    * Vertical Tabs.
+    */
+}
+
 .media-library-wrapper {
   display: flex;
-  margin: -1em;
+  margin: -1em -1.5em -1em -1em;
+}
+
+[dir="rtl"] .media-library-wrapper {
+  margin-right: -1em;
+  margin-left: -1.5em;
+}
+
+.media-library-wrapper .messages-list,
+.media-library-wrapper .messages {
+  margin-top: 0;
+  margin-bottom: 1.5rem;
 }
 
 /**
@@ -22,17 +83,18 @@
  */
 
 .media-library-menu {
+  position: relative;
   display: block;
-  width: 600px;
-  max-width: 20%;
-  margin: 0; /* LTR */
-  padding: 0;
-  border-bottom: 1px solid #ccc;
-  background-color: #e6e5e1;
-  line-height: 1;
+  float: left; /* LTR */
+  width: 20em;
+  margin: 0;
+  padding-top: 0.5rem;
+  list-style: none;
+  color: #222330;
 }
 
 [dir="rtl"] .media-library-menu {
+  float: right;
   margin: 0;
 }
 
@@ -41,68 +103,164 @@
  *   https://www.drupal.org/project/drupal/issues/3029227
  */
 
-.media-library-menu li {
+.media-library-menu__item {
+  overflow: hidden;
+  margin: -1rem -1px -0.5rem -0.5rem; /* LTR */
+  padding: 0.5rem 0; /* LTR */
+}
+
+[dir="rtl"] .media-library-menu__item {
+  margin-right: -0.5rem;
+  margin-left: -1px;
+}
+
+.media-library-menu__item::before {
+  z-index: 0; /* 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;
-  padding: 0;
-  list-style: none;
+  width: 100%;
+  margin-top: -1px;
+  content: "";
+  border-top: 1px solid #d4d4d8;
 }
 
 .media-library-menu__link {
   position: relative;
   display: block;
-  box-sizing: border-box;
-  padding: 15px;
+  margin-top: -1px;
+  padding: 0.75rem 0.75rem 0.75rem calc(1.5rem - 4px); /* LTR */
   text-decoration: none;
-  border-bottom: 1px solid #b3b2ad;
-  background-color: #f2f2f0;
-  text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
+  word-wrap: break-word;
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+  color: #222330;
+  border: 1px solid transparent;
+  border-width: 1px 0 1px 4px; /* LTR */
+  border-radius: 2px 0 0 2px; /* LTR */
+}
+
+[dir="rtl"] .media-library-menu__link {
+  padding-right: calc(1.5rem - 4px);
+  padding-left: 0.75rem;
+  border-width: 1px 4px 1px 0;
+  border-radius: 0 2px 2px 0;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .media-library-menu__link {
+    border-color: transparent;
+  }
 }
 
-.media-library-menu__link:active,
-.media-library-menu__link:hover,
+/* Menu link states. */
+
 .media-library-menu__link:focus {
-  background: #fcfcfa;
-  text-shadow: none;
+  z-index: 3; /* 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;
 }
 
-.media-library-menu__link:focus,
-.media-library-menu__link:active {
-  outline: none;
+.media-library-menu__link:hover {
+  text-decoration: none;
+  color: #003cc5;
+  /* These borders are necessary to replace the dividing lines while in the hover state. */
+  border-top: 1px solid #d4d4d8;
+  border-bottom: 1px solid #d4d4d8;
+  background: #f0f5fd;
+}
+
+/* This pseudo element provides the background for the hover state. */
+
+.media-library-menu__link::before {
+  position: absolute;
+  z-index: -1; /* This should be on a lower level than the menu-item separator lines. */
+  top: -1px;
+  right: 0; /* LTR */
+  bottom: -1px;
+  left: -4px; /* LTR */
+  content: "";
+  pointer-events: none;
+  background-clip: padding-box;
+}
+
+[dir="rtl"] .media-library-menu__link::before {
+  right: -4px;
+  left: 0;
+}
+
+.media-library-menu__link:focus::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: -1px -4px;
+  content: "";
+  pointer-events: none;
+  border: 3px solid #26a769;
+  border-radius: 2px;
 }
 
 .media-library-menu__link.active {
-  z-index: 1;
-  margin-right: -1px; /* LTR */
-  color: #000;
-  border-right: 1px solid #fcfcfa; /* LTR */
-  border-bottom: 1px solid #b3b2ad;
+  z-index: 2; /* The selected menu link should be on a higher level than the white masking line that hides the grey separator. */
+  color: #003cc5;
+  border-color: rgba(216, 217, 224, 0.8) transparent;
   background-color: #fff;
-  box-shadow: 0 5px 5px -5px hsla(0, 0%, 0%, 0.3);
+  box-shadow: 0
+2px
+4px
+rgba(0, 0, 0, 0.1);
 }
 
-[dir="rtl"] .media-library-menu__link.active {
-  margin-right: 0;
-  margin-left: -1px;
-  border-right: 0;
-  border-left: 1px solid #fcfcfa;
+.media-library-menu__link.active:hover {
+  color: #0036b1;
+  background-color: #f0f5fd;
+}
+
+.media-library-menu__link.active::before {
+  z-index: 1; /* The blue active-tab indication should be on a higher level than the green focus border. */
+  border-left: 4px solid #003cc5; /* LTR */
+  border-radius: 2px 0 0 2px; /* LTR */
+}
+
+[dir=rtl] .media-library-menu__link.active::before {
+  border-right: 4px solid #003cc5;
+  border-left: 0;
+  border-radius: 0 2px 2px 0;
+}
+
+.media-library-menu__link.active:hover::before {
+  background: none;
 }
 
 .media-library-content {
   width: 100%;
   padding: 1em;
-  border-left: 1px solid #b3b2ad; /* LTR */
   outline: none;
 }
 
-[dir="rtl"] .media-library-content {
-  border-right: 1px solid #b3b2ad;
+.media-library-menu + .media-library-content {
+  z-index: 0;
+  border-left: 1px
+solid
+rgba(216, 217, 224, 0.8); /* LTR */
+  box-shadow: 0
+2px
+4px
+rgba(0, 0, 0, 0.1);
+}
+
+[dir="rtl"] .media-library-menu + .media-library-content {
+  border-right: 1px
+solid
+rgba(216, 217, 224, 0.8);
   border-left: 0;
 }
 
 /* Generic media add form styles. */
 
 .media-library-add-form--without-input .form-item {
-  margin: 0 0 1em;
+  margin-right: 1rem;
 }
 
 /**
@@ -118,11 +276,30 @@
   outline: none;
 }
 
+/* This Media Library form is an exception to the extrasmall button pattern. */
+
+.media-library-add-form__added-media .media-library-add-form__remove-button.button--extrasmall {
+  margin: 0.5rem 0; /* LTR */
+  /* Left padding is double the background size of the button icon. */
+  padding: calc(0.25rem - 1px) calc(0.75rem - 1px) calc(0.25rem - 1px) 1.5rem;
+}
+
+/* This is needed to override the default extrasmall button left margin. */
+
+[dir="rtl"] .media-library-add-form__added-media .media-library-add-form__remove-button.button--extrasmall {
+  margin-left: 0;
+}
+
 .media-library-add-form__input-wrapper {
-  padding: 16px;
-  border: 1px solid #bfbfbf;
+  padding: 0.5rem 1.5rem 1.5rem 1.5rem;
+  border: 1px solid rgba(216, 217, 224, 0.8);
   border-radius: 2px;
-  background: #fcfcfa;
+  background-color: #fff;
+  box-shadow: 0
+2px
+4px
+rgba(0, 0, 0, 0.1);
+  /* background: #fcfcfa; */
 }
 
 /* Style the media add upload form. */
@@ -131,14 +308,41 @@
   margin-bottom: 0;
 }
 
+.media-library-add-form--upload.media-library-add-form--with-input .form-managed-file_meta {
+  margin-top: 0;
+}
+
+.media-library-add-form--upload.media-library-add-form--with-input .form-managed-file__main,
+.media-library-add-form--upload.media-library-add-form--with-input .form-managed-file.no-upload {
+  display: block;
+}
+
+/* Adjust the focus border on this element so it is not too close to buttons. */
+
+.media-library-add-form__added-media:focus {
+  box-shadow: 0 0 0 4px #fff, 0 0 0 7px #26a769;
+}
+
 .media-library-add-form .file-upload-help {
   margin: 8px 0 0;
 }
 
+/* Align remove buttons with with Save button and compensate for IE scrollbar and focus padding. */
+
+@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .ui-dialog > .ui-dialog-content {
+    padding-right: calc(0.75rem - 7px);
+  }
+  [dir="rtl"] .ui-dialog > .ui-dialog-content {
+    padding-left: calc(0.75rem - 7px);
+  }
+}
+
 /* Style the media add oEmbed form. */
 
 .media-library-add-form--oembed .media-library-add-form__input-wrapper {
   display: flex;
+  align-items: center;
 }
 
 @media screen and (max-width: 37.5em) {
@@ -199,7 +403,6 @@
 .media-library-views-form,
 .media-library-selection,
 .media-library-add-form__selected-media .details-wrapper,
-.media-library-views-form__bulk_form,
 .media-library-view .form--inline {
   display: flex;
   flex-wrap: wrap;
@@ -302,6 +505,40 @@
   position: relative;
 }
 
+/**
+ * Ajax throbbers inside a media library item.
+ */
+
+.media-library-item .ajax-progress.ajax-progress.ajax-progress {
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  left: 50%;
+  box-sizing: border-box;
+  width: 3rem; /* 56px */
+  height: 3rem;
+  margin: -1.5rem;
+  border: 1px solid rgba(216, 217, 224, 0.8);
+  border-radius: 3.5rem;
+  background: #fff;
+  box-shadow: 0 0.25rem 0.625rem rgba(34, 35, 48, 0.1);
+}
+
+.media-library-item .ajax-progress__throbber {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 1.75rem;
+  height: 1.75rem;
+  margin: -0.875rem;
+  border: 3px solid #003cc5;
+  border-right: 3px dotted transparent;
+}
+
+.media-library-item .ajax-progress__message {
+  display: none;
+}
+
 /**
 * The media library item container receives screen reader focus when items are
 * removed. Since it is not an interactive element, it does not need an
@@ -328,6 +565,33 @@
   transition: border-color 0.2s, color 0.2s, background 0.2s;
   pointer-events: none;
   border: 1px solid #dbdbdb;
+  border-radius: 2px;
+  box-shadow: 0
+2px
+4px
+rgba(0, 0, 0, 0.1);
+}
+
+.media-library-item--grid:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.media-library-item--grid:focus > article {
+  outline: 2px
+dotted
+transparent;
+  box-shadow: 0
+0
+0
+2px
+#fff
+,
+0
+0
+0
+5px
+#26a769;
 }
 
 /* Media library widget weight field styles. */
@@ -431,12 +695,25 @@
   top: 5px;
   left: 5px;
   border-width: 3px;
-  border-color: #40b6ff;
   border-radius: 3px;
 }
 
+.media-library-item--grid.is-hover:before,
+.media-library-item--grid.checked.is-hover:before {
+  border-color: #0036b1;
+}
+
+.media-library-item--grid.is-focus:before {
+  border-color: #26a769;
+}
+
 .media-library-item--grid.checked:before {
-  border-color: #0076c0;
+  border-color: #5a8bed;
+}
+
+.media-library-item--grid .form-boolean--type-checkbox:checked {
+  border-color: #5a8bed;
+  background-color: #5a8bed;
 }
 
 .media-library-item__click-to-select-checkbox {
@@ -484,6 +761,11 @@
   cursor: move;
 }
 
+.field--widget-media-library-widget .media-library-item__preview img {
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+}
+
 .field--widget-media-library-widget .js-media-library-item:only-child .media-library-item__preview {
   cursor: inherit;
 }
@@ -516,16 +798,13 @@
   background: white;
 }
 
-.media-library-item__name {
-  font-size: 14px;
-}
-
 .media-library-item__name {
   display: block;
   overflow: hidden;
-  margin: 2px;
+  margin: 0.25rem 0.5rem;
   white-space: nowrap;
   text-overflow: ellipsis;
+  font-size: 14px;
 }
 
 .media-library-item__attributes:hover .media-library-item__name,
@@ -565,15 +844,16 @@
   margin-left: 1em;
 }
 
-.media-library-widget__toggle-weight {
+.media-library-widget__toggle-weight.media-library-widget__toggle-weight {
   position: absolute;
-  top: 5px;
-  right: 5px; /* LTR */
+  top: 0.75rem;
+  right: 1rem; /* LTR */
+  text-decoration: none;
 }
 
-[dir="rtl"] .media-library-widget__toggle-weight {
+[dir="rtl"] .media-library-widget__toggle-weight.media-library-widget__toggle-weight {
   right: auto;
-  left: 5px;
+  left: 1rem;
 }
 
 /* Add negative margin for flex grid. */
@@ -605,15 +885,13 @@
   z-index: 1;
   top: 10px;
   overflow: hidden;
-  width: 21px;
-  height: 21px;
+  width: 24px;
+  height: 24px;
   margin: 5px;
   padding: 0;
   transition: 0.2s border-color;
   color: transparent;
-  border: 2px solid #ccc;
-  border-radius: 20px;
-  background-size: 13px;
+  background-size: 12px;
   text-shadow: none;
   font-size: 0;
 }
@@ -637,8 +915,16 @@
 }
 
 .media-library-item__edit {
-  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23787878' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23787878' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23787878' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e") #fff center no-repeat;
-  background-size: 13px;
+  /* !important to override button class border. */
+  border: 1px solid #d4d4d8 !important;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23545560' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23545560' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23545560' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 12px;
+}
+
+.media-library-item__edit:active {
+  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.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23ffffff' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23ffffff' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
 }
 
 .media-library-item__remove,
@@ -648,18 +934,20 @@
 .media-library-item__remove.button:disabled:active,
 .media-library-item__remove.button:hover,
 .media-library-item__remove.button:focus {
-  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23787878' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e") #fff center no-repeat;
-  background-size: 13px;
+  /* !important to override button class border. */
+  border: 1px solid #d4d4d8 !important;
+  background-image: url("data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.34351 2.34283L13.6572 13.6565' stroke='%2355565B' stroke-width='3'/%3e%3cpath d='M2.34351 13.6572L13.6572 2.34349' stroke='%2355565B' stroke-width='3'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 12px;
 }
 
-.media-library-item__edit:hover,
-.media-library-item__edit:focus,
-.media-library-item__remove:hover,
-.media-library-item__remove:focus,
-.media-library-item__remove.button:hover,
-.media-library-item__remove.button:focus,
+.media-library-item__remove:active,
+.media-library-item__remove.button:active,
 .media-library-item__remove.button:disabled:active {
-  border-color: #40b6ff;
+  /* !important to override button class border. */
+  border-color: #003cc5 !important;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23ffffff' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e");
 }
 
 /**
@@ -673,28 +961,10 @@
 .media-library-add-form__media {
   position: relative;
   display: flex;
-  padding: 1em 0;
   border-bottom: 1px solid #c0c0c0;
   outline: none;
 }
 
-/* Do not show the top padding for the first item. */
-
-.media-library-add-form__media:first-child {
-  padding-top: 0;
-}
-
-/**
- * Change the position of the remove button for the first item.
- *
- * The first item doesn't have a top padding, change the location of the remove
- * button as well.
- */
-
-.media-library-add-form__media:first-child .media-library-add-form__remove-button[type="submit"] {
-  top: 5px;
-}
-
 /* Do not show the bottom border and padding for the last item. */
 
 .media-library-add-form__media:last-child {
@@ -708,7 +978,7 @@
   justify-content: center;
   width: 220px;
   margin-right: 20px; /* LTR */
-  background: #ebebeb;
+  background: rgba(243, 244, 249, 0.4);
 }
 
 [dir="rtl"] .media-library-add-form__preview {
@@ -720,22 +990,18 @@
   flex-grow: 1;
 }
 
-/**
- * @todo Remove [type="submit"] when styles are moved to the seven theme in
- *   https://www.drupal.org/project/drupal/issues/2980769
- */
-
-.media-library-add-form__remove-button[type="submit"] {
+.media-library-add-form__remove-button {
   position: absolute;
-  top: 25px;
-  right: 6px;
-  margin-right: 0;
+  right: 0;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23000000' d='M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: 0.5rem center;
+  background-size: 0.75rem;
 }
 
-[dir="rtl"] .media-library-add-form__remove-button[type="submit"] {
+[dir="rtl"] .media-library-add-form__remove-button {
   right: auto;
-  left: 13px;
-  margin-left: 0;
+  left: 0;
 }
 
 /* @todo Remove in https://www.drupal.org/project/drupal/issues/3064914 */
diff --git a/core/themes/claro/css/theme/media-library.pcss.css b/core/themes/claro/css/theme/media-library.pcss.css
index 3ae30c1799..5f6c85c2e8 100644
--- a/core/themes/claro/css/theme/media-library.pcss.css
+++ b/core/themes/claro/css/theme/media-library.pcss.css
@@ -4,9 +4,21 @@
  * Styling for Media Library.
  */
 
+@import "../base/variables.pcss.css";
+
 .media-library-wrapper {
   display: flex;
-  margin: -1em;
+  margin: -1em -1.5em -1em -1em;
+}
+[dir="rtl"] .media-library-wrapper {
+  margin-right: -1em;
+  margin-left: -1.5em;
+}
+
+.media-library-wrapper .messages-list,
+.media-library-wrapper .messages {
+  margin-top: 0;
+  margin-bottom: var(--space-l);
 }
 
 /**
@@ -14,16 +26,17 @@
  *   https://www.drupal.org/project/drupal/issues/3023767
  */
 .media-library-menu {
+  position: relative;
   display: block;
-  width: 600px;
-  max-width: 20%;
-  margin: 0; /* LTR */
-  padding: 0;
-  border-bottom: 1px solid #ccc;
-  background-color: #e6e5e1;
-  line-height: 1;
+  float: left; /* LTR */
+  width: var(--vertical-tabs-menu-width);
+  margin: 0;
+  padding-top: var(--vertical-tabs-menu-item-shadow-extraspace);
+  list-style: none;
+  color: var(--color-text);
 }
 [dir="rtl"] .media-library-menu {
+  float: right;
   margin: 0;
 }
 
@@ -31,65 +44,147 @@
  * @todo Use a class instead of the li element.
  *   https://www.drupal.org/project/drupal/issues/3029227
  */
-.media-library-menu li {
+.media-library-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; /* LTR */
+}
+
+[dir="rtl"] .media-library-menu__item {
+  margin-right: var(--vertical-tabs-menu-item--left-margin);
+  margin-left: var(--vertical-tabs-menu-item--right-margin);
+}
+
+.media-library-menu__item::before {
+  z-index: var(--vertical-tabs-menu--z-index); /* 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;
-  padding: 0;
-  list-style: none;
+  width: 100%;
+  margin-top: calc(var(--vertical-tabs-menu-separator-size) * -1);
+  content: "";
+  border-top: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
 }
 
 .media-library-menu__link {
   position: relative;
   display: block;
-  box-sizing: border-box;
-  padding: 15px;
+  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 */
   text-decoration: none;
-  border-bottom: 1px solid #b3b2ad;
-  background-color: #f2f2f0;
-  text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
+  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"] .media-library-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;
+}
+
+@media screen and (-ms-high-contrast: active) {
+  .media-library-menu__link {
+    border-color: transparent;
+  }
 }
 
-.media-library-menu__link:active,
-.media-library-menu__link:hover,
+/* Menu link states. */
 .media-library-menu__link:focus {
-  background: #fcfcfa;
-  text-shadow: none;
+  z-index: calc(var(--vertical-tabs-menu--z-index) + 3); /* 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;
 }
 
-.media-library-menu__link:focus,
-.media-library-menu__link:active {
-  outline: none;
+.media-library-menu__link:hover {
+  text-decoration: none;
+  color: var(--color-absolutezero);
+  /* These borders are necessary to replace the dividing lines while in the hover state. */
+  border-top: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
+  border-bottom: var(--vertical-tabs-menu-separator-size) solid var(--vertical-tabs-menu-separator-color);
+  background: var(--color-bgblue-hover);
+}
+
+/* This pseudo element provides the background for the hover state. */
+.media-library-menu__link::before {
+  position: absolute;
+  z-index: calc(var(--vertical-tabs-menu--z-index) - 1); /* 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"] .media-library-menu__link::before {
+  right: calc(var(--vertical-tabs-menu-link--active-border-size) * -1);
+  left: 0;
+}
+
+.media-library-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);
 }
 
 .media-library-menu__link.active {
-  z-index: 1;
-  margin-right: -1px; /* LTR */
-  color: #000;
-  border-right: 1px solid #fcfcfa; /* LTR */
-  border-bottom: 1px solid #b3b2ad;
-  background-color: #fff;
-  box-shadow: 0 5px 5px -5px hsla(0, 0%, 0%, 0.3);
-}
-[dir="rtl"] .media-library-menu__link.active {
-  margin-right: 0;
-  margin-left: -1px;
-  border-right: 0;
-  border-left: 1px solid #fcfcfa;
+  z-index: calc(var(--vertical-tabs-menu--z-index) + 2); /* The selected menu link should be on a higher level than the white masking line that hides the grey separator. */
+  color: var(--color-absolutezero);
+  border-color: var(--vertical-tabs-border-color) transparent;
+  background-color: var(--color-white);
+  box-shadow: var(--vertical-tabs-shadow);
+}
+
+.media-library-menu__link.active:hover {
+  color: var(--color-absolutezero-hover);
+  background-color: var(--color-bgblue-hover);
+}
+
+.media-library-menu__link.active::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] .media-library-menu__link.active::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;
+}
+
+.media-library-menu__link.active:hover::before {
+  background: none;
 }
 
 .media-library-content {
   width: 100%;
   padding: 1em;
-  border-left: 1px solid #b3b2ad; /* LTR */
   outline: none;
 }
-[dir="rtl"] .media-library-content {
-  border-right: 1px solid #b3b2ad;
+
+.media-library-menu + .media-library-content {
+  z-index: var(--vertical-tabs-menu--z-index);
+  border-left: var(--vertical-tabs-border); /* LTR */
+  box-shadow: var(--vertical-tabs-shadow);
+}
+
+[dir="rtl"] .media-library-menu + .media-library-content {
+  border-right: var(--vertical-tabs-border);
   border-left: 0;
 }
 
 /* Generic media add form styles. */
 .media-library-add-form--without-input .form-item {
-  margin: 0 0 1em;
+  margin-right: 1rem;
 }
 
 /**
@@ -104,25 +199,62 @@
   outline: none;
 }
 
+/* This Media Library form is an exception to the extrasmall button pattern. */
+.media-library-add-form__added-media .media-library-add-form__remove-button.button--extrasmall {
+  margin: var(--space-xs) 0; /* LTR */
+  /* Left padding is double the background size of the button icon. */
+  padding: calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) - 1px) calc(calc(var(--space-xs) / 2) - 1px) calc(var(--space-s) * 2);
+}
+
+/* This is needed to override the default extrasmall button left margin. */
+[dir="rtl"] .media-library-add-form__added-media .media-library-add-form__remove-button.button--extrasmall {
+  margin-left: 0;
+}
+
 .media-library-add-form__input-wrapper {
-  padding: 16px;
-  border: 1px solid #bfbfbf;
-  border-radius: 2px;
-  background: #fcfcfa;
+  padding: var(--space-xs) var(--space-l) var(--space-l) var(--space-l);
+  border: var(--details-border-size) solid var(--details-border-color);
+  border-radius: var(--base-border-radius);
+  background-color: var(--color-white);
+  box-shadow: var(--details-box-shadow);
+  /* background: #fcfcfa; */
 }
 
 /* Style the media add upload form. */
 .media-library-add-form--upload.media-library-add-form--without-input .form-item-upload {
   margin-bottom: 0;
 }
+.media-library-add-form--upload.media-library-add-form--with-input .form-managed-file_meta {
+  margin-top: 0;
+}
+.media-library-add-form--upload.media-library-add-form--with-input .form-managed-file__main,
+.media-library-add-form--upload.media-library-add-form--with-input .form-managed-file.no-upload {
+  display: block;
+}
+
+/* Adjust the focus border on this element so it is not too close to buttons. */
+.media-library-add-form__added-media:focus {
+  box-shadow: 0 0 0 calc(var(--focus-border-offset-size) + 2px) var(--color-white), 0 0 0 calc(var(--focus-border-size) + var(--focus-border-offset-size) + 2px) var(--color-focus);
+}
 
 .media-library-add-form .file-upload-help {
   margin: 8px 0 0;
 }
 
+/* Align remove buttons with with Save button and compensate for IE scrollbar and focus padding. */
+@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  .ui-dialog > .ui-dialog-content {
+    padding-right: calc(var(--space-s) - calc(var(--focus-border-size) + var(--focus-border-offset-size) + 2px));
+  }
+  [dir="rtl"] .ui-dialog > .ui-dialog-content {
+    padding-left: calc(var(--space-s) - calc(var(--focus-border-size) + var(--focus-border-offset-size) + 2px));
+  }
+}
+
 /* Style the media add oEmbed form. */
 .media-library-add-form--oembed .media-library-add-form__input-wrapper {
   display: flex;
+  align-items: center;
 }
 
 @media screen and (max-width: 37.5em) {
@@ -177,7 +309,6 @@
 .media-library-views-form,
 .media-library-selection,
 .media-library-add-form__selected-media .details-wrapper,
-.media-library-views-form__bulk_form,
 .media-library-view .form--inline {
   display: flex;
   flex-wrap: wrap;
@@ -273,6 +404,37 @@
   position: relative;
 }
 
+/**
+ * Ajax throbbers inside a media library item.
+ */
+.media-library-item .ajax-progress.ajax-progress.ajax-progress {
+  position: absolute;
+  z-index: calc(var(--vertical-tabs-menu--z-index) + 1);
+  top: 50%;
+  left: 50%;
+  box-sizing: border-box;
+  width: 3rem; /* 56px */
+  height: 3rem;
+  margin: -1.5rem;
+  border: var(--input-border-size) solid var(--jui-dropdown-border-color);
+  border-radius: 3.5rem;
+  background: var(--color-white);
+  box-shadow: 0 0.25rem 0.625rem var(--jui-dropdown-shadow-color);
+}
+.media-library-item .ajax-progress__throbber {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 1.75rem;
+  height: 1.75rem;
+  margin: -0.875rem;
+  border: 3px solid var(--color-absolutezero);
+  border-right: 3px dotted transparent;
+}
+.media-library-item .ajax-progress__message {
+  display: none;
+}
+
 /**
 * The media library item container receives screen reader focus when items are
 * removed. Since it is not an interactive element, it does not need an
@@ -298,6 +460,18 @@
   transition: border-color 0.2s, color 0.2s, background 0.2s;
   pointer-events: none;
   border: 1px solid #dbdbdb;
+  border-radius: 2px;
+  box-shadow: var(--details-box-shadow);
+}
+
+.media-library-item--grid:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.media-library-item--grid:focus > article {
+  outline: var(--focus-outline);
+  box-shadow: var(--focus-box-shadow);
 }
 
 /* Media library widget weight field styles. */
@@ -396,12 +570,24 @@
   top: 5px;
   left: 5px;
   border-width: 3px;
-  border-color: #40b6ff;
   border-radius: 3px;
 }
+.media-library-item--grid.is-hover:before,
+.media-library-item--grid.checked.is-hover:before {
+  border-color: var(--color-absolutezero-hover);
+}
+
+.media-library-item--grid.is-focus:before {
+  border-color: var(--color-focus);
+}
 
 .media-library-item--grid.checked:before {
-  border-color: #0076c0;
+  border-color: var(--button--focus-border-color);
+}
+
+.media-library-item--grid .form-boolean--type-checkbox:checked {
+  border-color: var(--button--focus-border-color);
+  background-color: var(--button--focus-border-color);
 }
 
 .media-library-item__click-to-select-checkbox {
@@ -446,6 +632,11 @@
   cursor: move;
 }
 
+.field--widget-media-library-widget .media-library-item__preview img {
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+}
+
 .field--widget-media-library-widget .js-media-library-item:only-child .media-library-item__preview {
   cursor: inherit;
 }
@@ -477,16 +668,13 @@
   background: white;
 }
 
-.media-library-item__name {
-  font-size: 14px;
-}
-
 .media-library-item__name {
   display: block;
   overflow: hidden;
-  margin: 2px;
+  margin: calc(var(--space-xs) / 2) var(--space-xs);
   white-space: nowrap;
   text-overflow: ellipsis;
+  font-size: 14px;
 }
 
 .media-library-item__attributes:hover .media-library-item__name,
@@ -523,14 +711,15 @@
   margin-left: 1em;
 }
 
-.media-library-widget__toggle-weight {
+.media-library-widget__toggle-weight.media-library-widget__toggle-weight {
   position: absolute;
-  top: 5px;
-  right: 5px; /* LTR */
+  top: var(--space-s);
+  right: var(--space-m); /* LTR */
+  text-decoration: none;
 }
-[dir="rtl"] .media-library-widget__toggle-weight {
+[dir="rtl"] .media-library-widget__toggle-weight.media-library-widget__toggle-weight {
   right: auto;
-  left: 5px;
+  left: var(--space-m);
 }
 
 /* Add negative margin for flex grid. */
@@ -560,15 +749,13 @@
   z-index: 1;
   top: 10px;
   overflow: hidden;
-  width: 21px;
-  height: 21px;
+  width: 24px;
+  height: 24px;
   margin: 5px;
   padding: 0;
   transition: 0.2s border-color;
   color: transparent;
-  border: 2px solid #ccc;
-  border-radius: 20px;
-  background-size: 13px;
+  background-size: 12px;
   text-shadow: none;
   font-size: 0;
 }
@@ -590,8 +777,15 @@
 }
 
 .media-library-item__edit {
-  background: url("../../../../misc/icons/787878/pencil.svg") #fff center no-repeat;
-  background-size: 13px;
+  /* !important to override button class border. */
+  border: 1px solid var(--color-lightgray) !important;
+  background-image: url("../../../../misc/icons/545560/pencil.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 12px;
+}
+.media-library-item__edit:active {
+  background-image: url("../../../../misc/icons/ffffff/pencil.svg");
 }
 .media-library-item__remove,
 .media-library-item__remove.button,
@@ -600,17 +794,20 @@
 .media-library-item__remove.button:disabled:active,
 .media-library-item__remove.button:hover,
 .media-library-item__remove.button:focus {
-  background: url("../../../../misc/icons/787878/ex.svg") #fff center no-repeat;
-  background-size: 13px;
+  /* !important to override button class border. */
+  border: 1px solid var(--color-lightgray) !important;
+  background-image: url("../../../../misc/icons/545560/ex.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 12px;
 }
-.media-library-item__edit:hover,
-.media-library-item__edit:focus,
-.media-library-item__remove:hover,
-.media-library-item__remove:focus,
-.media-library-item__remove.button:hover,
-.media-library-item__remove.button:focus,
+
+.media-library-item__remove:active,
+.media-library-item__remove.button:active,
 .media-library-item__remove.button:disabled:active {
-  border-color: #40b6ff;
+  /* !important to override button class border. */
+  border-color: var(--color-absolutezero) !important;
+  background-image: url("../../../../misc/icons/ffffff/ex.svg");
 }
 
 /**
@@ -623,26 +820,10 @@
 .media-library-add-form__media {
   position: relative;
   display: flex;
-  padding: 1em 0;
   border-bottom: 1px solid #c0c0c0;
   outline: none;
 }
 
-/* Do not show the top padding for the first item. */
-.media-library-add-form__media:first-child {
-  padding-top: 0;
-}
-
-/**
- * Change the position of the remove button for the first item.
- *
- * The first item doesn't have a top padding, change the location of the remove
- * button as well.
- */
-.media-library-add-form__media:first-child .media-library-add-form__remove-button[type="submit"] {
-  top: 5px;
-}
-
 /* Do not show the bottom border and padding for the last item. */
 .media-library-add-form__media:last-child {
   padding-bottom: 0;
@@ -655,7 +836,7 @@
   justify-content: center;
   width: 220px;
   margin-right: 20px; /* LTR */
-  background: #ebebeb;
+  background: var(--color-whitesmoke-o-40);
 }
 [dir="rtl"] .media-library-add-form__preview {
   margin-right: 0;
@@ -666,20 +847,17 @@
   flex-grow: 1;
 }
 
-/**
- * @todo Remove [type="submit"] when styles are moved to the seven theme in
- *   https://www.drupal.org/project/drupal/issues/2980769
- */
-.media-library-add-form__remove-button[type="submit"] {
+.media-library-add-form__remove-button {
   position: absolute;
-  top: 25px;
-  right: 6px;
-  margin-right: 0;
+  right: 0;
+  background-image: url("../../../../misc/icons/000000/ex.svg");
+  background-repeat: no-repeat;
+  background-position: var(--space-xs) center;
+  background-size: var(--space-s);
 }
-[dir="rtl"] .media-library-add-form__remove-button[type="submit"] {
+[dir="rtl"] .media-library-add-form__remove-button {
   right: auto;
-  left: 13px;
-  margin-left: 0;
+  left: 0;
 }
 
 /* @todo Remove in https://www.drupal.org/project/drupal/issues/3064914 */
diff --git a/core/themes/claro/css/theme/views_ui.admin.theme.css b/core/themes/claro/css/theme/views_ui.admin.theme.css
index 0074497dbc..6be19a6324 100644
--- a/core/themes/claro/css/theme/views_ui.admin.theme.css
+++ b/core/themes/claro/css/theme/views_ui.admin.theme.css
@@ -32,7 +32,7 @@
    */
   /*
    * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* 48px */ /* 150% */ /* 32px */ /* 150 % */ /* 24px */ /* 150% */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
   /*
    * Details.
    */
@@ -57,6 +57,9 @@
   /**
    * Breadcrumb.
    */
+  /**
+    * Vertical Tabs.
+    */
 }
 
 .views-admin .links {
diff --git a/core/themes/claro/images/icons/868686/magnifier-rtl.svg b/core/themes/claro/images/icons/868686/magnifier-rtl.svg
index 7e28872c08..df27ff04ed 100644
--- a/core/themes/claro/images/icons/868686/magnifier-rtl.svg
+++ b/core/themes/claro/images/icons/868686/magnifier-rtl.svg
@@ -1 +1 @@
-<svg width="40" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12 1c4.54-.173 8.188 4.787 6.687 9.068-1.176 4.384-6.993 6.417-10.637 3.7-.326-.39-.565.276-.846.442l-3.74 3.739-1.413-1.414 4.35-4.35C3.59 8.717 5.25 2.938 9.462 1.475A7.003 7.003 0 0112 1zm0 2c-3.242-.123-5.849 3.42-4.777 6.477.842 3.132 4.994 4.58 7.6 2.65 2.745-1.73 2.9-6.125.285-8.044A5.006 5.006 0 0012 3z" fill="#868686"/></svg>
\ No newline at end of file
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11.699.102c5.307-.201 9.574 5.598 7.819 10.605-1.377 5.126-8.178 7.503-12.438 4.326-.381-.457-.662.323-.989.516l-4.374 4.373-1.653-1.655 5.086-5.085C1.864 9.127 3.807 2.368 8.732.659a8.2 8.2 0 012.967-.557zm0 2.339c-3.792-.144-6.84 3.999-5.586 7.575.983 3.662 5.839 5.355 8.886 3.097 3.209-2.022 3.391-7.161.334-9.405a5.862 5.862 0 00-3.634-1.267z" fill="#868686"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/images/icons/868686/magnifier.svg b/core/themes/claro/images/icons/868686/magnifier.svg
index 4e6f92b7cf..165b68b53b 100644
--- a/core/themes/claro/images/icons/868686/magnifier.svg
+++ b/core/themes/claro/images/icons/868686/magnifier.svg
@@ -1 +1 @@
-<svg width="40" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8 1C3.46.827-.188 5.787 1.313 10.068c1.176 4.384 6.993 6.417 10.637 3.7.326-.39.565.276.846.442l3.74 3.739 1.413-1.414-4.35-4.35c2.811-3.468 1.15-9.247-3.062-10.71A7.003 7.003 0 008 1zm0 2c3.242-.123 5.849 3.42 4.777 6.477-.842 3.132-4.994 4.58-7.6 2.65-2.745-1.73-2.9-6.125-.285-8.044A5.006 5.006 0 018 3z" fill="#868686"/></svg>
\ No newline at end of file
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8.31.073C2.999-.128-1.275 5.676.481 10.687c1.376 5.131 8.184 7.51 12.448 4.33.382-.457.662.323.991.517l4.374 4.376 1.656-1.654-5.091-5.092C18.151 9.107 16.207 2.341 11.277.63A8.193 8.193 0 008.31.073zm-.001 2.342c3.796-.145 6.844 4.001 5.589 7.58-.985 3.665-5.846 5.361-8.895 3.101-3.211-2.024-3.392-7.168-.331-9.414a5.858 5.858 0 013.637-1.267z" fill="#868686"/></svg>
\ No newline at end of file
diff --git a/core/themes/claro/src/ClaroPreRender.php b/core/themes/claro/src/ClaroPreRender.php
index d702543451..1ce41916f4 100644
--- a/core/themes/claro/src/ClaroPreRender.php
+++ b/core/themes/claro/src/ClaroPreRender.php
@@ -17,7 +17,6 @@ class ClaroPreRender implements TrustedCallbackInterface {
    */
   public static function managedFile($element) {
     if (!empty($element['remove_button']) && is_array($element['remove_button'])) {
-      $element['remove_button']['#attributes']['class'][] = 'button--extrasmall';
       $element['remove_button']['#attributes']['class'][] = 'remove-button';
     }
 
@@ -26,7 +25,7 @@ public static function managedFile($element) {
     }
 
     // Wrap single-cardinality widgets with a details element.
-    $single_file_widget = !empty($element['#cardinality']) && $element['#cardinality'] === 1;
+    $single_file_widget = empty($element['#do_not_wrap_in_details']) && !empty($element['#cardinality']) && $element['#cardinality'] === 1;
     if ($single_file_widget && empty($element['#single_wrapped'])) {
       $element['#theme_wrappers']['details'] = [
         '#title' => $element['#title'],
diff --git a/core/themes/claro/templates/content-edit/file-widget-multiple.html.twig b/core/themes/claro/templates/content-edit/file-widget-multiple.html.twig
index 9dece3f595..122a0bfef0 100644
--- a/core/themes/claro/templates/content-edit/file-widget-multiple.html.twig
+++ b/core/themes/claro/templates/content-edit/file-widget-multiple.html.twig
@@ -14,7 +14,9 @@
 #}
 <div class="file-widget-multiple{{ has_table ? ' has-table' }}">
   <div class="file-widget-multiple__table-wrapper">
-    {{ table }}
+    <div class="form--extrasmall">
+      {{ table }}
+    </div>
     {{ element }}
   </div>
 </div>