From 1fbf9f5d2b589e17b7c67ee45774b32cd9e50807 Mon Sep 17 00:00:00 2001
From: Alex Pott <alex.a.pott@googlemail.com>
Date: Wed, 1 May 2024 11:26:29 +0100
Subject: [PATCH] Issue #3409048 by finnsky, alexpott, longwave, bnjmnm,
 andypost, nod_: Configure postcss formatting after stylelint and
 stylelint-config-standard update

---
 .gitlab-ci.yml                                |   1 +
 core/.prettierrc.json                         |  12 +-
 core/.stylelintrc.json                        |   5 +-
 core/misc/dialog/off-canvas/css/base.pcss.css |   2 +-
 .../dialog/off-canvas/css/wrapper.pcss.css    |   5 +-
 .../css/announcements_feed.dialog.pcss.css    |   1 -
 core/modules/ckeditor5/css/image.css          |   7 +-
 core/modules/ckeditor5/css/language.css       |   2 +-
 .../comment/css/comment.icon.theme.pcss.css   |   2 +-
 .../css/content_moderation.module.css         |   2 +-
 .../css/field_ui_add_field.module.pcss.css    |  12 +-
 core/modules/filter/css/filter.caption.css    |   2 +-
 .../modules/navigation/css/base/variables.css |   1 +
 .../navigation/css/base/variables.pcss.css    |   3 +-
 .../css/components/admin-toolbar.pcss.css     |  51 +-
 .../css/components/body-scroll-lock.pcss.css  |   2 +-
 .../css/components/toolbar-block.pcss.css     |  10 +-
 .../css/components/toolbar-button.pcss.css    |  30 +-
 .../css/components/toolbar-menu.pcss.css      |  18 +-
 .../css/components/toolbar-popover.pcss.css   |  33 +-
 .../css/components/tooltip.pcss.css           |   4 +-
 .../css/components/top-bar.pcss.css           |   4 +-
 core/modules/node/css/node.module.css         |   9 +-
 core/modules/system/css/system.admin.css      |   4 +-
 core/modules/views_ui/css/views_ui.admin.css  |   3 +-
 .../views_ui/css/views_ui.admin.theme.css     |  31 +-
 core/package.json                             |   1 +
 .../themes/umami/components/badge/badge.css   |   6 +-
 .../themes/umami/components/banner/banner.css |   9 +-
 .../themes/umami/components/card/card.css     |   2 +-
 .../components/footer-block/footer-block.css  |   2 +-
 .../themes/umami/components/header/header.css |   6 +-
 .../umami/components/read-more/read-more.css  |   4 +-
 .../demo_umami/themes/umami/css/base.css      |  28 +-
 .../umami/css/classy/components/dialog.css    |   3 +-
 .../umami/css/classy/components/progress.css  |  16 +-
 .../umami/css/components/blocks/help/help.css |   2 +-
 .../blocks/quicklinks/quicklinks.css          |  18 +-
 .../blocks/search/search-results.css          |   2 +-
 .../css/components/blocks/search/search.css   |  14 +-
 .../components/fields/recipe-instruction.css  |   4 +-
 .../umami/css/components/forms/contact.css    |   6 +-
 .../css/components/messages/messages.css      |   2 +-
 .../navigation/breadcrumbs/breadcrumbs.css    |   3 +-
 .../css/components/regions/bottom/bottom.css  |   3 +-
 .../css/components/regions/footer/footer.css  |   6 +-
 .../regions/highlighted/highlighted.css       |   3 +-
 .../regions/pre-header/pre-header.css         |   6 +-
 .../css/components/regions/tabs/tabs.css      |   3 +-
 .../umami/css/components/views/frontpage.css  |   3 +-
 .../css/components/views/promoted-items.css   |  40 +-
 .../themes/umami/css/layout/grid-3.css        |   6 +-
 .../themes/umami/css/layout/grid-4.css        |   6 +-
 .../themes/umami/css/layout/layout-2-col.css  |   3 +-
 .../themes/umami/css/layout/layout.css        |   3 +-
 .../fourcol_section/fourcol_section.css       |   6 +-
 .../oneplusfourgrid_section.css               |   3 +-
 .../threecol_section/threecol_section.css     |   3 +-
 .../layouts/twocol_section/twocol_section.css |   3 +-
 core/scripts/css/compile.js                   |   8 +-
 .../claro/css/components/action-link.pcss.css |  19 -
 .../claro/css/components/details.pcss.css     |   4 +-
 .../claro/css/components/dialog.pcss.css      |   5 +-
 .../components/dropbutton-noscript.pcss.css   |   2 +-
 .../claro/css/components/dropbutton.pcss.css  |  11 +-
 .../claro/css/components/fieldset.pcss.css    |   4 +-
 .../components/form--checkbox-radio.pcss.css  |  25 +-
 .../form--password-confirm.pcss.css           |   4 +-
 .../css/components/form--select.pcss.css      |   3 +-
 .../claro/css/components/form--text.pcss.css  |  13 +-
 .../claro/css/components/icon-link.pcss.css   |   8 +-
 .../css/components/image-preview.pcss.css     |   6 +-
 .../css/components/jquery.ui/theme.pcss.css   | 692 +++++++++++++-----
 .../claro/css/components/shortcut.pcss.css    |   6 +-
 .../system-admin--admin-list.pcss.css         |   2 +-
 .../components/system-admin--modules.pcss.css |   6 +-
 .../claro/css/components/tables.pcss.css      |   3 +-
 .../components/tablesort-indicator.pcss.css   |   1 -
 .../themes/claro/css/components/tabs.pcss.css |   8 +-
 .../css/components/views_ui.admin.pcss.css    |   3 +-
 .../css/layout/system-admin--layout.pcss.css  |   4 +-
 .../claro/css/theme/maintenance-page.pcss.css |  15 +-
 .../claro/css/theme/media-library.pcss.css    |  11 +-
 .../css/theme/views_ui.admin.theme.pcss.css   |  23 +-
 .../olivero/css/base/media-queries.pcss.css   |   2 +-
 .../autocomplete-loading.module.pcss.css      |   2 +-
 .../css/components/breadcrumb.pcss.css        |   4 +-
 .../css/components/form-boolean.pcss.css      |   8 +-
 .../css/components/header-navigation.pcss.css |   8 +-
 .../olivero/css/components/hero.pcss.css      |   3 +-
 .../navigation/nav-primary-wide.pcss.css      |   5 +-
 .../navigation/nav-primary.pcss.css           |   5 +-
 .../navigation/nav-secondary.pcss.css         |   4 +-
 .../css/components/node-teaser.pcss.css       |   2 +-
 .../olivero/css/components/node.pcss.css      |   4 +-
 .../css/components/search-results.pcss.css    |   4 +-
 .../css/components/site-header.pcss.css       |   5 +-
 .../olivero/css/components/tabs.pcss.css      |   5 +-
 .../olivero/css/components/tags.pcss.css      |   2 +-
 .../css/components/vertical-tabs.pcss.css     |   2 +-
 .../announcements_feed.toolbar.css            |   1 -
 .../content_moderation.module.css             |   2 +-
 .../stable9/css/filter/filter.caption.css     |   2 +-
 core/themes/stable9/css/node/node.module.css  |   9 +-
 .../stable9/css/system/system.admin.css       |   4 +-
 .../stable9/css/views_ui/views_ui.admin.css   |   3 +-
 .../css/views_ui/views_ui.admin.theme.css     |  31 +-
 .../css/components/dialog.css                 |   3 +-
 .../css/components/messages.css               |  10 +-
 .../css/components/progress.css               |  16 +-
 core/yarn.lock                                |  13 +
 111 files changed, 1032 insertions(+), 494 deletions(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index ac796f4c0212..0ca45f04e923 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -402,6 +402,7 @@ default:
     - if: $CI_PIPELINE_SOURCE == "merge_request_event"
       changes:
         - core/.stylelintrc.json
+        - core/.prettier*
         - core/package.json
         - core/yarn.lock
         - "**/*.css"
diff --git a/core/.prettierrc.json b/core/.prettierrc.json
index c06cd1fd0798..cccbb6fcb655 100644
--- a/core/.prettierrc.json
+++ b/core/.prettierrc.json
@@ -2,5 +2,15 @@
   "printWidth": 80,
   "semi": true,
   "singleQuote": true,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "overrides": [
+    {
+      "files": ["*.css"],
+      "options": {
+        "parser": "css",
+        "printWidth": 10000,
+        "singleQuote": false
+      }
+    }
+  ]
 }
diff --git a/core/.stylelintrc.json b/core/.stylelintrc.json
index d30748014eb9..d3fedc6c31f2 100644
--- a/core/.stylelintrc.json
+++ b/core/.stylelintrc.json
@@ -1,5 +1,8 @@
 {
-  "extends": "stylelint-config-standard",
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-prettier/recommended"
+  ],
   "plugins": [
     "stylelint-order"
   ],
diff --git a/core/misc/dialog/off-canvas/css/base.pcss.css b/core/misc/dialog/off-canvas/css/base.pcss.css
index 3736a0b0a51a..5f7d09eb6815 100644
--- a/core/misc/dialog/off-canvas/css/base.pcss.css
+++ b/core/misc/dialog/off-canvas/css/base.pcss.css
@@ -87,7 +87,7 @@
     list-style: none;
 
     & li {
-      margin: calc(var(--off-canvas-vertical-spacing-unit) /2) 0;
+      margin: calc(var(--off-canvas-vertical-spacing-unit) / 2) 0;
     }
   }
 }
diff --git a/core/misc/dialog/off-canvas/css/wrapper.pcss.css b/core/misc/dialog/off-canvas/css/wrapper.pcss.css
index b74be8a236f6..c16a7e652df1 100644
--- a/core/misc/dialog/off-canvas/css/wrapper.pcss.css
+++ b/core/misc/dialog/off-canvas/css/wrapper.pcss.css
@@ -34,7 +34,10 @@ body.js-off-canvas-dialog-open {
 
 /* This is a page level content wrapper that shrinks when off-canvas is open. */
 .dialog-off-canvas-main-canvas {
-  transition: padding-right 0.7s ease, padding-left 0.7s ease, padding-top 0.3s ease;
+  transition:
+    padding-right 0.7s ease,
+    padding-left 0.7s ease,
+    padding-top 0.3s ease;
 
   @media (prefers-reduced-motion: reduce) {
     transition: none;
diff --git a/core/modules/announcements_feed/css/announcements_feed.dialog.pcss.css b/core/modules/announcements_feed/css/announcements_feed.dialog.pcss.css
index 5f8c8c58a5e5..f0bf8d427afa 100644
--- a/core/modules/announcements_feed/css/announcements_feed.dialog.pcss.css
+++ b/core/modules/announcements_feed/css/announcements_feed.dialog.pcss.css
@@ -5,7 +5,6 @@
  */
 
 #drupal-off-canvas-wrapper {
-
   & .ui-dialog-titlebar.announce-titlebar::before {
     -webkit-mask-image: url("../images/announcement-bell.svg");
     mask-image: url("../images/announcement-bell.svg");
diff --git a/core/modules/ckeditor5/css/image.css b/core/modules/ckeditor5/css/image.css
index b2e6a15970b6..7fe77f94ca53 100644
--- a/core/modules/ckeditor5/css/image.css
+++ b/core/modules/ckeditor5/css/image.css
@@ -28,12 +28,7 @@
   right: 10px;
   bottom: 10px;
   overflow: hidden;
-  max-width:
-    calc(
-      (var(--is-small) * 0)
-      + (var(--is-medium) * 33)
-      + (var(--is-wide) * 999999)
-    );
+  max-width: calc((var(--is-small) * 0) + (var(--is-medium) * 33) + (var(--is-wide) * 999999));
   border-left: calc((var(--is-small) * 0) + (var(--is-medium) * 3) + (var(--is-wide) * 3)) solid #ffd23f;
   border-radius: 2px;
   background: #232429;
diff --git a/core/modules/ckeditor5/css/language.css b/core/modules/ckeditor5/css/language.css
index 6e39f9064696..6f2324812beb 100644
--- a/core/modules/ckeditor5/css/language.css
+++ b/core/modules/ckeditor5/css/language.css
@@ -13,7 +13,7 @@
   outline: 1px dotted gray;
 }
 .ck-content [lang]::after {
-  content: " ("attr(lang)")";
+  content: " (" attr(lang) ")";
   color: #666;
   font-size: 10px;
 }
diff --git a/core/modules/comment/css/comment.icon.theme.pcss.css b/core/modules/comment/css/comment.icon.theme.pcss.css
index 18201178f32d..62c66c7dcb33 100644
--- a/core/modules/comment/css/comment.icon.theme.pcss.css
+++ b/core/modules/comment/css/comment.icon.theme.pcss.css
@@ -1,4 +1,4 @@
 .field-icon-comment {
-  color:red;
+  color: red;
   background-image: url(../../../misc/icons/55565b/comment.svg);
 }
diff --git a/core/modules/content_moderation/css/content_moderation.module.css b/core/modules/content_moderation/css/content_moderation.module.css
index cf0115c09032..82eab95573b6 100644
--- a/core/modules/content_moderation/css/content_moderation.module.css
+++ b/core/modules/content_moderation/css/content_moderation.module.css
@@ -29,6 +29,6 @@
   padding-bottom: 0.25em;
 }
 
-.entity-moderation-form input[type=submit] {
+.entity-moderation-form input[type="submit"] {
   margin-bottom: 1.2em;
 }
diff --git a/core/modules/field_ui/css/field_ui_add_field.module.pcss.css b/core/modules/field_ui/css/field_ui_add_field.module.pcss.css
index 952c6c5ef7bf..54d5be8aa1ee 100644
--- a/core/modules/field_ui/css/field_ui_add_field.module.pcss.css
+++ b/core/modules/field_ui/css/field_ui_add_field.module.pcss.css
@@ -103,7 +103,9 @@
   }
   &.hover {
     border-color: var(--color-gray);
-    box-shadow: inset 0 0 0 1px var(--color-gray), var(--details-box-shadow);
+    box-shadow:
+      inset 0 0 0 1px var(--color-gray),
+      var(--details-box-shadow);
   }
   &:not(.selected, .error):hover .form-boolean {
     border-color: var(--input-fg-color);
@@ -111,11 +113,15 @@
   }
   &.selected {
     border-color: var(--color-blue);
-    box-shadow: inset 0 0 0 2px var(--color-blue), var(--details-box-shadow);
+    box-shadow:
+      inset 0 0 0 2px var(--color-blue),
+      var(--details-box-shadow);
   }
   &.error {
     border-color: var(--color-red);
-    box-shadow: inset 0 0 0 1px var(--color-red), var(--details-box-shadow);
+    box-shadow:
+      inset 0 0 0 1px var(--color-red),
+      var(--details-box-shadow);
   }
   & .form-item__label.has-error {
     color: currentColor;
diff --git a/core/modules/filter/css/filter.caption.css b/core/modules/filter/css/filter.caption.css
index 34c0b1b8a8a2..b906775f89df 100644
--- a/core/modules/filter/css/filter.caption.css
+++ b/core/modules/filter/css/filter.caption.css
@@ -24,7 +24,7 @@
  *
  * Based on http://codepen.io/flesler/pen/AEIFc.
  */
-.caption > figcaption[contenteditable=true]:empty::before {
+.caption > figcaption[contenteditable="true"]:empty::before {
   content: attr(data-placeholder);
   font-style: italic;
 }
diff --git a/core/modules/navigation/css/base/variables.css b/core/modules/navigation/css/base/variables.css
index a1741036cf11..2d77f9e44f07 100644
--- a/core/modules/navigation/css/base/variables.css
+++ b/core/modules/navigation/css/base/variables.css
@@ -7,6 +7,7 @@
 /* This is a universal size that helps in the case of themes with a size of 10 pixels.
 We need it root to calculate the size of the displace in .dialog-off-canvas-main-canvas */
 :root {
+  /* stylelint-disable-next-line prettier/prettier */
   --admin-toolbar-rem: max(1rem, 16px); /* Workaround until postcss-px-to-rem is removed so this is not converted to rems. */
 }
 [data-drupal-admin-styles] {
diff --git a/core/modules/navigation/css/base/variables.pcss.css b/core/modules/navigation/css/base/variables.pcss.css
index 5388893dce3e..eca0e1e8b8c8 100644
--- a/core/modules/navigation/css/base/variables.pcss.css
+++ b/core/modules/navigation/css/base/variables.pcss.css
@@ -3,6 +3,7 @@
 /* This is a universal size that helps in the case of themes with a size of 10 pixels.
 We need it root to calculate the size of the displace in .dialog-off-canvas-main-canvas */
 :root {
+  /* stylelint-disable-next-line prettier/prettier */
   --admin-toolbar-rem: max(1rem, 16PX); /* Workaround until postcss-px-to-rem is removed so this is not converted to rems. */
 }
 
@@ -135,7 +136,7 @@ We need it root to calculate the size of the displace in .dialog-off-canvas-main
   --admin-toolbar-font-size-info-md: var(--drupal-admin-font-size-info-md, var(--admin-toolbar-rem)); /* 16px */
   --admin-toolbar-line-height-info-md: var(--drupal-admin-line-height-info-md, calc(1.5 * var(--admin-toolbar-rem))); /* 24px */
   --admin-toolbar-font-size-info-lg: var(--drupal-admin-font-size-info-lg, calc(1.125 * var(--admin-toolbar-rem))); /* 18px */
-  --admin-toolbar-line-height-info-lg: var(--drupal-admin-line-height-info-lg,  calc(1.5 * var(--admin-toolbar-rem))); /* 24px */
+  --admin-toolbar-line-height-info-lg: var(--drupal-admin-line-height-info-lg, calc(1.5 * var(--admin-toolbar-rem))); /* 24px */
   --admin-toolbar-font-size-info-xl: var(--drupal-admin-font-size-info-xl, calc(1.25 * var(--admin-toolbar-rem))); /* 20px */
   --admin-toolbar-line-height-info-xl: var(--drupal-admin-line-height-info-xl, calc(1.5 * var(--admin-toolbar-rem))); /* 24px */
 
diff --git a/core/modules/navigation/css/components/admin-toolbar.pcss.css b/core/modules/navigation/css/components/admin-toolbar.pcss.css
index 30f2cdd973bb..0977baf3c4a1 100644
--- a/core/modules/navigation/css/components/admin-toolbar.pcss.css
+++ b/core/modules/navigation/css/components/admin-toolbar.pcss.css
@@ -14,7 +14,7 @@ body {
   --admin-toolbar-sidebar-width: calc(4.5 * var(--admin-toolbar-rem));
   --admin-toolbar-sidebar-header: calc(3.5 * var(--admin-toolbar-rem));
 
-  [data-admin-toolbar='expanded'] & {
+  [data-admin-toolbar="expanded"] & {
     --admin-toolbar-sidebar-width: 80vw;
 
     @media (--admin-toolbar-tablet) {
@@ -94,7 +94,7 @@ body {
     }
   }
 
-  [data-admin-toolbar='expanded'] & {
+  [data-admin-toolbar="expanded"] & {
     transform: none;
   }
 
@@ -102,7 +102,7 @@ body {
     transform: none;
   }
 
-  @media only screen and (max-height: 300px)  {
+  @media only screen and (max-height: 300px) {
     min-height: 20rem;
   }
 }
@@ -112,7 +112,7 @@ body {
   flex-grow: 0;
 }
 
-.admin-toolbar:has([data-toolbar-popover-control][aria-expanded='true']) {
+.admin-toolbar:has([data-toolbar-popover-control][aria-expanded="true"]) {
   .admin-toolbar__back-button {
     display: flex;
 
@@ -162,8 +162,10 @@ body {
     flex-shrink: 0;
     width: calc(1 * var(--admin-toolbar-rem));
     height: calc(1 * var(--admin-toolbar-rem));
-    content: '';
-    transition: opacity var(--admin-toolbar-transition), transform var(--admin-toolbar-transition);
+    content: "";
+    transition:
+      opacity var(--admin-toolbar-transition),
+      transform var(--admin-toolbar-transition);
     opacity: 0;
     background-color: currentColor;
     mask-repeat: no-repeat;
@@ -175,7 +177,7 @@ body {
       opacity: 1;
     }
 
-    [dir='rtl'] & {
+    [dir="rtl"] & {
       transform: rotate(180deg);
     }
 
@@ -184,11 +186,11 @@ body {
     }
   }
 
-  &[aria-expanded='true'] {
+  &[aria-expanded="true"] {
     &::before {
       transform: rotate(180deg);
 
-      [dir='rtl'] & {
+      [dir="rtl"] & {
         transform: none;
       }
     }
@@ -246,7 +248,6 @@ body {
     background-color: transparent;
   }
 
-
   & img {
     display: block;
   }
@@ -261,13 +262,14 @@ body {
   overflow-y: auto;
   flex-direction: column;
   height: 100%;
-  background: linear-gradient(var(--admin-toolbar-color-white) 30%, var(--admin-toolbar-color-white)),
-              radial-gradient(farthest-side at 50% 0, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0));
+  background: linear-gradient(var(--admin-toolbar-color-white) 30%, var(--admin-toolbar-color-white)), radial-gradient(farthest-side at 50% 0, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0));
   background-color: var(--admin-toolbar-color-white);
   background-repeat: no-repeat;
   background-attachment: local, scroll;
   background-position-y: 48px;
-  background-size: 100% 40px, 100% 16px;
+  background-size:
+    100% 40px,
+    100% 16px;
 
   @media (--admin-toolbar-desktop) {
     display: contents;
@@ -292,14 +294,19 @@ body {
     flex-direction: column;
     flex-grow: 1;
     padding-block-start: var(--admin-toolbar-space-16);
-    background: linear-gradient(var(--admin-toolbar-color-white) 30%, var(--admin-toolbar-color-white)),
-                linear-gradient(var(--admin-toolbar-color-white), var(--admin-toolbar-color-white) 80%) 0 100%,
-                radial-gradient(farthest-side at 50% 0, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)),
-                radial-gradient(farthest-side at 50% 100%, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)) 0 100%;
+    background:
+      linear-gradient(var(--admin-toolbar-color-white) 30%, var(--admin-toolbar-color-white)),
+      linear-gradient(var(--admin-toolbar-color-white), var(--admin-toolbar-color-white) 80%) 0 100%,
+      radial-gradient(farthest-side at 50% 0, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)),
+      radial-gradient(farthest-side at 50% 100%, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)) 0 100%;
     background-color: var(--admin-toolbar-color-white);
     background-repeat: no-repeat;
     background-attachment: local, local, scroll, scroll;
-    background-size: 100% 40px, 100% 40px, 100% 16px, 100% 16px;
+    background-size:
+      100% 40px,
+      100% 40px,
+      100% 16px,
+      100% 16px;
   }
 }
 
@@ -335,9 +342,9 @@ body {
   }
 }
 
-[data-drupal-tooltip]:hover +.admin-toolbar__tooltip,
-[data-drupal-tooltip]:focus +.admin-toolbar__tooltip {
-  [data-admin-toolbar='expanded'] & {
+[data-drupal-tooltip]:hover + .admin-toolbar__tooltip,
+[data-drupal-tooltip]:focus + .admin-toolbar__tooltip {
+  [data-admin-toolbar="expanded"] & {
     display: none;
   }
 }
@@ -356,7 +363,7 @@ body {
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.14);
 
-  :where([data-admin-toolbar='expanded']) & {
+  :where([data-admin-toolbar="expanded"]) & {
     display: block;
   }
 
diff --git a/core/modules/navigation/css/components/body-scroll-lock.pcss.css b/core/modules/navigation/css/components/body-scroll-lock.pcss.css
index 4032a40fa370..eb759258e857 100644
--- a/core/modules/navigation/css/components/body-scroll-lock.pcss.css
+++ b/core/modules/navigation/css/components/body-scroll-lock.pcss.css
@@ -5,7 +5,7 @@
 
 @import "../base/media-queries.pcss.css";
 
-[data-admin-toolbar-body-scroll='locked'] {
+[data-admin-toolbar-body-scroll="locked"] {
   overflow: clip;
 
   body {
diff --git a/core/modules/navigation/css/components/toolbar-block.pcss.css b/core/modules/navigation/css/components/toolbar-block.pcss.css
index af34e822fe0a..478c8738bd81 100644
--- a/core/modules/navigation/css/components/toolbar-block.pcss.css
+++ b/core/modules/navigation/css/components/toolbar-block.pcss.css
@@ -9,7 +9,7 @@
   gap: var(--admin-toolbar-space-4);
 
   .admin-toolbar__content & {
-    &:nth-last-child(n+2) {
+    &:nth-last-child(n + 2) {
       &::after {
         margin-top: var(--admin-toolbar-space-8);
         content: "";
@@ -43,10 +43,10 @@
   font-family: inherit;
   font-size: var(--admin-toolbar-font-size-label-xs);
   line-height: var(--admin-toolbar-line-height-label-xs);
-  font-variation-settings: 'wght' 500;
+  font-variation-settings: "wght" 500;
 
-  html:not([data-admin-toolbar='expanded']) &,
-  html[data-admin-toolbar-animating][data-admin-toolbar='expanded'] & {
+  html:not([data-admin-toolbar="expanded"]) &,
+  html[data-admin-toolbar-animating][data-admin-toolbar="expanded"] & {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -61,7 +61,7 @@
       display: block;
       width: var(--admin-toolbar-space-4);
       height: var(--admin-toolbar-space-4);
-      content: '';
+      content: "";
       border-radius: 50%;
       background-color: currentColor;
     }
diff --git a/core/modules/navigation/css/components/toolbar-button.pcss.css b/core/modules/navigation/css/components/toolbar-button.pcss.css
index ea328f5fe1a8..b56d7b882c20 100644
--- a/core/modules/navigation/css/components/toolbar-button.pcss.css
+++ b/core/modules/navigation/css/components/toolbar-button.pcss.css
@@ -4,7 +4,7 @@
  * Toolbar button styles.
  */
 
-@import '../base/media-queries.pcss.css';
+@import "../base/media-queries.pcss.css";
 
 :root {
   --toolbar-button-outline-offset: 0;
@@ -33,7 +33,7 @@
   border-radius: var(--admin-toolbar-space-8);
   background-color: transparent;
   font-size: var(--admin-toolbar-font-size-info-sm);
-  font-variation-settings: 'wght' 700;
+  font-variation-settings: "wght" 700;
   line-height: var(--admin-toolbar-line-height-info-sm);
   gap: calc(0.5 * var(--admin-toolbar-rem));
 
@@ -91,7 +91,7 @@
 }
 
 /* Class starts with `toolbar-button--icon`  */
-[class*='toolbar-button--icon'] {
+[class*="toolbar-button--icon"] {
   --icon: url(../../assets/icons/basic.svg); /* Default icon, aka --basic */
 
   padding-inline: calc(0.625 * var(--admin-toolbar-rem));
@@ -101,7 +101,7 @@
     flex-shrink: 0;
     inline-size: var(--admin-toolbar-space-20);
     block-size: var(--admin-toolbar-space-20);
-    content: '';
+    content: "";
     background-color: currentColor;
     mask-repeat: no-repeat;
     mask-position: center center;
@@ -139,17 +139,17 @@
   }
 }
 
-.toolbar-button--secondary--expanded[aria-expanded='true'] {
+.toolbar-button--secondary--expanded[aria-expanded="true"] {
   color: white;
   background-color: var(--admin-toolbar-color-gray-900);
 }
 
-.toolbar-button--tertiary--expanded[aria-expanded='true'] {
+.toolbar-button--tertiary--expanded[aria-expanded="true"] {
   background-color: var(--admin-toolbar-color-gray-050);
 }
 
 .toolbar-button--weight--400 {
-  font-variation-settings: 'wght' 400;
+  font-variation-settings: "wght" 400;
 }
 
 /* Set 0 specificity */
@@ -158,11 +158,11 @@
   flex-grow: 1;
 }
 
-[class*='toolbar-button--expand'] {
+[class*="toolbar-button--expand"] {
   &::after {
     flex-shrink: 0;
     margin-inline-start: auto;
-    content: '';
+    content: "";
     transition: transform var(--admin-toolbar-transition);
     background-color: currentColor;
     block-size: var(--admin-toolbar-space-16);
@@ -172,7 +172,7 @@
     mask-position: center center;
     mask-image: url(../../assets/icons/chevron.svg);
 
-    [dir='rtl'] & {
+    [dir="rtl"] & {
       transform: rotate(180deg);
     }
 
@@ -183,7 +183,7 @@
 }
 
 .toolbar-button--expand--down,
-[dir='rtl'] .toolbar-button--expand--down {
+[dir="rtl"] .toolbar-button--expand--down {
   &::after {
     transform: rotate(90deg);
 
@@ -192,7 +192,7 @@
     }
   }
 
-  &[aria-expanded='true'] {
+  &[aria-expanded="true"] {
     &::after {
       transform: rotate(-90deg);
     }
@@ -286,7 +286,7 @@
   --icon: url(../../assets/icons/user.svg);
 }
 
-html:not([data-admin-toolbar='expanded']) {
+html:not([data-admin-toolbar="expanded"]) {
   .toolbar-button--collapsible::after {
     display: none;
   }
@@ -305,8 +305,6 @@ html:not([data-admin-toolbar='expanded']) {
 }
 
 /* Hides button's label while transitioning. */
-html[data-admin-toolbar-animating][data-admin-toolbar='expanded']
-  .toolbar-button--collapsible
-  .toolbar-button__label {
+html[data-admin-toolbar-animating][data-admin-toolbar="expanded"] .toolbar-button--collapsible .toolbar-button__label {
   display: none;
 }
diff --git a/core/modules/navigation/css/components/toolbar-menu.pcss.css b/core/modules/navigation/css/components/toolbar-menu.pcss.css
index ec780657c55f..70b17c0f7416 100644
--- a/core/modules/navigation/css/components/toolbar-menu.pcss.css
+++ b/core/modules/navigation/css/components/toolbar-menu.pcss.css
@@ -11,14 +11,14 @@
   margin: 0;
   padding: 0;
   list-style-type: none;
-  gap: var(--admin-toolbar-space-4)
+  gap: var(--admin-toolbar-space-4);
 }
 
 [class*="toolbar-menu--level-"] {
   display: none;
 }
 
-[data-toolbar-menu-trigger][aria-expanded='true'] + [class*="toolbar-menu--level-"] {
+[data-toolbar-menu-trigger][aria-expanded="true"] + [class*="toolbar-menu--level-"] {
   display: grid;
 }
 
@@ -29,7 +29,7 @@
 .toolbar-menu__item--level-1 {
   border-radius: var(--admin-toolbar-space-8);
 
-  &:has(> [data-toolbar-menu-trigger][aria-expanded='true']) {
+  &:has(> [data-toolbar-menu-trigger][aria-expanded="true"]) {
     background: var(--admin-toolbar-color-gray-050);
   }
 }
@@ -38,7 +38,7 @@
   padding-block-end: var(--admin-toolbar-space-12);
   box-shadow: inset var(--admin-toolbar-space-4) 0 0 0 var(--admin-toolbar-color-gray-100);
 
-  [dir='rtl'] & {
+  [dir="rtl"] & {
     box-shadow: inset calc(-1 * var(--admin-toolbar-space-4)) 0 0 0 var(--admin-toolbar-color-gray-100);
   }
 }
@@ -78,7 +78,7 @@
       z-index: 1;
       inset-block-start: calc(50% - var(--admin-toolbar-space-8) / 2);
       inset-inline-start: calc(var(--admin-toolbar-space-4) * -0.5);
-      content: '';
+      content: "";
       border-radius: 50%;
       background-color: currentColor;
       inline-size: var(--admin-toolbar-space-8);
@@ -112,7 +112,7 @@
     &::after {
       flex-shrink: 0;
       margin-inline-start: auto;
-      content: '';
+      content: "";
       transition: transform var(--admin-toolbar-transition);
       transform: rotate(90deg);
       background-color: currentColor;
@@ -123,7 +123,7 @@
       mask-position: center center;
       mask-image: url(../../assets/icons/chevron.svg);
 
-      [dir='rtl'] & {
+      [dir="rtl"] & {
         transform: rotate(90deg);
       }
 
@@ -133,11 +133,11 @@
     }
   }
 
-  &[aria-expanded='true'] {
+  &[aria-expanded="true"] {
     &::after {
       transform: rotate(-90deg);
 
-      [dir='rtl'] & {
+      [dir="rtl"] & {
         transform: rotate(-90deg);
       }
     }
diff --git a/core/modules/navigation/css/components/toolbar-popover.pcss.css b/core/modules/navigation/css/components/toolbar-popover.pcss.css
index 0532e6176710..ecaca8bda872 100644
--- a/core/modules/navigation/css/components/toolbar-popover.pcss.css
+++ b/core/modules/navigation/css/components/toolbar-popover.pcss.css
@@ -1,4 +1,4 @@
-@import '../base/media-queries.pcss.css';
+@import "../base/media-queries.pcss.css";
 
 .toolbar-popover {
   --safe-triangle-cursor-y: 100px;
@@ -32,8 +32,10 @@
   display: grid;
   overflow: auto;
   grid-auto-rows: max-content;
-  padding: var(--admin-toolbar-space-12) var(--admin-toolbar-space-16) var(--admin-toolbar-space-16) ;
-  transition: transform var(--admin-toolbar-transition), opacity var(--admin-toolbar-transition);
+  padding: var(--admin-toolbar-space-12) var(--admin-toolbar-space-16) var(--admin-toolbar-space-16);
+  transition:
+    transform var(--admin-toolbar-transition),
+    opacity var(--admin-toolbar-transition);
   transform: translateX(-100%);
   transform-origin: 0;
   opacity: 0;
@@ -46,7 +48,7 @@
   /* Hide the drop-shadow on the left side. */
   clip-path: inset(0 -10rem 0 0);
 
-  [dir='rtl'] & {
+  [dir="rtl"] & {
     /* Hide the drop-shadow on the right side. */
     clip-path: inset(0 0 0 -10rem);
     transform: translateX(0);
@@ -57,9 +59,7 @@
 
     padding-block-start: var(--admin-toolbar-space-16);
     transform: translateX(0);
-    filter: drop-shadow(0 0 72px rgba(0, 0, 0, 0.2))
-    drop-shadow(0 0 8px rgba(0, 0, 0, 0.04))
-    drop-shadow(0 0 40px rgba(0, 0, 0, 0.06));
+    filter: drop-shadow(0 0 72px rgba(0, 0, 0, 0.2)) drop-shadow(0 0 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 0 40px rgba(0, 0, 0, 0.06));
     inline-size: var(--admin-toolbar-popover-width);
     inset-block-start: 0;
     inset-inline-start: 0;
@@ -69,17 +69,12 @@
 [data-toolbar-popover-safe-triangle] {
   position: fixed;
   display: none;
-  content: '';
+  content: "";
   inset: 0;
-  clip-path: polygon(
-    var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0),
-    var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0),
-    var(--safe-triangle-submenu-end-x, 0) max(var(--safe-triangle-submenu-end-y, 0), var(--safe-triangle-cursor-y, 0), 66vh)
-  );
+  clip-path: polygon(var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0), var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0), var(--safe-triangle-submenu-end-x, 0) max(var(--safe-triangle-submenu-end-y, 0), var(--safe-triangle-cursor-y, 0), 66vh));
 }
 
-[data-toolbar-popover-control][aria-expanded='true']
-  + [data-toolbar-popover-wrapper] {
+[data-toolbar-popover-control][aria-expanded="true"] + [data-toolbar-popover-wrapper] {
   transform: translateX(0);
   opacity: 1;
 
@@ -92,12 +87,8 @@
   }
 }
 
-[data-admin-toolbar='collapsed'] [data-toolbar-popover-wrapper] {
-  transform: translateX(
-    calc(
-      (16 * var(--admin-toolbar-rem) * -1) + var(--drupal-displace-offset-left)
-    )
-  );
+[data-admin-toolbar="collapsed"] [data-toolbar-popover-wrapper] {
+  transform: translateX(calc((16 * var(--admin-toolbar-rem) * -1) + var(--drupal-displace-offset-left)));
 
   [dir="rtl"] & {
     transform: translateX(calc((16 * var(--admin-toolbar-rem)) + var(--drupal-displace-offset-right)));
diff --git a/core/modules/navigation/css/components/tooltip.pcss.css b/core/modules/navigation/css/components/tooltip.pcss.css
index 2b725c30aa88..7af2010c2f4f 100644
--- a/core/modules/navigation/css/components/tooltip.pcss.css
+++ b/core/modules/navigation/css/components/tooltip.pcss.css
@@ -9,7 +9,7 @@
   z-index: var(--admin-toolbar-z-index-tooltip);
   display: none;
   padding-inline: var(--admin-toolbar-space-12);
-  padding-block: var(--admin-toolbar-space-8) ;
+  padding-block: var(--admin-toolbar-space-8);
   color: var(--admin-toolbar-color-white);
   border-radius: var(--admin-toolbar-space-8);
   background-color: var(--admin-toolbar-color-gray-990);
@@ -23,6 +23,6 @@
   display: block;
 }
 
-[data-admin-toolbar='expanded'] [data-drupal-tooltip]:hover + .toolbar-block__title-tooltip {
+[data-admin-toolbar="expanded"] [data-drupal-tooltip]:hover + .toolbar-block__title-tooltip {
   display: none;
 }
diff --git a/core/modules/navigation/css/components/top-bar.pcss.css b/core/modules/navigation/css/components/top-bar.pcss.css
index 22f38c054c4c..7fb795c1db4c 100644
--- a/core/modules/navigation/css/components/top-bar.pcss.css
+++ b/core/modules/navigation/css/components/top-bar.pcss.css
@@ -22,7 +22,9 @@
     width: 100vw;
     padding-block: var(--admin-toolbar-space-12);
     padding-inline: calc(var(--drupal-displace-offset-left, var(--admin-toolbar-sidebar-width)) + var(--admin-toolbar-space-32)) var(--admin-toolbar-space-32);
-    box-shadow: 0 0 40px 0 var(--admin-toolbar-color-shadow-6), 0 4px 4px 0 var(--admin-toolbar-color-shadow-8);
+    box-shadow:
+      0 0 40px 0 var(--admin-toolbar-color-shadow-6),
+      0 4px 4px 0 var(--admin-toolbar-color-shadow-8);
 
     [dir="rtl"] & {
       padding-inline: calc(var(--drupal-displace-offset-right, var(--admin-toolbar-sidebar-width)) + var(--admin-toolbar-space-32)) var(--admin-toolbar-space-32);
diff --git a/core/modules/node/css/node.module.css b/core/modules/node/css/node.module.css
index c564633691c3..60a4f30a7d76 100644
--- a/core/modules/node/css/node.module.css
+++ b/core/modules/node/css/node.module.css
@@ -13,10 +13,7 @@
 }
 
 /* Wide screens */
-@media
-  screen and (min-width: 780px),
-  (orientation: landscape) and (min-device-height: 780px) {
-
+@media screen and (min-width: 780px), (orientation: landscape) and (min-device-height: 780px) {
   .layout-region-node-main,
   .layout-region-node-footer {
     float: left; /* LTR */
@@ -63,9 +60,7 @@
  * toolbar is on, we need to suppress layout for the original media width + the
  * toolbar width (240px). In this case, 240px + 780px.
  */
-@media
-  screen and (max-width: 1020px) {
-
+@media screen and (max-width: 1020px) {
   .toolbar-vertical.toolbar-tray-open .layout-region-node-main,
   .toolbar-vertical.toolbar-tray-open .layout-region-node-footer,
   .toolbar-vertical.toolbar-tray-open .layout-region-node-secondary {
diff --git a/core/modules/system/css/system.admin.css b/core/modules/system/css/system.admin.css
index 15232c2114ed..ea883e435464 100644
--- a/core/modules/system/css/system.admin.css
+++ b/core/modules/system/css/system.admin.css
@@ -20,7 +20,7 @@
     margin: 0 2.5em;
   }
   .layout-column {
-    float: left;  /* LTR */
+    float: left; /* LTR */
     box-sizing: border-box;
   }
   [dir="rtl"] .layout-column {
@@ -371,7 +371,7 @@ small .admin-link::after {
   margin: 0;
   padding: 0 0.7em;
   list-style-type: none;
-  border-right: 1px solid #cdcdcd;  /* LTR */
+  border-right: 1px solid #cdcdcd; /* LTR */
 }
 [dir="rtl"] .theme-selector .operations li {
   float: right;
diff --git a/core/modules/views_ui/css/views_ui.admin.css b/core/modules/views_ui/css/views_ui.admin.css
index aca14d88bf69..cea5388c5087 100644
--- a/core/modules/views_ui/css/views_ui.admin.css
+++ b/core/modules/views_ui/css/views_ui.admin.css
@@ -147,7 +147,8 @@
   margin-bottom: 2em;
 }
 
-@media screen and (min-width: 45em) { /* 720px */
+@media screen and (min-width: 45em) {
+  /* 720px */
   .views-display-columns > * {
     float: left; /* LTR */
     width: 32%;
diff --git a/core/modules/views_ui/css/views_ui.admin.theme.css b/core/modules/views_ui/css/views_ui.admin.theme.css
index 2d8fe5081f9b..529e8fa77c63 100644
--- a/core/modules/views_ui/css/views_ui.admin.theme.css
+++ b/core/modules/views_ui/css/views_ui.admin.theme.css
@@ -36,7 +36,9 @@
 .views-admin a.icon {
   border: 1px solid #ddd;
   border-radius: 4px;
-  background: linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat, repeat-y;
+  background:
+    linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat,
+    repeat-y;
   box-shadow: 0 0 0 rgba(0, 0, 0, 0.3333) inset;
 }
 .views-admin a.icon:hover {
@@ -78,28 +80,40 @@
   background-position: center 3px;
 }
 .views-admin a.icon.add {
-  background-position: center 3px, left top; /* LTR */
+  background-position:
+    center 3px,
+    left top; /* LTR */
 }
 [dir="rtl"] .views-admin a.icon.add {
-  background-position: center 3px, right top;
+  background-position:
+    center 3px,
+    right top;
 }
 .views-admin .icon.delete {
   background-position: center -52px;
 }
 .views-admin a.icon.delete {
-  background-position: center -52px, left top; /* LTR */
+  background-position:
+    center -52px,
+    left top; /* LTR */
 }
 [dir="rtl"] .views-admin a.icon.delete {
-  background-position: center -52px, right top;
+  background-position:
+    center -52px,
+    right top;
 }
 .views-admin .icon.rearrange {
   background-position: center -111px;
 }
 .views-admin a.icon.rearrange {
-  background-position: center -111px, left top; /* LTR */
+  background-position:
+    center -111px,
+    left top; /* LTR */
 }
 [dir="rtl"] .views-admin a.icon.rearrange {
-  background-position: center -111px, right top;
+  background-position:
+    center -111px,
+    right top;
 }
 .views-displays .tabs a:hover > .icon.add {
   background-position: center -25px;
@@ -484,7 +498,8 @@ td.group-title {
   vertical-align: top;
 }
 
-@media screen and (min-width: 45em) { /* 720px */
+@media screen and (min-width: 45em) {
+  /* 720px */
   .view-preview-form .form-type-textfield .description {
     white-space: nowrap;
   }
diff --git a/core/package.json b/core/package.json
index 60ff109d15c8..6b7b9b0c059a 100644
--- a/core/package.json
+++ b/core/package.json
@@ -94,6 +94,7 @@
     "stylelint-config-standard": "^34.0.0",
     "stylelint-formatter-gitlab": "^1.0.2",
     "stylelint-order": "^6.0.3",
+    "stylelint-prettier": "^4.1.0",
     "tabbable": "^6.1.2",
     "terser": "^5.19.0",
     "terser-webpack-plugin": "^5.3.9",
diff --git a/core/profiles/demo_umami/themes/umami/components/badge/badge.css b/core/profiles/demo_umami/themes/umami/components/badge/badge.css
index e5488dd15230..1f30e5021cb3 100644
--- a/core/profiles/demo_umami/themes/umami/components/badge/badge.css
+++ b/core/profiles/demo_umami/themes/umami/components/badge/badge.css
@@ -5,7 +5,8 @@
 }
 
 /* Large */
-@media screen and (min-width: 60rem) {  /* 960px */
+@media screen and (min-width: 60rem) {
+  /* 960px */
   .umami-badge__container {
     flex-direction: column;
     gap: 0;
@@ -23,7 +24,8 @@
 }
 
 /* Large */
-@media screen and (min-width: 60rem) {  /* 960px */
+@media screen and (min-width: 60rem) {
+  /* 960px */
   .umami-badge__icon {
     align-items: start;
     width: 56px;
diff --git a/core/profiles/demo_umami/themes/umami/components/banner/banner.css b/core/profiles/demo_umami/themes/umami/components/banner/banner.css
index 9558b818e7cd..b60dd0b5b9cc 100644
--- a/core/profiles/demo_umami/themes/umami/components/banner/banner.css
+++ b/core/profiles/demo_umami/themes/umami/components/banner/banner.css
@@ -17,7 +17,8 @@
 }
 
 /* Medium */
-@media screen and (min-width: 48rem) { /* 768px */
+@media screen and (min-width: 48rem) {
+  /* 768px */
   .banner {
     position: relative; /* Anchor absolutely positioned background image. */
     background-color: #464646;
@@ -51,7 +52,8 @@
   }
 }
 /* Large */
-@media screen and (min-width: 60rem) { /* 960px */
+@media screen and (min-width: 60rem) {
+  /* 960px */
   .banner__content {
     max-width: 41%;
   }
@@ -60,7 +62,8 @@
   }
 }
 /* Extra large + side margins */
-@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */
+@media screen and (min-width: 80rem) {
+  /* 1200px (large) + 80px (side margins) = 1280px */
   .banner__inner {
     padding: 0;
   }
diff --git a/core/profiles/demo_umami/themes/umami/components/card/card.css b/core/profiles/demo_umami/themes/umami/components/card/card.css
index 27233534d87f..aadfed67fa23 100644
--- a/core/profiles/demo_umami/themes/umami/components/card/card.css
+++ b/core/profiles/demo_umami/themes/umami/components/card/card.css
@@ -62,4 +62,4 @@
 .umami-card .field--name-field-media-image img {
   display: block;
   width: 100%;
-}
\ No newline at end of file
+}
diff --git a/core/profiles/demo_umami/themes/umami/components/footer-block/footer-block.css b/core/profiles/demo_umami/themes/umami/components/footer-block/footer-block.css
index 6cae3abc1cbe..f5f222137383 100644
--- a/core/profiles/demo_umami/themes/umami/components/footer-block/footer-block.css
+++ b/core/profiles/demo_umami/themes/umami/components/footer-block/footer-block.css
@@ -44,4 +44,4 @@
   .footer-block__wrapper {
     flex-direction: row;
   }
-}
\ No newline at end of file
+}
diff --git a/core/profiles/demo_umami/themes/umami/components/header/header.css b/core/profiles/demo_umami/themes/umami/components/header/header.css
index c5fa07a4a8d2..43de9a44d94a 100644
--- a/core/profiles/demo_umami/themes/umami/components/header/header.css
+++ b/core/profiles/demo_umami/themes/umami/components/header/header.css
@@ -7,14 +7,16 @@
 }
 
 /* Medium */
-@media screen and (min-width: 48rem) { /* 768px */
+@media screen and (min-width: 48rem) {
+  /* 768px */
   .umami-header {
     padding-top: 0;
   }
 }
 
 /* Extra large + side margins */
-@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */
+@media screen and (min-width: 80rem) {
+  /* 1200px (large) + 80px (side margins) = 1280px */
   .umami-header {
     padding: 0;
   }
diff --git a/core/profiles/demo_umami/themes/umami/components/read-more/read-more.css b/core/profiles/demo_umami/themes/umami/components/read-more/read-more.css
index 33110078bfda..cfce56c76896 100644
--- a/core/profiles/demo_umami/themes/umami/components/read-more/read-more.css
+++ b/core/profiles/demo_umami/themes/umami/components/read-more/read-more.css
@@ -13,7 +13,7 @@
   border-bottom: 1px solid transparent;
   background-color: inherit;
 }
-[dir=rtl] .read-more {
+[dir="rtl"] .read-more {
   padding-right: unset;
   padding-left: 20px;
 }
@@ -32,7 +32,7 @@
   height: 14px;
   margin-top: -7px;
 }
-[dir=rtl] .read-more__icon {
+[dir="rtl"] .read-more__icon {
   right: unset;
   left: 0;
   transform: rotate(180deg);
diff --git a/core/profiles/demo_umami/themes/umami/css/base.css b/core/profiles/demo_umami/themes/umami/css/base.css
index eac142c1cb34..ed4f5ffa337c 100644
--- a/core/profiles/demo_umami/themes/umami/css/base.css
+++ b/core/profiles/demo_umami/themes/umami/css/base.css
@@ -103,14 +103,16 @@ blockquote p:last-child {
   margin-bottom: 0;
 }
 /* Small */
-@media screen and (min-width: 30rem) { /* 480px */
+@media screen and (min-width: 30rem) {
+  /* 480px */
   blockquote {
     margin: 0 1.5rem 1.28rem;
     padding: 1.5rem;
   }
 }
 /* Medium */
-@media screen and (min-width: 40rem) { /* 640px */
+@media screen and (min-width: 40rem) {
+  /* 640px */
   blockquote {
     margin: 0 2.5rem 1.28rem;
     padding: 3rem;
@@ -138,7 +140,8 @@ h1 {
   line-height: 1.2;
 }
 /* Large */
-@media screen and (min-width: 60rem) { /* 960px */
+@media screen and (min-width: 60rem) {
+  /* 960px */
   h1 {
     font-size: 2.369rem;
   }
@@ -147,11 +150,12 @@ h1 {
 h2 {
   margin: 0 0 0.7rem 0;
   font-family: "Scope One", Georgia, serif;
-  font-size: 1.266rem;  /* +2 based on 1.125 modular scale (major second) */
+  font-size: 1.266rem; /* +2 based on 1.125 modular scale (major second) */
   line-height: 1.2;
 }
 /* Large */
-@media screen and (min-width: 60rem) { /* 960px */
+@media screen and (min-width: 60rem) {
+  /* 960px */
   h2 {
     font-size: 1.77rem;
   }
@@ -161,10 +165,11 @@ h3 {
   margin: 0 0 0.96rem 0;
   font-family: "Scope One", Georgia, serif;
   font-size: 1.125rem;
-  line-height: 1.2;/* +1 based on 1.125 modular scale (major second) */
+  line-height: 1.2; /* +1 based on 1.125 modular scale (major second) */
 }
 /* Large */
-@media screen and (min-width: 60rem) { /* 960px */
+@media screen and (min-width: 60rem) {
+  /* 960px */
   h3 {
     font-size: 1.5rem;
   }
@@ -177,7 +182,8 @@ h4 {
   line-height: 1.2;
 }
 /* Large */
-@media screen and (min-width: 60rem) { /* 960px */
+@media screen and (min-width: 60rem) {
+  /* 960px */
   h4 {
     font-size: 1.33rem;
   }
@@ -190,7 +196,8 @@ h5 {
   line-height: 1.2;
 }
 /* Large */
-@media screen and (min-width: 60rem) { /* 960px */
+@media screen and (min-width: 60rem) {
+  /* 960px */
   h5 {
     font-size: 1.25rem;
   }
@@ -203,7 +210,8 @@ h6 {
   line-height: 1.2;
 }
 /* Large */
-@media screen and (min-width: 60rem) { /* 960px */
+@media screen and (min-width: 60rem) {
+  /* 960px */
   h6 {
     font-size: 1rem;
   }
diff --git a/core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css b/core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css
index c57a6677459c..ed9d202bca87 100644
--- a/core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css
+++ b/core/profiles/demo_umami/themes/umami/css/classy/components/dialog.css
@@ -13,7 +13,8 @@
   background: #fff;
 }
 
-@media all and (max-width: 48em) { /* 768px */
+@media all and (max-width: 48em) {
+  /* 768px */
   .ui-dialog {
     width: 92% !important;
   }
diff --git a/core/profiles/demo_umami/themes/umami/css/classy/components/progress.css b/core/profiles/demo_umami/themes/umami/css/classy/components/progress.css
index 1579776f5258..f8561b2eaf60 100644
--- a/core/profiles/demo_umami/themes/umami/css/classy/components/progress.css
+++ b/core/profiles/demo_umami/themes/umami/css/classy/components/progress.css
@@ -23,9 +23,7 @@
   border: 1px #07629a solid;
   border-radius: 10em;
   background: #057ec9;
-  background-image:
-    linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)),
-    linear-gradient(to right bottom, #0094f0 0%, #0094f0 25%, #007ecc 25%, #007ecc 50%, #0094f0 50%, #0094f0 75%, #0094f0 100%);
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)), linear-gradient(to right bottom, #0094f0 0%, #0094f0 25%, #007ecc 25%, #007ecc 50%, #0094f0 50%, #0094f0 75%, #0094f0 100%);
   background-size: 40px 40px;
 }
 [dir="rtl"] .progress__bar {
@@ -47,6 +45,14 @@
  * Progress bar animations.
  */
 @keyframes animate-stripes {
-  0% { background-position: 0 0, 0 0; }
-  100% { background-position: 0 0, -80px 0; }
+  0% {
+    background-position:
+      0 0,
+      0 0;
+  }
+  100% {
+    background-position:
+      0 0,
+      -80px 0;
+  }
 }
diff --git a/core/profiles/demo_umami/themes/umami/css/components/blocks/help/help.css b/core/profiles/demo_umami/themes/umami/css/components/blocks/help/help.css
index daab503b28b4..62bbd1203653 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/blocks/help/help.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/help/help.css
@@ -19,7 +19,7 @@
   background-repeat: no-repeat;
   background-position: left 4px; /* LTR */
 }
-[dir=rtl] .block-help__container {
+[dir="rtl"] .block-help__container {
   padding-right: 24px;
   padding-left: 0;
   background-position: right 4px;
diff --git a/core/profiles/demo_umami/themes/umami/css/components/blocks/quicklinks/quicklinks.css b/core/profiles/demo_umami/themes/umami/css/components/blocks/quicklinks/quicklinks.css
index ee73689f74cb..383b90a34453 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/blocks/quicklinks/quicklinks.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/quicklinks/quicklinks.css
@@ -7,21 +7,24 @@
   background-color: #fff;
 }
 
-@media screen and (min-width: 60rem) { /* 960px */
+@media screen and (min-width: 60rem) {
+  /* 960px */
   .quicklinks {
     padding: 2rem 0;
   }
 }
 
 /* Small */
-@media screen and (min-width: 30rem) { /* 480px */
+@media screen and (min-width: 30rem) {
+  /* 480px */
   .quicklinks__content {
     display: flex;
     flex-wrap: wrap;
   }
 }
 /* Large */
-@media screen and (min-width: 60rem) { /* 960px */
+@media screen and (min-width: 60rem) {
+  /* 960px */
   .quicklinks__content {
     flex-wrap: nowrap;
   }
@@ -34,7 +37,8 @@
   text-align: center;
 }
 /* Small */
-@media screen and (min-width: 30rem) { /* 480px */
+@media screen and (min-width: 30rem) {
+  /* 480px */
   .quicklinks__col {
     flex-basis: 50%;
     padding-top: 1rem;
@@ -56,13 +60,15 @@
   display: none;
 }
 /* Small */
-@media screen and (min-width: 30rem) { /* 480px */
+@media screen and (min-width: 30rem) {
+  /* 480px */
   .quicklinks__col:nth-child(3)::after {
     display: none;
   }
 }
 /* Large */
-@media screen and (min-width: 60rem) { /* 960px */
+@media screen and (min-width: 60rem) {
+  /* 960px */
   .quicklinks__col::after {
     position: absolute;
     top: 0;
diff --git a/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search-results.css b/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search-results.css
index 006b3216af1b..e80898f0acef 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search-results.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search-results.css
@@ -142,7 +142,7 @@
   background: #fff;
 }
 /* Without this rule, another RTL rule from item-list.css will break the design */
-[dir=rtl] .search-results li {
+[dir="rtl"] .search-results li {
   margin: 0 0 1rem 0;
 }
 
diff --git a/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css b/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css
index 834da8cef04d..8484effbcbc0 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css
@@ -59,7 +59,7 @@
   border-top-left-radius: 3px; /* LTR */
   border-bottom-right-radius: 3px; /* LTR */
 }
-[dir=rtl] .search-block-form .form-type-search {
+[dir="rtl"] .search-block-form .form-type-search {
   border-top-left-radius: 0;
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
@@ -86,10 +86,10 @@
 
 .search-block-form .form-search:focus {
   border: 2px solid #008068;
-  border-top-left-radius: 2px;  /* LTR */
+  border-top-left-radius: 2px; /* LTR */
   border-bottom-left-radius: 2px; /* LTR */
 }
-[dir=rtl] .search-block-form .form-search:focus {
+[dir="rtl"] .search-block-form .form-search:focus {
   border-top-left-radius: 0;
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
@@ -114,7 +114,7 @@
   border-top-right-radius: 3px; /* LTR */
   border-bottom-right-radius: 3px; /* LTR */
 }
-[dir=rtl] .search-block-form .form-actions {
+[dir="rtl"] .search-block-form .form-actions {
   border-right: none;
   border-left: 1px solid #dbdbdb;
   border-top-left-radius: 3px;
@@ -128,7 +128,9 @@
 .search-block-form .form-submit {
   margin: 0;
   padding: 0.6em 1.25em 0.4em;
-  transition: background-color 0.5s ease, border 0.5s ease;
+  transition:
+    background-color 0.5s ease,
+    border 0.5s ease;
   color: #000;
   border: 2px solid #fff;
   background-color: #fff;
@@ -140,7 +142,7 @@
     border-top-left-radius: 0; /* LTR */
     border-bottom-left-radius: 0; /* LTR */
   }
-  [dir=rtl] .search-block-form .form-submit {
+  [dir="rtl"] .search-block-form .form-submit {
     border-top-left-radius: 3px;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
diff --git a/core/profiles/demo_umami/themes/umami/css/components/fields/recipe-instruction.css b/core/profiles/demo_umami/themes/umami/css/components/fields/recipe-instruction.css
index d606aafa0f90..8b0095121a08 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/fields/recipe-instruction.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/fields/recipe-instruction.css
@@ -31,7 +31,7 @@
   list-style: none;
   counter-increment: step-counter;
 }
-[dir=rtl] .field--name-field-recipe-instruction ol > li {
+[dir="rtl"] .field--name-field-recipe-instruction ol > li {
   padding: 0 2.5em 0.6em 0;
 }
 .field--name-field-recipe-instruction ol > li::before {
@@ -42,7 +42,7 @@
   color: #cc2a00;
   font-size: 1.5rem;
 }
-[dir=rtl] .field--name-field-recipe-instruction ol > li::before {
+[dir="rtl"] .field--name-field-recipe-instruction ol > li::before {
   right: 0;
   left: auto;
 }
diff --git a/core/profiles/demo_umami/themes/umami/css/components/forms/contact.css b/core/profiles/demo_umami/themes/umami/css/components/forms/contact.css
index 443f0b466198..71f2ed52facd 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/forms/contact.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/forms/contact.css
@@ -8,13 +8,15 @@
   margin: auto auto 1rem;
 }
 
-@media screen and (min-width: 30rem) { /* 480px */
+@media screen and (min-width: 30rem) {
+  /* 480px */
   .contact-form {
     margin-bottom: 2rem;
   }
 }
 
-@media screen and (min-width: 60rem) { /* 960px */
+@media screen and (min-width: 60rem) {
+  /* 960px */
   .contact-form {
     margin-bottom: 3rem;
   }
diff --git a/core/profiles/demo_umami/themes/umami/css/components/messages/messages.css b/core/profiles/demo_umami/themes/umami/css/components/messages/messages.css
index 6c057d4fc781..c911bde630c3 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/messages/messages.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/messages/messages.css
@@ -21,7 +21,7 @@
   padding-left: 24px; /* LTR */
   background: no-repeat 0 center; /* LTR */
 }
-[dir=rtl] .messages__content {
+[dir="rtl"] .messages__content {
   padding-right: 24px;
   padding-left: 0;
   background-position: right;
diff --git a/core/profiles/demo_umami/themes/umami/css/components/navigation/breadcrumbs/breadcrumbs.css b/core/profiles/demo_umami/themes/umami/css/components/navigation/breadcrumbs/breadcrumbs.css
index 896a2978c0e1..bd71fa51172a 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/navigation/breadcrumbs/breadcrumbs.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/navigation/breadcrumbs/breadcrumbs.css
@@ -9,7 +9,8 @@
   display: inline-block;
 }
 /* Extra large + side margins */
-@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */
+@media screen and (min-width: 80rem) {
+  /* 1200px (large) + 80px (side margins) = 1280px */
   .breadcrumb {
     padding-right: 0;
     padding-left: 0;
diff --git a/core/profiles/demo_umami/themes/umami/css/components/regions/bottom/bottom.css b/core/profiles/demo_umami/themes/umami/css/components/regions/bottom/bottom.css
index 646c534d1487..0c10dce7b7b9 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/regions/bottom/bottom.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/regions/bottom/bottom.css
@@ -9,7 +9,8 @@
   background: #fff;
 }
 /* Extra large + side margins */
-@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */
+@media screen and (min-width: 80rem) {
+  /* 1200px (large) + 80px (side margins) = 1280px */
   .layout-bottom {
     padding: 2rem 0;
   }
diff --git a/core/profiles/demo_umami/themes/umami/css/components/regions/footer/footer.css b/core/profiles/demo_umami/themes/umami/css/components/regions/footer/footer.css
index 7b792b5da59d..aad91b8bbcae 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/regions/footer/footer.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/regions/footer/footer.css
@@ -19,7 +19,8 @@
   gap: 1.28rem;
 }
 /* Large */
-@media screen and (min-width: 60rem) { /* 960px */
+@media screen and (min-width: 60rem) {
+  /* 960px */
   .footer {
     text-align: left; /* LTR */
   }
@@ -33,7 +34,8 @@
   }
 }
 /* Extra large + side margins */
-@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */
+@media screen and (min-width: 80rem) {
+  /* 1200px (large) + 80px (side margins) = 1280px */
   .footer {
     padding: 2rem 0;
   }
diff --git a/core/profiles/demo_umami/themes/umami/css/components/regions/highlighted/highlighted.css b/core/profiles/demo_umami/themes/umami/css/components/regions/highlighted/highlighted.css
index 24a7b210f3ff..8ca089e3f38f 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/regions/highlighted/highlighted.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/regions/highlighted/highlighted.css
@@ -12,7 +12,8 @@
   padding: 0 4%;
 }
 /* Extra large + side margins */
-@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */
+@media screen and (min-width: 80rem) {
+  /* 1200px (large) + 80px (side margins) = 1280px */
   .region-highlighted {
     padding: 0;
   }
diff --git a/core/profiles/demo_umami/themes/umami/css/components/regions/pre-header/pre-header.css b/core/profiles/demo_umami/themes/umami/css/components/regions/pre-header/pre-header.css
index 1dbed18cc9a6..2020a0664025 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/regions/pre-header/pre-header.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/regions/pre-header/pre-header.css
@@ -15,14 +15,16 @@
   border-bottom: 1px solid #e6eee0;
 }
 /* Medium */
-@media screen and (min-width: 48rem) { /* 768px */
+@media screen and (min-width: 48rem) {
+  /* 768px */
   .region-pre-header {
     padding-top: 0;
     padding-bottom: 0;
   }
 }
 /* Extra large + side margins */
-@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */
+@media screen and (min-width: 80rem) {
+  /* 1200px (large) + 80px (side margins) = 1280px */
   .region-pre-header {
     padding: 0;
   }
diff --git a/core/profiles/demo_umami/themes/umami/css/components/regions/tabs/tabs.css b/core/profiles/demo_umami/themes/umami/css/components/regions/tabs/tabs.css
index c68fe45c1380..9bda7b650e6c 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/regions/tabs/tabs.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/regions/tabs/tabs.css
@@ -11,7 +11,8 @@
   padding: 0 4%;
 }
 /* Extra large + side margins */
-@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */
+@media screen and (min-width: 80rem) {
+  /* 1200px (large) + 80px (side margins) = 1280px */
   .region-tabs {
     padding: 0;
   }
diff --git a/core/profiles/demo_umami/themes/umami/css/components/views/frontpage.css b/core/profiles/demo_umami/themes/umami/css/components/views/frontpage.css
index 3768e9d25cae..308da728e93d 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/views/frontpage.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/views/frontpage.css
@@ -12,7 +12,8 @@
   line-height: 1.2;
 }
 /* Large */
-@media screen and (min-width: 60em) { /* 960px */
+@media screen and (min-width: 60em) {
+  /* 960px */
   .view-frontpage .view-header {
     margin-bottom: 3rem;
     padding-right: 2.37rem;
diff --git a/core/profiles/demo_umami/themes/umami/css/components/views/promoted-items.css b/core/profiles/demo_umami/themes/umami/css/components/views/promoted-items.css
index a3931be57750..45780cec054c 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/views/promoted-items.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/views/promoted-items.css
@@ -7,14 +7,16 @@
   padding: 1rem 0 2rem;
 }
 /* Small */
-@media screen and (min-width: 30rem) { /* 480px */
+@media screen and (min-width: 30rem) {
+  /* 480px */
   .view-promoted-items--single {
     padding-top: 2rem;
     padding-bottom: 3rem;
   }
 }
 /* Large */
-@media screen and (min-width: 60rem) { /* 960px */
+@media screen and (min-width: 60rem) {
+  /* 960px */
   .view-promoted-items--single {
     display: flex;
   }
@@ -28,13 +30,14 @@
 }
 
 /* Large */
-@media screen and (min-width: 60rem) { /* 960px */
+@media screen and (min-width: 60rem) {
+  /* 960px */
   .view-promoted-items--single > .view-content {
     display: flex;
     flex: 0 0 50%;
     margin-right: 14px; /* LTR */
   }
-  [dir=rtl] .view-promoted-items--single > .view-content {
+  [dir="rtl"] .view-promoted-items--single > .view-content {
     margin-right: 0;
     margin-left: 14px;
   }
@@ -44,54 +47,61 @@
   margin-bottom: 14px;
 }
 /* Small */
-@media screen and (min-width: 30rem) { /* 480px */
+@media screen and (min-width: 30rem) {
+  /* 480px */
   .view-promoted-items--single > .view-content .views-row {
     display: flex;
     margin-bottom: 28px;
   }
 }
 /* Large */
-@media screen and (min-width: 60rem) { /* 960px */
+@media screen and (min-width: 60rem) {
+  /* 960px */
   .view-promoted-items--single > .view-content .views-row {
     margin-bottom: 0;
   }
 }
 
 /* Large */
-@media screen and (min-width: 60rem) { /* 960px */
+@media screen and (min-width: 60rem) {
+  /* 960px */
   .view-promoted-items--single > .attachment-after {
     display: flex;
     margin-left: 14px; /* LTR */
   }
-  [dir=rtl] .view-promoted-items--single > .attachment-after {
+  [dir="rtl"] .view-promoted-items--single > .attachment-after {
     margin-right: 14px;
     margin-left: 0;
   }
 }
 
 /* Large */
-@media screen and (min-width: 60rem) { /* 960px */
+@media screen and (min-width: 60rem) {
+  /* 960px */
   .view-promoted-items--single .attachment-after .views-element-container {
     display: flex;
   }
 }
 
 /* Large */
-@media screen and (min-width: 60rem) { /* 960px */
+@media screen and (min-width: 60rem) {
+  /* 960px */
   .view-promoted-items--single .attachment-after .view-promoted-items--double {
     display: flex;
   }
 }
 
 /* Small */
-@media screen and (min-width: 30rem) { /* 480px */
+@media screen and (min-width: 30rem) {
+  /* 480px */
   .view-promoted-items--double {
     overflow-x: hidden;
   }
 }
 
 /* Small */
-@media screen and (min-width: 30rem) { /* 480px */
+@media screen and (min-width: 30rem) {
+  /* 480px */
   .view-promoted-items--double .view-content {
     display: flex;
     margin: 0 -14px;
@@ -99,7 +109,8 @@
 }
 
 /* Small */
-@media screen and (min-width: 30rem) { /* 480px */
+@media screen and (min-width: 30rem) {
+  /* 480px */
   .view-promoted-items--double .views-row {
     display: flex;
     width: calc(50% - 28px);
@@ -114,7 +125,8 @@
   padding: 0 4%;
 }
 /* Extra large + side margins */
-@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */
+@media screen and (min-width: 80rem) {
+  /* 1200px (large) + 80px (side margins) = 1280px */
   .path-frontpage .block-views-blockpromoted-items-block-1 {
     padding: 0;
   }
diff --git a/core/profiles/demo_umami/themes/umami/css/layout/grid-3.css b/core/profiles/demo_umami/themes/umami/css/layout/grid-3.css
index dee1559c1279..3dcd3fe04f87 100644
--- a/core/profiles/demo_umami/themes/umami/css/layout/grid-3.css
+++ b/core/profiles/demo_umami/themes/umami/css/layout/grid-3.css
@@ -7,7 +7,8 @@
   margin-bottom: 28px;
 }
 /* Small */
-@media screen and (min-width: 30em) { /* 480px */
+@media screen and (min-width: 30em) {
+  /* 480px */
   .grid--3 {
     overflow-x: hidden;
   }
@@ -26,7 +27,8 @@
   }
 }
 /* Large */
-@media screen and (min-width: 60em) { /* 960px */
+@media screen and (min-width: 60em) {
+  /* 960px */
   .grid--3 .views-row {
     flex-basis: calc(33.3% - 28px);
     flex-grow: 0;
diff --git a/core/profiles/demo_umami/themes/umami/css/layout/grid-4.css b/core/profiles/demo_umami/themes/umami/css/layout/grid-4.css
index 3dd277f62dda..408ef2163e94 100644
--- a/core/profiles/demo_umami/themes/umami/css/layout/grid-4.css
+++ b/core/profiles/demo_umami/themes/umami/css/layout/grid-4.css
@@ -7,7 +7,8 @@
   margin-bottom: 28px;
 }
 /* Small */
-@media screen and (min-width: 30em) { /* 480px */
+@media screen and (min-width: 30em) {
+  /* 480px */
   .grid--4 {
     overflow-x: hidden;
   }
@@ -26,7 +27,8 @@
   }
 }
 /* Large */
-@media screen and (min-width: 60em) { /* 960px */
+@media screen and (min-width: 60em) {
+  /* 960px */
   .grid--4 .views-row {
     flex-basis: calc(25% - 28px);
     flex-grow: 0;
diff --git a/core/profiles/demo_umami/themes/umami/css/layout/layout-2-col.css b/core/profiles/demo_umami/themes/umami/css/layout/layout-2-col.css
index 3ba52f7599ec..c78ddb28ce3e 100644
--- a/core/profiles/demo_umami/themes/umami/css/layout/layout-2-col.css
+++ b/core/profiles/demo_umami/themes/umami/css/layout/layout-2-col.css
@@ -3,7 +3,8 @@
  * This file is used to create the layout when the theme has 2 columns.
  */
 /* Large */
-@media screen and (min-width: 60rem) { /* 960px */
+@media screen and (min-width: 60rem) {
+  /* 960px */
   .two-columns .main {
     display: flex;
     flex-wrap: wrap;
diff --git a/core/profiles/demo_umami/themes/umami/css/layout/layout.css b/core/profiles/demo_umami/themes/umami/css/layout/layout.css
index 992803fc039f..eb95145f335f 100644
--- a/core/profiles/demo_umami/themes/umami/css/layout/layout.css
+++ b/core/profiles/demo_umami/themes/umami/css/layout/layout.css
@@ -16,7 +16,8 @@
   padding: 0 4%;
 }
 /* Extra large + side margins */
-@media screen and (min-width: 80rem) { /* 1200px (large) + 80px (side margins) = 1280px */
+@media screen and (min-width: 80rem) {
+  /* 1200px (large) + 80px (side margins) = 1280px */
   .main {
     padding: 0;
   }
diff --git a/core/profiles/demo_umami/themes/umami/layouts/fourcol_section/fourcol_section.css b/core/profiles/demo_umami/themes/umami/layouts/fourcol_section/fourcol_section.css
index 8112681a05af..eb22ed840012 100644
--- a/core/profiles/demo_umami/themes/umami/layouts/fourcol_section/fourcol_section.css
+++ b/core/profiles/demo_umami/themes/umami/layouts/fourcol_section/fourcol_section.css
@@ -12,7 +12,8 @@
   flex: 0 1 100%;
 }
 /* Medium */
-@media screen and (min-width: 48em) { /* 768px */
+@media screen and (min-width: 48em) {
+  /* 768px */
   .layout--fourcol-section {
     margin-right: -1.5%;
     margin-left: -1.5%;
@@ -24,7 +25,8 @@
   }
 }
 /* Large */
-@media screen and (min-width: 60em) { /* 768px */
+@media screen and (min-width: 60em) {
+  /* 768px */
   .layout--fourcol-section > .layout__region {
     flex: 0 1 22%;
   }
diff --git a/core/profiles/demo_umami/themes/umami/layouts/oneplusfourgrid_section/oneplusfourgrid_section.css b/core/profiles/demo_umami/themes/umami/layouts/oneplusfourgrid_section/oneplusfourgrid_section.css
index baaaf21bcf64..95cfed37cad3 100644
--- a/core/profiles/demo_umami/themes/umami/layouts/oneplusfourgrid_section/oneplusfourgrid_section.css
+++ b/core/profiles/demo_umami/themes/umami/layouts/oneplusfourgrid_section/oneplusfourgrid_section.css
@@ -19,7 +19,8 @@
 }
 
 /* Large */
-@media screen and (min-width: 60rem) { /* 960px */
+@media screen and (min-width: 60rem) {
+  /* 960px */
   .layout--oneplusfourgrid-section {
     margin-right: -1.5%;
     margin-left: -1.5%;
diff --git a/core/profiles/demo_umami/themes/umami/layouts/threecol_section/threecol_section.css b/core/profiles/demo_umami/themes/umami/layouts/threecol_section/threecol_section.css
index fca47fec7c57..c47bbbee5a28 100644
--- a/core/profiles/demo_umami/themes/umami/layouts/threecol_section/threecol_section.css
+++ b/core/profiles/demo_umami/themes/umami/layouts/threecol_section/threecol_section.css
@@ -12,7 +12,8 @@
   flex: 0 1 100%;
 }
 /* Medium */
-@media screen and (min-width: 48em) { /* 768px */
+@media screen and (min-width: 48em) {
+  /* 768px */
   .layout--threecol-section {
     margin-right: -1.5%;
     margin-left: -1.5%;
diff --git a/core/profiles/demo_umami/themes/umami/layouts/twocol_section/twocol_section.css b/core/profiles/demo_umami/themes/umami/layouts/twocol_section/twocol_section.css
index 74a7c99dfd82..79d6ad06c374 100644
--- a/core/profiles/demo_umami/themes/umami/layouts/twocol_section/twocol_section.css
+++ b/core/profiles/demo_umami/themes/umami/layouts/twocol_section/twocol_section.css
@@ -12,7 +12,8 @@
   flex: 0 1 100%;
 }
 /* Medium */
-@media screen and (min-width: 48em) { /* 768px */
+@media screen and (min-width: 48em) {
+  /* 768px */
   .layout--twocol-section {
     margin-right: -1.5%;
     margin-left: -1.5%;
diff --git a/core/scripts/css/compile.js b/core/scripts/css/compile.js
index 1711e046210a..e3a03396a128 100644
--- a/core/scripts/css/compile.js
+++ b/core/scripts/css/compile.js
@@ -68,10 +68,10 @@ module.exports = (filePath, callback) => {
       })
     ])
     .process(css, { from: filePath })
-    .then(result => prettier.format(result.css, {
-      parser: 'css',
-      printWidth: 10000,
-    }))
+    .then(async result => {
+      const config = await prettier.resolveConfig(filePath);
+      return await prettier.format(result.css, config);
+    })
     .then(callback)
     .catch(error => {
       log(error);
diff --git a/core/themes/claro/css/components/action-link.pcss.css b/core/themes/claro/css/components/action-link.pcss.css
index 51a0c9ed0109..4a9595987133 100644
--- a/core/themes/claro/css/components/action-link.pcss.css
+++ b/core/themes/claro/css/components/action-link.pcss.css
@@ -98,7 +98,6 @@
 }
 
 .no-touchevents {
-
   /* Small variant. */
   & .action-link--small {
     padding: calc(var(--space-s) - ((var(--space-l) - var(--space-s)) / 2)) var(--space-s);
@@ -145,7 +144,6 @@
 }
 
 .action-link--icon-plus {
-
   /* Plus */
   &::before {
     content: "";
@@ -167,7 +165,6 @@
   }
 
   &.action-link--danger {
-
     /* Plus — danger */
     &::before {
       background-image: url(../../images/icons/d72222/plus.svg);
@@ -184,7 +181,6 @@
 }
 
 .action-link--icon-trash {
-
   /* Trash */
   &::before {
     content: "";
@@ -206,7 +202,6 @@
   }
 
   &.action-link--danger {
-
     /* Trash — danger */
     &::before {
       background-image: url(../../images/icons/d72222/trash.svg);
@@ -223,7 +218,6 @@
 }
 
 .action-link--icon-ex {
-
   /* Ex */
   &::before {
     content: "";
@@ -245,7 +239,6 @@
   }
 
   &.action-link--danger {
-
     /* Ex — danger */
     &::before {
       background-image: url(../../images/icons/d72222/ex.svg);
@@ -262,7 +255,6 @@
 }
 
 .action-link--icon-checkmark {
-
   /* Checkmark */
   &::before {
     content: "";
@@ -284,7 +276,6 @@
   }
 
   &.action-link--danger {
-
     /* Checkmark — danger */
     &::before {
       background-image: url(../../images/icons/d72222/checkmark.svg);
@@ -301,7 +292,6 @@
 }
 
 .action-link--icon-cog {
-
   /* Cog */
   &::before {
     content: "";
@@ -323,7 +313,6 @@
   }
 
   &.action-link--danger {
-
     /* Cog — danger */
     &::before {
       background-image: url(../../images/icons/d72222/cog.svg);
@@ -340,7 +329,6 @@
 }
 
 .action-link--icon-show {
-
   /* Show */
   &::before {
     content: "";
@@ -362,7 +350,6 @@
   }
 
   &.action-link--danger {
-
     /* Show - danger */
     &::before {
       background-image: url(../../images/icons/d72222/show.svg);
@@ -379,7 +366,6 @@
 }
 
 .action-link--icon-hide {
-
   /* Hide */
   &::before {
     content: "";
@@ -401,7 +387,6 @@
   }
 
   &.action-link--danger {
-
     /* Hide - danger */
     &::before {
       background-image: url(../../images/icons/d72222/hide.svg);
@@ -418,7 +403,6 @@
 }
 
 .action-link--icon-key {
-
   /* Key */
   &::before {
     content: "";
@@ -440,7 +424,6 @@
   }
 
   &.action-link--danger {
-
     /* Key — danger */
     &::before {
       background-image: url("../../images/icons/d72222/key.svg");
@@ -457,7 +440,6 @@
 }
 
 .action-link--icon-questionmark {
-
   /* Question Mark */
   &::before {
     content: "";
@@ -479,7 +461,6 @@
   }
 
   &.action-link--danger {
-
     /* Question Mark - danger */
     &::before {
       background-image: url("../../images/icons/d72222/questionmark.svg");
diff --git a/core/themes/claro/css/components/details.pcss.css b/core/themes/claro/css/components/details.pcss.css
index 9a9703eb51b6..a83aa729425c 100644
--- a/core/themes/claro/css/components/details.pcss.css
+++ b/core/themes/claro/css/components/details.pcss.css
@@ -157,7 +157,9 @@
   .claro-details__summary::before {
     width: 0.5625rem;
     height: 0.5625rem;
-    transition: transform var(--details-transform-transition-duration) ease-in 0s, margin var(--details-transform-transition-duration) ease-in 0s;
+    transition:
+      transform var(--details-transform-transition-duration) ease-in 0s,
+      margin var(--details-transform-transition-duration) ease-in 0s;
     transform: rotate(135deg); /* LTR */
     border-block-start: 0.125rem solid;
     border-inline-end: 0.125rem solid;
diff --git a/core/themes/claro/css/components/dialog.pcss.css b/core/themes/claro/css/components/dialog.pcss.css
index 30673d76b8f4..45cfb35a5be6 100644
--- a/core/themes/claro/css/components/dialog.pcss.css
+++ b/core/themes/claro/css/components/dialog.pcss.css
@@ -23,7 +23,8 @@
   box-shadow: var(--jui-dialog--focus-box-shadow);
 }
 
-@media all and (max-width: 48em) { /* 768px */
+@media all and (max-width: 48em) {
+  /* 768px */
   .ui-dialog:not(.ui-dialog-off-canvas) {
     min-width: 92%;
     max-width: 92%;
@@ -111,7 +112,7 @@
 
 .ui-dialog-buttonpane .ui-dialog-buttonset {
   display: flex;
-  gap:  var(--space-s);
+  gap: var(--space-s);
   justify-content: flex-end;
   margin-block: var(--space-m);
   margin-inline-end: var(--space-l);
diff --git a/core/themes/claro/css/components/dropbutton-noscript.pcss.css b/core/themes/claro/css/components/dropbutton-noscript.pcss.css
index 862635f63c17..9c68d1337589 100644
--- a/core/themes/claro/css/components/dropbutton-noscript.pcss.css
+++ b/core/themes/claro/css/components/dropbutton-noscript.pcss.css
@@ -9,7 +9,7 @@ html {
     height: auto;
   }
 
-  .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type~.dropbutton__item {
+  .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
     visibility: visible;
   }
 }
diff --git a/core/themes/claro/css/components/dropbutton.pcss.css b/core/themes/claro/css/components/dropbutton.pcss.css
index e5258d2c4cb7..746d79c83ccb 100644
--- a/core/themes/claro/css/components/dropbutton.pcss.css
+++ b/core/themes/claro/css/components/dropbutton.pcss.css
@@ -157,7 +157,6 @@
   }
 }
 
-
 .dropbutton-wrapper.open .dropbutton__toggle::before {
   transform: translate(50%, -50%) rotate(180deg);
   [dir="rtl"] & {
@@ -267,7 +266,9 @@
 
   & > *:focus:hover,
   & > .button:focus:hover {
-    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);
+    box-shadow:
+      0 0 0 2px var(--color-white),
+      0 0 0 5px var(--color-focus);
   }
 
   & > *:focus {
@@ -377,7 +378,7 @@
 }
 
 /* States. */
-.dropbutton__item{
+.dropbutton__item {
   & > *:focus {
     position: relative;
     z-index: 3;
@@ -394,6 +395,8 @@
 
   &:first-of-type ~ & > *:focus {
     border-color: var(--color-focus) !important; /* 1 */
-    box-shadow: inset 0 0 0 1px var(--color-focus), 0 0 0 1px var(--color-focus);
+    box-shadow:
+      inset 0 0 0 1px var(--color-focus),
+      0 0 0 1px var(--color-focus);
   }
 }
diff --git a/core/themes/claro/css/components/fieldset.pcss.css b/core/themes/claro/css/components/fieldset.pcss.css
index 19beacd9d22f..4e4d17d4a5d1 100644
--- a/core/themes/claro/css/components/fieldset.pcss.css
+++ b/core/themes/claro/css/components/fieldset.pcss.css
@@ -111,9 +111,9 @@
   /**
    * Remove the extra padding of container-inline wrapper if it's used inside a fieldset
    */
-   & > .container-inline{
+  & > .container-inline {
     padding: 0;
-   }
+  }
 }
 
 @media screen and (min-width: 48em) {
diff --git a/core/themes/claro/css/components/form--checkbox-radio.pcss.css b/core/themes/claro/css/components/form--checkbox-radio.pcss.css
index fa634b38eb24..94bcd446294b 100644
--- a/core/themes/claro/css/components/form--checkbox-radio.pcss.css
+++ b/core/themes/claro/css/components/form--checkbox-radio.pcss.css
@@ -69,7 +69,10 @@
 
   &:focus:active,
   &:focus:hover {
-    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input-fg-color);
+    box-shadow:
+      0 0 0 2px var(--color-white),
+      0 0 0 5px var(--color-focus),
+      inset 0 0 0 1px var(--input-fg-color);
   }
 }
 
@@ -90,11 +93,17 @@
     box-shadow: inset 0 0 0 1px var(--input--focus-border-color);
 
     &:focus {
-      box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--focus-border-color);
+      box-shadow:
+        0 0 0 2px var(--color-white),
+        0 0 0 5px var(--color-focus),
+        inset 0 0 0 1px var(--input--focus-border-color);
 
       &:active,
       &:hover {
-        box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input-fg-color);
+        box-shadow:
+          0 0 0 2px var(--color-white),
+          0 0 0 5px var(--color-focus),
+          inset 0 0 0 1px var(--input-fg-color);
       }
     }
     &:active,
@@ -131,7 +140,10 @@
   &:focus,
   &:focus:active,
   &:focus:hover {
-    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--error-border-color);
+    box-shadow:
+      0 0 0 2px var(--color-white),
+      0 0 0 5px var(--color-focus),
+      inset 0 0 0 1px var(--input--error-border-color);
   }
   &:checked:active,
   &:checked:hover {
@@ -150,7 +162,10 @@
   background-image: url(../../images/icons/d72222/circle.svg);
 }
 .form-boolean--type-radio.error:checked:focus {
-  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--error-border-color);
+  box-shadow:
+    0 0 0 2px var(--color-white),
+    0 0 0 5px var(--color-focus),
+    inset 0 0 0 1px var(--input--error-border-color);
 }
 
 /**
diff --git a/core/themes/claro/css/components/form--password-confirm.pcss.css b/core/themes/claro/css/components/form--password-confirm.pcss.css
index b66c138bcc37..a013469cbc75 100644
--- a/core/themes/claro/css/components/form--password-confirm.pcss.css
+++ b/core/themes/claro/css/components/form--password-confirm.pcss.css
@@ -23,7 +23,9 @@
 
   @nest .js & {
     max-height: 10rem;
-    transition: max-height var(--speed-transition) ease-in-out, margin var(--speed-transition) ease-in-out;
+    transition:
+      max-height var(--speed-transition) ease-in-out,
+      margin var(--speed-transition) ease-in-out;
   }
 }
 
diff --git a/core/themes/claro/css/components/form--select.pcss.css b/core/themes/claro/css/components/form--select.pcss.css
index 96922b71fbec..6b4c992955cd 100644
--- a/core/themes/claro/css/components/form--select.pcss.css
+++ b/core/themes/claro/css/components/form--select.pcss.css
@@ -25,8 +25,7 @@
   }
 
   @nest .no-touchevents & {
-    &.form-element--extrasmall,
-    &[name$="][_weight]"] {
+    &.form-element--extrasmall, &[name$="][_weight]"] {
       padding-inline-end: calc(1.5rem - var(--input-border-size));
       background-size: 1.75rem 0.4375rem; /* w: 14px + (2 * 7px), h: 7px */
     }
diff --git a/core/themes/claro/css/components/form--text.pcss.css b/core/themes/claro/css/components/form--text.pcss.css
index 1576960e2065..bbea06397a0d 100644
--- a/core/themes/claro/css/components/form--text.pcss.css
+++ b/core/themes/claro/css/components/form--text.pcss.css
@@ -71,10 +71,15 @@
   box-shadow: inset 0 0 0 var(--input-border-size) var(--input--hover-border-color);
 }
 .form-element:focus {
-  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);
+  box-shadow:
+    0 0 0 2px var(--color-white),
+    0 0 0 5px var(--color-focus);
 }
 .form-element:hover:focus {
-  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 var(--input-border-size) var(--input--hover-border-color);
+  box-shadow:
+    0 0 0 2px var(--color-white),
+    0 0 0 5px var(--color-focus),
+    inset 0 0 0 var(--input-border-size) var(--input--hover-border-color);
 }
 
 .form-element.error {
@@ -85,7 +90,9 @@
   box-shadow: none;
 }
 .form-element.error:hover:focus {
-  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);
+  box-shadow:
+    0 0 0 2px var(--color-white),
+    0 0 0 5px var(--color-focus);
 }
 .form-element--type-textarea.error + .cke {
   border-color: var(--input--error-border-color);
diff --git a/core/themes/claro/css/components/icon-link.pcss.css b/core/themes/claro/css/components/icon-link.pcss.css
index 411adb6313cb..0e8c7165152f 100644
--- a/core/themes/claro/css/components/icon-link.pcss.css
+++ b/core/themes/claro/css/components/icon-link.pcss.css
@@ -28,7 +28,9 @@
   }
 
   &:focus {
-    box-shadow: 0 0 0 1.5px var(--color-white), 0 0 0 3.5px var(--color-focus);
+    box-shadow:
+      0 0 0 1.5px var(--color-white),
+      0 0 0 3.5px var(--color-focus);
   }
 
   &:active,
@@ -40,6 +42,8 @@
 
 .icon-link--small {
   &:focus {
-    box-shadow: 0 0 0 1px var(--color-white), 0 0 0 3px var(--color-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.pcss.css b/core/themes/claro/css/components/image-preview.pcss.css
index 14a45f2f7d80..0bc34ea4e519 100644
--- a/core/themes/claro/css/components/image-preview.pcss.css
+++ b/core/themes/claro/css/components/image-preview.pcss.css
@@ -16,7 +16,11 @@
 
   & img {
     background-image: linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(-45deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%), linear-gradient(135deg, var(--color-pattern) 25%, transparent 26%);
-    background-position: 0 0, var(--size-pattern-square) var(--size-pattern-square), var(--size-pattern-square) var(--size-pattern-square), 0 0;
+    background-position:
+      0 0,
+      var(--size-pattern-square) var(--size-pattern-square),
+      var(--size-pattern-square) var(--size-pattern-square),
+      0 0;
     background-size: calc(var(--size-pattern-square) * 2) calc(var(--size-pattern-square) * 2);
   }
 }
diff --git a/core/themes/claro/css/components/jquery.ui/theme.pcss.css b/core/themes/claro/css/components/jquery.ui/theme.pcss.css
index 5f4199a3d71e..02550a471f91 100644
--- a/core/themes/claro/css/components/jquery.ui/theme.pcss.css
+++ b/core/themes/claro/css/components/jquery.ui/theme.pcss.css
@@ -93,179 +93,525 @@
   margin: 2px 0 0 3px;
 }
 /* positioning */
-.ui-icon-carat-1-ne { background-position: -16px 0; }
-.ui-icon-carat-1-e { background-position: -32px 0; }
-.ui-icon-carat-1-se { background-position: -48px 0; }
-.ui-icon-carat-1-s { background-position: -64px 0; }
-.ui-icon-carat-1-sw { background-position: -80px 0; }
-.ui-icon-carat-1-w { background-position: -96px 0; }
-.ui-icon-carat-1-nw { background-position: -112px 0; }
-.ui-icon-carat-2-n-s { background-position: -128px 0; }
-.ui-icon-carat-2-e-w { background-position: -144px 0; }
-.ui-icon-triangle-1-n { background-position: 0 -16px; }
-.ui-icon-triangle-1-ne { background-position: -16px -16px; }
-.ui-icon-triangle-1-e { background-position: -32px -16px; }
-.ui-icon-triangle-1-se { background-position: -48px -16px; }
-.ui-icon-triangle-1-s { background-position: -64px -16px; }
-.ui-icon-triangle-1-sw { background-position: -80px -16px; }
-.ui-icon-triangle-1-w { background-position: -96px -16px; }
-.ui-icon-triangle-1-nw { background-position: -112px -16px; }
-.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
-.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
-.ui-icon-arrow-1-n { background-position: 0 -32px; }
-.ui-icon-arrow-1-ne { background-position: -16px -32px; }
-.ui-icon-arrow-1-e { background-position: -32px -32px; }
-.ui-icon-arrow-1-se { background-position: -48px -32px; }
-.ui-icon-arrow-1-s { background-position: -64px -32px; }
-.ui-icon-arrow-1-sw { background-position: -80px -32px; }
-.ui-icon-arrow-1-w { background-position: -96px -32px; }
-.ui-icon-arrow-1-nw { background-position: -112px -32px; }
-.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
-.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
-.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
-.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
-.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
-.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
-.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
-.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
-.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
-.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
-.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
-.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
-.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
-.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
-.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
-.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
-.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
-.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
-.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
-.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
-.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
-.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
-.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
-.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
-.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
-.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
-.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
-.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
-.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
-.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
-.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
-.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
-.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
-.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
-.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
-.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
-.ui-icon-arrow-4 { background-position: 0 -80px; }
-.ui-icon-arrow-4-diag { background-position: -16px -80px; }
-.ui-icon-extlink { background-position: -32px -80px; }
-.ui-icon-newwin { background-position: -48px -80px; }
-.ui-icon-refresh { background-position: -64px -80px; }
-.ui-icon-shuffle { background-position: -80px -80px; }
-.ui-icon-transfer-e-w { background-position: -96px -80px; }
-.ui-icon-transferthick-e-w { background-position: -112px -80px; }
-.ui-icon-folder-collapsed { background-position: 0 -96px; }
-.ui-icon-folder-open { background-position: -16px -96px; }
-.ui-icon-document { background-position: -32px -96px; }
-.ui-icon-document-b { background-position: -48px -96px; }
-.ui-icon-note { background-position: -64px -96px; }
-.ui-icon-mail-closed { background-position: -80px -96px; }
-.ui-icon-mail-open { background-position: -96px -96px; }
-.ui-icon-suitcase { background-position: -112px -96px; }
-.ui-icon-comment { background-position: -128px -96px; }
-.ui-icon-person { background-position: -144px -96px; }
-.ui-icon-print { background-position: -160px -96px; }
-.ui-icon-trash { background-position: -176px -96px; }
-.ui-icon-locked { background-position: -192px -96px; }
-.ui-icon-unlocked { background-position: -208px -96px; }
-.ui-icon-bookmark { background-position: -224px -96px; }
-.ui-icon-tag { background-position: -240px -96px; }
-.ui-icon-home { background-position: 0 -112px; }
-.ui-icon-flag { background-position: -16px -112px; }
-.ui-icon-calendar { background-position: -32px -112px; }
-.ui-icon-cart { background-position: -48px -112px; }
-.ui-icon-pencil { background-position: -64px -112px; }
-.ui-icon-clock { background-position: -80px -112px; }
-.ui-icon-disk { background-position: -96px -112px; }
-.ui-icon-calculator { background-position: -112px -112px; }
-.ui-icon-zoomin { background-position: -128px -112px; }
-.ui-icon-zoomout { background-position: -144px -112px; }
-.ui-icon-search { background-position: -160px -112px; }
-.ui-icon-wrench { background-position: -176px -112px; }
-.ui-icon-gear { background-position: -192px -112px; }
-.ui-icon-heart { background-position: -208px -112px; }
-.ui-icon-star { background-position: -224px -112px; }
-.ui-icon-link { background-position: -240px -112px; }
-.ui-icon-cancel { background-position: 0 -128px; }
-.ui-icon-plus { background-position: -16px -128px; }
-.ui-icon-plusthick { background-position: -32px -128px; }
-.ui-icon-minus { background-position: -48px -128px; }
-.ui-icon-minusthick { background-position: -64px -128px; }
-.ui-icon-close { background-position: -80px -128px; }
-.ui-icon-closethick { background-position: -96px -128px; }
-.ui-icon-key { background-position: -112px -128px; }
-.ui-icon-lightbulb { background-position: -128px -128px; }
-.ui-icon-scissors { background-position: -144px -128px; }
-.ui-icon-clipboard { background-position: -160px -128px; }
-.ui-icon-copy { background-position: -176px -128px; }
-.ui-icon-contact { background-position: -192px -128px; }
-.ui-icon-image { background-position: -208px -128px; }
-.ui-icon-video { background-position: -224px -128px; }
-.ui-icon-script { background-position: -240px -128px; }
-.ui-icon-alert { background-position: 0 -144px; }
-.ui-icon-info { background-position: -16px -144px; }
-.ui-icon-notice { background-position: -32px -144px; }
-.ui-icon-help { background-position: -48px -144px; }
-.ui-icon-check { background-position: -64px -144px; }
-.ui-icon-bullet { background-position: -80px -144px; }
-.ui-icon-radio-off { background-position: -96px -144px; }
-.ui-icon-radio-on { background-position: -112px -144px; }
-.ui-icon-pin-w { background-position: -128px -144px; }
-.ui-icon-pin-s { background-position: -144px -144px; }
-.ui-icon-play { background-position: 0 -160px; }
-.ui-icon-pause { background-position: -16px -160px; }
-.ui-icon-seek-next { background-position: -32px -160px; }
-.ui-icon-seek-prev { background-position: -48px -160px; }
-.ui-icon-seek-end { background-position: -64px -160px; }
-.ui-icon-seek-first { background-position: -80px -160px; }
-.ui-icon-stop { background-position: -96px -160px; }
-.ui-icon-eject { background-position: -112px -160px; }
-.ui-icon-volume-off { background-position: -128px -160px; }
-.ui-icon-volume-on { background-position: -144px -160px; }
-.ui-icon-power { background-position: 0 -176px; }
-.ui-icon-signal-diag { background-position: -16px -176px; }
-.ui-icon-signal { background-position: -32px -176px; }
-.ui-icon-battery-0 { background-position: -48px -176px; }
-.ui-icon-battery-1 { background-position: -64px -176px; }
-.ui-icon-battery-2 { background-position: -80px -176px; }
-.ui-icon-battery-3 { background-position: -96px -176px; }
-.ui-icon-circle-plus { background-position: 0 -192px; }
-.ui-icon-circle-minus { background-position: -16px -192px; }
-.ui-icon-circle-close { background-position: -32px -192px; }
-.ui-icon-circle-triangle-e { background-position: -48px -192px; }
-.ui-icon-circle-triangle-s { background-position: -64px -192px; }
-.ui-icon-circle-triangle-w { background-position: -80px -192px; }
-.ui-icon-circle-triangle-n { background-position: -96px -192px; }
-.ui-icon-circle-arrow-e { background-position: -112px -192px; }
-.ui-icon-circle-arrow-s { background-position: -128px -192px; }
-.ui-icon-circle-arrow-w { background-position: -144px -192px; }
-.ui-icon-circle-arrow-n { background-position: -160px -192px; }
-.ui-icon-circle-zoomin { background-position: -176px -192px; }
-.ui-icon-circle-zoomout { background-position: -192px -192px; }
-.ui-icon-circle-check { background-position: -208px -192px; }
-.ui-icon-circlesmall-plus { background-position: 0 -208px; }
-.ui-icon-circlesmall-minus { background-position: -16px -208px; }
-.ui-icon-circlesmall-close { background-position: -32px -208px; }
-.ui-icon-squaresmall-plus { background-position: -48px -208px; }
-.ui-icon-squaresmall-minus { background-position: -64px -208px; }
-.ui-icon-squaresmall-close { background-position: -80px -208px; }
-.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
-.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
-.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
-.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
-.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
-.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
-.ui-icon-carat-1-n { background-position: 0 0; }
+.ui-icon-carat-1-ne {
+  background-position: -16px 0;
+}
+.ui-icon-carat-1-e {
+  background-position: -32px 0;
+}
+.ui-icon-carat-1-se {
+  background-position: -48px 0;
+}
+.ui-icon-carat-1-s {
+  background-position: -64px 0;
+}
+.ui-icon-carat-1-sw {
+  background-position: -80px 0;
+}
+.ui-icon-carat-1-w {
+  background-position: -96px 0;
+}
+.ui-icon-carat-1-nw {
+  background-position: -112px 0;
+}
+.ui-icon-carat-2-n-s {
+  background-position: -128px 0;
+}
+.ui-icon-carat-2-e-w {
+  background-position: -144px 0;
+}
+.ui-icon-triangle-1-n {
+  background-position: 0 -16px;
+}
+.ui-icon-triangle-1-ne {
+  background-position: -16px -16px;
+}
+.ui-icon-triangle-1-e {
+  background-position: -32px -16px;
+}
+.ui-icon-triangle-1-se {
+  background-position: -48px -16px;
+}
+.ui-icon-triangle-1-s {
+  background-position: -64px -16px;
+}
+.ui-icon-triangle-1-sw {
+  background-position: -80px -16px;
+}
+.ui-icon-triangle-1-w {
+  background-position: -96px -16px;
+}
+.ui-icon-triangle-1-nw {
+  background-position: -112px -16px;
+}
+.ui-icon-triangle-2-n-s {
+  background-position: -128px -16px;
+}
+.ui-icon-triangle-2-e-w {
+  background-position: -144px -16px;
+}
+.ui-icon-arrow-1-n {
+  background-position: 0 -32px;
+}
+.ui-icon-arrow-1-ne {
+  background-position: -16px -32px;
+}
+.ui-icon-arrow-1-e {
+  background-position: -32px -32px;
+}
+.ui-icon-arrow-1-se {
+  background-position: -48px -32px;
+}
+.ui-icon-arrow-1-s {
+  background-position: -64px -32px;
+}
+.ui-icon-arrow-1-sw {
+  background-position: -80px -32px;
+}
+.ui-icon-arrow-1-w {
+  background-position: -96px -32px;
+}
+.ui-icon-arrow-1-nw {
+  background-position: -112px -32px;
+}
+.ui-icon-arrow-2-n-s {
+  background-position: -128px -32px;
+}
+.ui-icon-arrow-2-ne-sw {
+  background-position: -144px -32px;
+}
+.ui-icon-arrow-2-e-w {
+  background-position: -160px -32px;
+}
+.ui-icon-arrow-2-se-nw {
+  background-position: -176px -32px;
+}
+.ui-icon-arrowstop-1-n {
+  background-position: -192px -32px;
+}
+.ui-icon-arrowstop-1-e {
+  background-position: -208px -32px;
+}
+.ui-icon-arrowstop-1-s {
+  background-position: -224px -32px;
+}
+.ui-icon-arrowstop-1-w {
+  background-position: -240px -32px;
+}
+.ui-icon-arrowthick-1-n {
+  background-position: 0 -48px;
+}
+.ui-icon-arrowthick-1-ne {
+  background-position: -16px -48px;
+}
+.ui-icon-arrowthick-1-e {
+  background-position: -32px -48px;
+}
+.ui-icon-arrowthick-1-se {
+  background-position: -48px -48px;
+}
+.ui-icon-arrowthick-1-s {
+  background-position: -64px -48px;
+}
+.ui-icon-arrowthick-1-sw {
+  background-position: -80px -48px;
+}
+.ui-icon-arrowthick-1-w {
+  background-position: -96px -48px;
+}
+.ui-icon-arrowthick-1-nw {
+  background-position: -112px -48px;
+}
+.ui-icon-arrowthick-2-n-s {
+  background-position: -128px -48px;
+}
+.ui-icon-arrowthick-2-ne-sw {
+  background-position: -144px -48px;
+}
+.ui-icon-arrowthick-2-e-w {
+  background-position: -160px -48px;
+}
+.ui-icon-arrowthick-2-se-nw {
+  background-position: -176px -48px;
+}
+.ui-icon-arrowthickstop-1-n {
+  background-position: -192px -48px;
+}
+.ui-icon-arrowthickstop-1-e {
+  background-position: -208px -48px;
+}
+.ui-icon-arrowthickstop-1-s {
+  background-position: -224px -48px;
+}
+.ui-icon-arrowthickstop-1-w {
+  background-position: -240px -48px;
+}
+.ui-icon-arrowreturnthick-1-w {
+  background-position: 0 -64px;
+}
+.ui-icon-arrowreturnthick-1-n {
+  background-position: -16px -64px;
+}
+.ui-icon-arrowreturnthick-1-e {
+  background-position: -32px -64px;
+}
+.ui-icon-arrowreturnthick-1-s {
+  background-position: -48px -64px;
+}
+.ui-icon-arrowreturn-1-w {
+  background-position: -64px -64px;
+}
+.ui-icon-arrowreturn-1-n {
+  background-position: -80px -64px;
+}
+.ui-icon-arrowreturn-1-e {
+  background-position: -96px -64px;
+}
+.ui-icon-arrowreturn-1-s {
+  background-position: -112px -64px;
+}
+.ui-icon-arrowrefresh-1-w {
+  background-position: -128px -64px;
+}
+.ui-icon-arrowrefresh-1-n {
+  background-position: -144px -64px;
+}
+.ui-icon-arrowrefresh-1-e {
+  background-position: -160px -64px;
+}
+.ui-icon-arrowrefresh-1-s {
+  background-position: -176px -64px;
+}
+.ui-icon-arrow-4 {
+  background-position: 0 -80px;
+}
+.ui-icon-arrow-4-diag {
+  background-position: -16px -80px;
+}
+.ui-icon-extlink {
+  background-position: -32px -80px;
+}
+.ui-icon-newwin {
+  background-position: -48px -80px;
+}
+.ui-icon-refresh {
+  background-position: -64px -80px;
+}
+.ui-icon-shuffle {
+  background-position: -80px -80px;
+}
+.ui-icon-transfer-e-w {
+  background-position: -96px -80px;
+}
+.ui-icon-transferthick-e-w {
+  background-position: -112px -80px;
+}
+.ui-icon-folder-collapsed {
+  background-position: 0 -96px;
+}
+.ui-icon-folder-open {
+  background-position: -16px -96px;
+}
+.ui-icon-document {
+  background-position: -32px -96px;
+}
+.ui-icon-document-b {
+  background-position: -48px -96px;
+}
+.ui-icon-note {
+  background-position: -64px -96px;
+}
+.ui-icon-mail-closed {
+  background-position: -80px -96px;
+}
+.ui-icon-mail-open {
+  background-position: -96px -96px;
+}
+.ui-icon-suitcase {
+  background-position: -112px -96px;
+}
+.ui-icon-comment {
+  background-position: -128px -96px;
+}
+.ui-icon-person {
+  background-position: -144px -96px;
+}
+.ui-icon-print {
+  background-position: -160px -96px;
+}
+.ui-icon-trash {
+  background-position: -176px -96px;
+}
+.ui-icon-locked {
+  background-position: -192px -96px;
+}
+.ui-icon-unlocked {
+  background-position: -208px -96px;
+}
+.ui-icon-bookmark {
+  background-position: -224px -96px;
+}
+.ui-icon-tag {
+  background-position: -240px -96px;
+}
+.ui-icon-home {
+  background-position: 0 -112px;
+}
+.ui-icon-flag {
+  background-position: -16px -112px;
+}
+.ui-icon-calendar {
+  background-position: -32px -112px;
+}
+.ui-icon-cart {
+  background-position: -48px -112px;
+}
+.ui-icon-pencil {
+  background-position: -64px -112px;
+}
+.ui-icon-clock {
+  background-position: -80px -112px;
+}
+.ui-icon-disk {
+  background-position: -96px -112px;
+}
+.ui-icon-calculator {
+  background-position: -112px -112px;
+}
+.ui-icon-zoomin {
+  background-position: -128px -112px;
+}
+.ui-icon-zoomout {
+  background-position: -144px -112px;
+}
+.ui-icon-search {
+  background-position: -160px -112px;
+}
+.ui-icon-wrench {
+  background-position: -176px -112px;
+}
+.ui-icon-gear {
+  background-position: -192px -112px;
+}
+.ui-icon-heart {
+  background-position: -208px -112px;
+}
+.ui-icon-star {
+  background-position: -224px -112px;
+}
+.ui-icon-link {
+  background-position: -240px -112px;
+}
+.ui-icon-cancel {
+  background-position: 0 -128px;
+}
+.ui-icon-plus {
+  background-position: -16px -128px;
+}
+.ui-icon-plusthick {
+  background-position: -32px -128px;
+}
+.ui-icon-minus {
+  background-position: -48px -128px;
+}
+.ui-icon-minusthick {
+  background-position: -64px -128px;
+}
+.ui-icon-close {
+  background-position: -80px -128px;
+}
+.ui-icon-closethick {
+  background-position: -96px -128px;
+}
+.ui-icon-key {
+  background-position: -112px -128px;
+}
+.ui-icon-lightbulb {
+  background-position: -128px -128px;
+}
+.ui-icon-scissors {
+  background-position: -144px -128px;
+}
+.ui-icon-clipboard {
+  background-position: -160px -128px;
+}
+.ui-icon-copy {
+  background-position: -176px -128px;
+}
+.ui-icon-contact {
+  background-position: -192px -128px;
+}
+.ui-icon-image {
+  background-position: -208px -128px;
+}
+.ui-icon-video {
+  background-position: -224px -128px;
+}
+.ui-icon-script {
+  background-position: -240px -128px;
+}
+.ui-icon-alert {
+  background-position: 0 -144px;
+}
+.ui-icon-info {
+  background-position: -16px -144px;
+}
+.ui-icon-notice {
+  background-position: -32px -144px;
+}
+.ui-icon-help {
+  background-position: -48px -144px;
+}
+.ui-icon-check {
+  background-position: -64px -144px;
+}
+.ui-icon-bullet {
+  background-position: -80px -144px;
+}
+.ui-icon-radio-off {
+  background-position: -96px -144px;
+}
+.ui-icon-radio-on {
+  background-position: -112px -144px;
+}
+.ui-icon-pin-w {
+  background-position: -128px -144px;
+}
+.ui-icon-pin-s {
+  background-position: -144px -144px;
+}
+.ui-icon-play {
+  background-position: 0 -160px;
+}
+.ui-icon-pause {
+  background-position: -16px -160px;
+}
+.ui-icon-seek-next {
+  background-position: -32px -160px;
+}
+.ui-icon-seek-prev {
+  background-position: -48px -160px;
+}
+.ui-icon-seek-end {
+  background-position: -64px -160px;
+}
+.ui-icon-seek-first {
+  background-position: -80px -160px;
+}
+.ui-icon-stop {
+  background-position: -96px -160px;
+}
+.ui-icon-eject {
+  background-position: -112px -160px;
+}
+.ui-icon-volume-off {
+  background-position: -128px -160px;
+}
+.ui-icon-volume-on {
+  background-position: -144px -160px;
+}
+.ui-icon-power {
+  background-position: 0 -176px;
+}
+.ui-icon-signal-diag {
+  background-position: -16px -176px;
+}
+.ui-icon-signal {
+  background-position: -32px -176px;
+}
+.ui-icon-battery-0 {
+  background-position: -48px -176px;
+}
+.ui-icon-battery-1 {
+  background-position: -64px -176px;
+}
+.ui-icon-battery-2 {
+  background-position: -80px -176px;
+}
+.ui-icon-battery-3 {
+  background-position: -96px -176px;
+}
+.ui-icon-circle-plus {
+  background-position: 0 -192px;
+}
+.ui-icon-circle-minus {
+  background-position: -16px -192px;
+}
+.ui-icon-circle-close {
+  background-position: -32px -192px;
+}
+.ui-icon-circle-triangle-e {
+  background-position: -48px -192px;
+}
+.ui-icon-circle-triangle-s {
+  background-position: -64px -192px;
+}
+.ui-icon-circle-triangle-w {
+  background-position: -80px -192px;
+}
+.ui-icon-circle-triangle-n {
+  background-position: -96px -192px;
+}
+.ui-icon-circle-arrow-e {
+  background-position: -112px -192px;
+}
+.ui-icon-circle-arrow-s {
+  background-position: -128px -192px;
+}
+.ui-icon-circle-arrow-w {
+  background-position: -144px -192px;
+}
+.ui-icon-circle-arrow-n {
+  background-position: -160px -192px;
+}
+.ui-icon-circle-zoomin {
+  background-position: -176px -192px;
+}
+.ui-icon-circle-zoomout {
+  background-position: -192px -192px;
+}
+.ui-icon-circle-check {
+  background-position: -208px -192px;
+}
+.ui-icon-circlesmall-plus {
+  background-position: 0 -208px;
+}
+.ui-icon-circlesmall-minus {
+  background-position: -16px -208px;
+}
+.ui-icon-circlesmall-close {
+  background-position: -32px -208px;
+}
+.ui-icon-squaresmall-plus {
+  background-position: -48px -208px;
+}
+.ui-icon-squaresmall-minus {
+  background-position: -64px -208px;
+}
+.ui-icon-squaresmall-close {
+  background-position: -80px -208px;
+}
+.ui-icon-grip-dotted-vertical {
+  background-position: 0 -224px;
+}
+.ui-icon-grip-dotted-horizontal {
+  background-position: -16px -224px;
+}
+.ui-icon-grip-solid-vertical {
+  background-position: -32px -224px;
+}
+.ui-icon-grip-solid-horizontal {
+  background-position: -48px -224px;
+}
+.ui-icon-gripsmall-diagonal-se {
+  background-position: -64px -224px;
+}
+.ui-icon-grip-diagonal-se {
+  background-position: -80px -224px;
+}
+.ui-icon-carat-1-n {
+  background-position: 0 0;
+}
 
 /**
  * Accordion
diff --git a/core/themes/claro/css/components/shortcut.pcss.css b/core/themes/claro/css/components/shortcut.pcss.css
index 04ede913b70d..72e157db6fc9 100644
--- a/core/themes/claro/css/components/shortcut.pcss.css
+++ b/core/themes/claro/css/components/shortcut.pcss.css
@@ -48,8 +48,7 @@
   vertical-align: -0.0625rem;
   background: transparent url(../../images/shortcut/favstar.svg) left top / calc(var(--shortcut-icon-size) * 4) var(--shortcut-icon-size) no-repeat;
 
-  @nest .shortcut-action--add:hover &,
-  .shortcut-action--add:focus & {
+  @nest .shortcut-action--add:hover &, .shortcut-action--add:focus & {
     background-position: calc(-1 * var(--shortcut-icon-size)) top;
   }
 
@@ -57,8 +56,7 @@
     background-position: calc(-2 * var(--shortcut-icon-size)) top;
   }
 
-  @nest .shortcut-action--remove:focus &,
-  .shortcut-action--remove:hover & {
+  @nest .shortcut-action--remove:focus &, .shortcut-action--remove:hover & {
     background-position: calc(-3 * var(--shortcut-icon-size)) top;
   }
 
diff --git a/core/themes/claro/css/components/system-admin--admin-list.pcss.css b/core/themes/claro/css/components/system-admin--admin-list.pcss.css
index 03b5bed6d8d7..92f32d49b947 100644
--- a/core/themes/claro/css/components/system-admin--admin-list.pcss.css
+++ b/core/themes/claro/css/components/system-admin--admin-list.pcss.css
@@ -6,7 +6,7 @@
 /**
  * Admin list (wrapper of admin items).
  */
- .admin-list {
+.admin-list {
   margin-block: 1em 2em;
   padding: 0;
 }
diff --git a/core/themes/claro/css/components/system-admin--modules.pcss.css b/core/themes/claro/css/components/system-admin--modules.pcss.css
index da7b5aafe7b9..0e42fa310d1b 100644
--- a/core/themes/claro/css/components/system-admin--modules.pcss.css
+++ b/core/themes/claro/css/components/system-admin--modules.pcss.css
@@ -8,7 +8,8 @@
   --module-table-cell-padding-horizontal: calc(var(--space-m) - (var(--input-border-size) * 2));
 }
 
-.modules-table-filter, .permissions-table-filter {
+.modules-table-filter,
+.permissions-table-filter {
   padding: 0.25rem var(--space-l);
   border: 1px solid var(--color-gray-200);
   border-radius: 2px 2px 0 0;
@@ -16,7 +17,8 @@
 }
 
 /* Visually hide the module filter input description. */
-.modules-table-filter .form-item__description, .permissions-table-filter .form-item__description {
+.modules-table-filter .form-item__description,
+.permissions-table-filter .form-item__description {
   position: absolute !important;
   overflow: hidden;
   clip: rect(1px, 1px, 1px, 1px);
diff --git a/core/themes/claro/css/components/tables.pcss.css b/core/themes/claro/css/components/tables.pcss.css
index 1feaa6065aed..0d3e522db80d 100644
--- a/core/themes/claro/css/components/tables.pcss.css
+++ b/core/themes/claro/css/components/tables.pcss.css
@@ -74,7 +74,7 @@ th {
       opacity: 0.5;
       background: url(../../images/icons/000f33/sort--inactive.svg) no-repeat 50% 50%;
       background-size: contain;
-      
+
       [dir="rtl"] & {
         /* Horizontally flip the element. */
         transform: scaleX(-1);
@@ -90,7 +90,6 @@ th {
         background: linktext;
         mask: url(../../images/icons/000f33/sort--inactive.svg) no-repeat 50% 50%;
       }
-
     }
   }
 
diff --git a/core/themes/claro/css/components/tablesort-indicator.pcss.css b/core/themes/claro/css/components/tablesort-indicator.pcss.css
index 33a0fe618974..0cbdb709efc6 100644
--- a/core/themes/claro/css/components/tablesort-indicator.pcss.css
+++ b/core/themes/claro/css/components/tablesort-indicator.pcss.css
@@ -27,7 +27,6 @@
     mask-repeat: no-repeat;
     mask-position: 0 50%;
   }
-
 }
 
 .tablesort--asc {
diff --git a/core/themes/claro/css/components/tabs.pcss.css b/core/themes/claro/css/components/tabs.pcss.css
index c002c770b057..f34c438979f1 100644
--- a/core/themes/claro/css/components/tabs.pcss.css
+++ b/core/themes/claro/css/components/tabs.pcss.css
@@ -228,7 +228,9 @@
         border: none;
         border-radius: var(--tabs-border-radius-size) var(--tabs-border-radius-size) 0 0;
         outline: 2px dotted transparent;
-        box-shadow: 0 0 0 2px var(--color-white), 0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus);
+        box-shadow:
+          0 0 0 2px var(--color-white),
+          0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus);
       }
       &:hover {
         color: var(--color-absolutezero-hover);
@@ -254,7 +256,9 @@
     & .tabs--primary {
       & .tabs__link {
         &:focus {
-          box-shadow: 0 0 0 2px var(--color-gray-050), 0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus);
+          box-shadow:
+            0 0 0 2px var(--color-gray-050),
+            0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus);
         }
       }
     }
diff --git a/core/themes/claro/css/components/views_ui.admin.pcss.css b/core/themes/claro/css/components/views_ui.admin.pcss.css
index 52f8b147d0d4..b4f1dd72e0b1 100644
--- a/core/themes/claro/css/components/views_ui.admin.pcss.css
+++ b/core/themes/claro/css/components/views_ui.admin.pcss.css
@@ -37,7 +37,8 @@
   margin-inline: 0;
 }
 
-@media screen and (min-width: 60rem) { /* 960px */
+@media screen and (min-width: 60rem) {
+  /* 960px */
   .views-display-columns {
     & > * {
       float: left; /* LTR */
diff --git a/core/themes/claro/css/layout/system-admin--layout.pcss.css b/core/themes/claro/css/layout/system-admin--layout.pcss.css
index a041c3df2d9a..4fe485131053 100644
--- a/core/themes/claro/css/layout/system-admin--layout.pcss.css
+++ b/core/themes/claro/css/layout/system-admin--layout.pcss.css
@@ -26,7 +26,7 @@
   }
   .toolbar-tray-open:not(.toolbar-vertical) .layout-column,
   body:not(.toolbar-tray-open) .layout-column {
-    float: left;  /* LTR */
+    float: left; /* LTR */
     box-sizing: border-box;
     padding-right: 1.5em;
     padding-left: 1.5em;
@@ -59,7 +59,7 @@
     margin-left: -1.5em;
   }
   .layout-column {
-    float: left;  /* LTR */
+    float: left; /* LTR */
     box-sizing: border-box;
     padding-right: 1.5em;
     padding-left: 1.5em;
diff --git a/core/themes/claro/css/theme/maintenance-page.pcss.css b/core/themes/claro/css/theme/maintenance-page.pcss.css
index 6e164117b978..e4ec7bd69e9f 100644
--- a/core/themes/claro/css/theme/maintenance-page.pcss.css
+++ b/core/themes/claro/css/theme/maintenance-page.pcss.css
@@ -62,7 +62,8 @@ h3 {
  * Task list & step indicator.
  * Shows on both the install screen and the database update page.
  */
-@media all and (max-width: 48em) { /* 768px */
+@media all and (max-width: 48em) {
+  /* 768px */
   header[role="banner"] {
     position: relative;
   }
@@ -79,7 +80,8 @@ h3 {
   }
 }
 
-@media all and (min-width: 48em) { /* 768px */
+@media all and (min-width: 48em) {
+  /* 768px */
   .step-indicator {
     display: none;
   }
@@ -138,13 +140,15 @@ h3 {
   background: #fff;
   box-shadow: var(--shadow-z3);
 }
-.layout-container::after { /* No reason for a clearfix in the markup. */
+.layout-container::after {
+  /* No reason for a clearfix in the markup. */
   display: table;
   clear: both;
   content: "";
 }
 
-@media all and (max-width: 48em) { /* 768px */
+@media all and (max-width: 48em) {
+  /* 768px */
   .layout-container {
     margin: 1.25em;
     padding: var(--space-m) var(--space-l);
@@ -155,7 +159,8 @@ h3 {
   }
 }
 
-@media all and (min-width: 48em) { /* 768px */
+@media all and (min-width: 48em) {
+  /* 768px */
   html {
     display: table;
   }
diff --git a/core/themes/claro/css/theme/media-library.pcss.css b/core/themes/claro/css/theme/media-library.pcss.css
index 50d219b52bf3..5c658f099aa7 100644
--- a/core/themes/claro/css/theme/media-library.pcss.css
+++ b/core/themes/claro/css/theme/media-library.pcss.css
@@ -139,7 +139,7 @@
   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 {
+[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;
@@ -218,7 +218,9 @@
 
 /* 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);
+  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 {
@@ -419,7 +421,10 @@
   width: calc(100% - 16px);
   height: calc(100% - 16px);
   content: "";
-  transition: border-color 0.2s, color 0.2s, background 0.2s;
+  transition:
+    border-color 0.2s,
+    color 0.2s,
+    background 0.2s;
   pointer-events: none;
   border: 1px solid #dbdbdb;
   border-radius: 2px;
diff --git a/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css b/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css
index 80372bfd1593..46c8e8b5e839 100644
--- a/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css
+++ b/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css
@@ -30,7 +30,9 @@
 .views-admin a.icon {
   border: 1px solid #ddd;
   border-radius: 4px;
-  background: linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat, repeat-y;
+  background:
+    linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat,
+    repeat-y;
   box-shadow: 0 0 0 rgba(0, 0, 0, 0.3333) inset;
 }
 .views-admin a.icon:hover {
@@ -72,19 +74,27 @@
   background-position: center -52px;
 }
 .views-admin a.icon.delete {
-  background-position: center -52px, left top; /* LTR */
+  background-position:
+    center -52px,
+    left top; /* LTR */
 }
 [dir="rtl"] .views-admin a.icon.delete {
-  background-position: center -52px, right top;
+  background-position:
+    center -52px,
+    right top;
 }
 .views-admin .icon.rearrange {
   background-position: center -111px;
 }
 .views-admin a.icon.rearrange {
-  background-position: center -111px, left top; /* LTR */
+  background-position:
+    center -111px,
+    left top; /* LTR */
 }
 [dir="rtl"] .views-admin a.icon.rearrange {
-  background-position: center -111px, right top;
+  background-position:
+    center -111px,
+    right top;
 }
 details.box-padding {
   border: none;
@@ -324,7 +334,8 @@ td.group-title {
   vertical-align: top;
 }
 
-@media screen and (min-width: 45em) { /* 720px */
+@media screen and (min-width: 45em) {
+  /* 720px */
   .view-preview-form .form-type-textfield .description {
     white-space: nowrap;
   }
diff --git a/core/themes/olivero/css/base/media-queries.pcss.css b/core/themes/olivero/css/base/media-queries.pcss.css
index ec87de15f412..d2368f0ecbeb 100644
--- a/core/themes/olivero/css/base/media-queries.pcss.css
+++ b/core/themes/olivero/css/base/media-queries.pcss.css
@@ -14,5 +14,5 @@
 @custom-media --max-nav (max-width: 1200px);
 
 /* Grid related breakpoints */
-@custom-media --grid-md (min-width: 700px);   /* Grid shifts from 6 to 14 columns. */
+@custom-media --grid-md (min-width: 700px); /* Grid shifts from 6 to 14 columns. */
 @custom-media --grid-max (min-width: 1440px); /* Width of the entire grid maxes out. */
diff --git a/core/themes/olivero/css/components/autocomplete-loading.module.pcss.css b/core/themes/olivero/css/components/autocomplete-loading.module.pcss.css
index 2464789ae7d7..db532a6020b7 100644
--- a/core/themes/olivero/css/components/autocomplete-loading.module.pcss.css
+++ b/core/themes/olivero/css/components/autocomplete-loading.module.pcss.css
@@ -10,7 +10,7 @@
   background-color: var(--color--white);
   background-image: url("../../images/magnifying-glass.svg");
   background-repeat: no-repeat;
-  background-position: right var(--sp1) center;  /* LTR */
+  background-position: right var(--sp1) center; /* LTR */
 
   &:disabled {
     background-color: var(--color--gray-100);
diff --git a/core/themes/olivero/css/components/breadcrumb.pcss.css b/core/themes/olivero/css/components/breadcrumb.pcss.css
index c050b9d8328c..8f88549859e8 100644
--- a/core/themes/olivero/css/components/breadcrumb.pcss.css
+++ b/core/themes/olivero/css/components/breadcrumb.pcss.css
@@ -76,7 +76,7 @@
 .breadcrumb__item {
   display: inline-block;
 
-  &:nth-child(n+2)::before {
+  &:nth-child(n + 2)::before {
     display: inline-block;
     width: 8px;
     height: 8px;
@@ -96,7 +96,7 @@
   }
 }
 
-[dir="rtl"] .breadcrumb__item:nth-child(n+2)::before {
+[dir="rtl"] .breadcrumb__item:nth-child(n + 2)::before {
   transform: rotate(-45deg);
 }
 
diff --git a/core/themes/olivero/css/components/form-boolean.pcss.css b/core/themes/olivero/css/components/form-boolean.pcss.css
index 9064b97b230e..c1500d2bf4b2 100644
--- a/core/themes/olivero/css/components/form-boolean.pcss.css
+++ b/core/themes/olivero/css/components/form-boolean.pcss.css
@@ -85,12 +85,16 @@ input[type="radio"] {
     border-width: 2px;
     border-color: var(--color--primary-50);
     outline-color: transparent;
-    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--primary-50);
+    box-shadow:
+      0 0 0 2px white,
+      0 0 0 4px var(--color--primary-50);
   }
 
   &.error:focus {
     outline-color: transparent;
-    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color--red);
+    box-shadow:
+      0 0 0 2px white,
+      0 0 0 4px var(--color--red);
   }
 }
 
diff --git a/core/themes/olivero/css/components/header-navigation.pcss.css b/core/themes/olivero/css/components/header-navigation.pcss.css
index 9cf27bdb575d..b8b615e87117 100644
--- a/core/themes/olivero/css/components/header-navigation.pcss.css
+++ b/core/themes/olivero/css/components/header-navigation.pcss.css
@@ -65,7 +65,9 @@
  * works around https://bugs.chromium.org/p/chromium/issues/detail?id=332189
  */
 html.js .header-nav {
-  transition: visibility 0.2s, transform 0.2s;
+  transition:
+    visibility 0.2s,
+    transform 0.2s;
 }
 
 body:not(.is-always-mobile-nav) .header-nav {
@@ -96,7 +98,9 @@ body.is-always-mobile-nav {
       overflow: auto;
       max-width: calc((7 * (var(--grid-col-width) + var(--grid-gap))));
       padding-inline-end: var(--sp);
-      transition: transform 0.2s, visibility 0.2s;
+      transition:
+        transform 0.2s,
+        visibility 0.2s;
       border-top-width: calc(var(--drupal-displace-offset-top, 0px) + var(--sp11));
     }
 
diff --git a/core/themes/olivero/css/components/hero.pcss.css b/core/themes/olivero/css/components/hero.pcss.css
index 34ec1f4fb682..a256af323bd7 100644
--- a/core/themes/olivero/css/components/hero.pcss.css
+++ b/core/themes/olivero/css/components/hero.pcss.css
@@ -8,7 +8,8 @@
 .hero__content {
   grid-column: 1 / 7;
 
-  @media (--grid-md) { /* 700px */
+  @media (--grid-md) {
+    /* 700px */
     grid-column: 3 / 13;
   }
 
diff --git a/core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css b/core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css
index 9e042f3cf06a..24d5cdcedf0b 100644
--- a/core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css
+++ b/core/themes/olivero/css/components/navigation/nav-primary-wide.pcss.css
@@ -219,7 +219,10 @@ html.js body:not(.is-always-mobile-nav) {
   @media (--nav) {
     & .primary-nav__menu--level-2,
     & .primary-nav__menu-🥕 {
-      transition: visibility 0.2s, transform 0.2s, opacity 0.2s;
+      transition:
+        visibility 0.2s,
+        transform 0.2s,
+        opacity 0.2s;
     }
   }
 }
diff --git a/core/themes/olivero/css/components/navigation/nav-primary.pcss.css b/core/themes/olivero/css/components/navigation/nav-primary.pcss.css
index 199db17c8fd8..aab7afe5ec22 100644
--- a/core/themes/olivero/css/components/navigation/nav-primary.pcss.css
+++ b/core/themes/olivero/css/components/navigation/nav-primary.pcss.css
@@ -151,7 +151,10 @@
   margin-block: 0;
   margin-inline-start: calc(-1 * var(--sp));
   padding-inline-start: var(--sp2-5);
-  transition: opacity 0.2s, visibility 0.2s, max-height 0.2s;
+  transition:
+    opacity 0.2s,
+    visibility 0.2s,
+    max-height 0.2s;
   opacity: 0;
   border-inline-start: solid var(--sp) var(--color--primary-50);
 
diff --git a/core/themes/olivero/css/components/navigation/nav-secondary.pcss.css b/core/themes/olivero/css/components/navigation/nav-secondary.pcss.css
index ea22e93756ef..eabeeff71a1f 100644
--- a/core/themes/olivero/css/components/navigation/nav-secondary.pcss.css
+++ b/core/themes/olivero/css/components/navigation/nav-secondary.pcss.css
@@ -53,7 +53,9 @@
     width: 100%;
     height: 0;
     content: "";
-    transition: opacity 0.2s, transform 0.2s;
+    transition:
+      opacity 0.2s,
+      transform 0.2s;
     transform: translateY(5px);
     opacity: 0;
     /* Intentionally not using CSS logical properties. */
diff --git a/core/themes/olivero/css/components/node-teaser.pcss.css b/core/themes/olivero/css/components/node-teaser.pcss.css
index ec6492c2a363..b34ccec40f95 100644
--- a/core/themes/olivero/css/components/node-teaser.pcss.css
+++ b/core/themes/olivero/css/components/node-teaser.pcss.css
@@ -29,4 +29,4 @@
       margin-block-start: var(--sp2);
     }
   }
-}
\ No newline at end of file
+}
diff --git a/core/themes/olivero/css/components/node.pcss.css b/core/themes/olivero/css/components/node.pcss.css
index 1f6c7ccedef7..e9bbf7639e43 100644
--- a/core/themes/olivero/css/components/node.pcss.css
+++ b/core/themes/olivero/css/components/node.pcss.css
@@ -33,7 +33,9 @@
 .node__title {
   & a {
     padding-block-end: 3px;
-    transition: background-size 0.2s, color 0.2s;
+    transition:
+      background-size 0.2s,
+      color 0.2s;
     text-decoration: none;
     color: var(--color-text-neutral-loud);
     background-color: transparent;
diff --git a/core/themes/olivero/css/components/search-results.pcss.css b/core/themes/olivero/css/components/search-results.pcss.css
index 69a174bed3dc..592ef3c7d32a 100644
--- a/core/themes/olivero/css/components/search-results.pcss.css
+++ b/core/themes/olivero/css/components/search-results.pcss.css
@@ -27,7 +27,9 @@
 
   & a {
     padding-block-end: 3px;
-    transition: background-size 0.2s, color 0.2s;
+    transition:
+      background-size 0.2s,
+      color 0.2s;
     text-decoration: none;
     background-color: transparent;
     background-image: linear-gradient(var(--color--primary-50), var(--color--primary-50)); /* Two values are needed for IE11 support. */
diff --git a/core/themes/olivero/css/components/site-header.pcss.css b/core/themes/olivero/css/components/site-header.pcss.css
index ee6822646357..d1ffafdacbdf 100644
--- a/core/themes/olivero/css/components/site-header.pcss.css
+++ b/core/themes/olivero/css/components/site-header.pcss.css
@@ -68,7 +68,10 @@
  */
 html.js body:not(.is-always-mobile-nav) .site-header__inner {
   @media (--nav) {
-    transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s;
+    transition:
+      opacity 0.3s,
+      transform 0.3s,
+      box-shadow 0.3s;
   }
 }
 
diff --git a/core/themes/olivero/css/components/tabs.pcss.css b/core/themes/olivero/css/components/tabs.pcss.css
index 17dbf1981696..200749bb0150 100644
--- a/core/themes/olivero/css/components/tabs.pcss.css
+++ b/core/themes/olivero/css/components/tabs.pcss.css
@@ -173,7 +173,10 @@
     inset-inline-start: 0;
     display: block;
     width: 100%;
-    transition: transform var(--tabs-transition-duration), opacity var(--tabs-transition-duration), top var(--tabs-transition-duration);
+    transition:
+      transform var(--tabs-transition-duration),
+      opacity var(--tabs-transition-duration),
+      top var(--tabs-transition-duration);
     border-block-start: solid 2px var(--tabs-highlight-color);
 
     &:nth-child(1) {
diff --git a/core/themes/olivero/css/components/tags.pcss.css b/core/themes/olivero/css/components/tags.pcss.css
index ca3711c73db6..1e5cd90c472b 100644
--- a/core/themes/olivero/css/components/tags.pcss.css
+++ b/core/themes/olivero/css/components/tags.pcss.css
@@ -53,7 +53,7 @@
   margin-inline-end: calc(var(--sp0-5) / 2);
 }
 
-.field--tags__item:nth-last-child(n+2)::after {
+.field--tags__item:nth-last-child(n + 2)::after {
   content: ",";
   font-size: var(--font-size-base);
   line-height: 1.5;
diff --git a/core/themes/olivero/css/components/vertical-tabs.pcss.css b/core/themes/olivero/css/components/vertical-tabs.pcss.css
index b398a15d2b72..d19deb3d380d 100644
--- a/core/themes/olivero/css/components/vertical-tabs.pcss.css
+++ b/core/themes/olivero/css/components/vertical-tabs.pcss.css
@@ -58,7 +58,7 @@
   display: none;
 }
 
-.vertical-tabs__menu-item:nth-child(n+2) {
+.vertical-tabs__menu-item:nth-child(n + 2) {
   border-block-start: var(--vertical-tabs-menu-border-width) solid var(--color--gray-95);
 }
 
diff --git a/core/themes/stable9/css/announcements_feed/announcements_feed.toolbar.css b/core/themes/stable9/css/announcements_feed/announcements_feed.toolbar.css
index 60e5a5c8924d..bb4dd444bbca 100644
--- a/core/themes/stable9/css/announcements_feed/announcements_feed.toolbar.css
+++ b/core/themes/stable9/css/announcements_feed/announcements_feed.toolbar.css
@@ -3,7 +3,6 @@
 }
 
 @media (forced-colors: active) {
-
   .toolbar .toolbar-icon.announce-canvas-link::before {
     background: linktext;
     -webkit-mask-image: url("data:image/svg+xml,%3csvg width='20' height='19' viewBox='0 0 20 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.73047 16.7648C6.00143 17.4831 6.6872 18 7.50009 18C8.31299 18 8.99876 17.4865 9.26972 16.7682C8.71107 16.8118 8.12231 16.8387 7.50009 16.8387C6.87788 16.8353 6.28912 16.8085 5.73047 16.7648Z' fill='white'/%3e%3cpath d='M14.331 13.4118H14.0801L12.4074 11.3979L11.5143 6.69897H11.5042C11.2333 5.05433 9.97881 3.74869 8.36976 3.39627C8.3731 3.38955 8.37979 3.38284 8.37979 3.37613L8.624 2.63772C8.74108 2.28529 8.53702 2 8.16905 2H6.83095C6.46298 2 6.25892 2.28529 6.37266 2.63772L6.61686 3.37613C6.62021 3.38284 6.62355 3.38955 6.6269 3.39627C5.01784 3.74869 3.76673 5.05433 3.49242 6.69897H3.48238L2.59255 11.3979L0.919938 13.4118H0.669046C0.30107 13.4118 0 13.7139 0 14.0831C0 14.4523 0.280999 14.8618 0.625558 14.996C0.625558 14.996 3.48573 16.0969 7.5 16.0969C11.5143 16.0969 14.3744 14.996 14.3744 14.996C14.719 14.8618 15 14.4523 15 14.0831C15 13.7139 14.6989 13.4118 14.331 13.4118ZM4.58296 6.95742L3.70317 11.8611L1.75624 14.0831H1.23439L3.21811 11.6933L4.15477 6.82652C4.28189 6.0579 4.68332 5.3799 5.24532 4.8798L5.49955 5.19866C5.03122 5.60478 4.68666 6.32305 4.58296 6.95742Z' fill='white'/%3e%3c/svg%3e");
diff --git a/core/themes/stable9/css/content_moderation/content_moderation.module.css b/core/themes/stable9/css/content_moderation/content_moderation.module.css
index cf0115c09032..82eab95573b6 100644
--- a/core/themes/stable9/css/content_moderation/content_moderation.module.css
+++ b/core/themes/stable9/css/content_moderation/content_moderation.module.css
@@ -29,6 +29,6 @@
   padding-bottom: 0.25em;
 }
 
-.entity-moderation-form input[type=submit] {
+.entity-moderation-form input[type="submit"] {
   margin-bottom: 1.2em;
 }
diff --git a/core/themes/stable9/css/filter/filter.caption.css b/core/themes/stable9/css/filter/filter.caption.css
index 34c0b1b8a8a2..b906775f89df 100644
--- a/core/themes/stable9/css/filter/filter.caption.css
+++ b/core/themes/stable9/css/filter/filter.caption.css
@@ -24,7 +24,7 @@
  *
  * Based on http://codepen.io/flesler/pen/AEIFc.
  */
-.caption > figcaption[contenteditable=true]:empty::before {
+.caption > figcaption[contenteditable="true"]:empty::before {
   content: attr(data-placeholder);
   font-style: italic;
 }
diff --git a/core/themes/stable9/css/node/node.module.css b/core/themes/stable9/css/node/node.module.css
index c564633691c3..60a4f30a7d76 100644
--- a/core/themes/stable9/css/node/node.module.css
+++ b/core/themes/stable9/css/node/node.module.css
@@ -13,10 +13,7 @@
 }
 
 /* Wide screens */
-@media
-  screen and (min-width: 780px),
-  (orientation: landscape) and (min-device-height: 780px) {
-
+@media screen and (min-width: 780px), (orientation: landscape) and (min-device-height: 780px) {
   .layout-region-node-main,
   .layout-region-node-footer {
     float: left; /* LTR */
@@ -63,9 +60,7 @@
  * toolbar is on, we need to suppress layout for the original media width + the
  * toolbar width (240px). In this case, 240px + 780px.
  */
-@media
-  screen and (max-width: 1020px) {
-
+@media screen and (max-width: 1020px) {
   .toolbar-vertical.toolbar-tray-open .layout-region-node-main,
   .toolbar-vertical.toolbar-tray-open .layout-region-node-footer,
   .toolbar-vertical.toolbar-tray-open .layout-region-node-secondary {
diff --git a/core/themes/stable9/css/system/system.admin.css b/core/themes/stable9/css/system/system.admin.css
index e6e09aaa7062..b922c87d5a6b 100644
--- a/core/themes/stable9/css/system/system.admin.css
+++ b/core/themes/stable9/css/system/system.admin.css
@@ -20,7 +20,7 @@
     margin: 0 2.5em;
   }
   .layout-column {
-    float: left;  /* LTR */
+    float: left; /* LTR */
     box-sizing: border-box;
   }
   [dir="rtl"] .layout-column {
@@ -371,7 +371,7 @@ small .admin-link::after {
   margin: 0;
   padding: 0 0.7em;
   list-style-type: none;
-  border-right: 1px solid #cdcdcd;  /* LTR */
+  border-right: 1px solid #cdcdcd; /* LTR */
 }
 [dir="rtl"] .theme-selector .operations li {
   float: right;
diff --git a/core/themes/stable9/css/views_ui/views_ui.admin.css b/core/themes/stable9/css/views_ui/views_ui.admin.css
index 2507d306578a..5e34e4675957 100644
--- a/core/themes/stable9/css/views_ui/views_ui.admin.css
+++ b/core/themes/stable9/css/views_ui/views_ui.admin.css
@@ -147,7 +147,8 @@
   margin-bottom: 2em;
 }
 
-@media screen and (min-width: 45em) { /* 720px */
+@media screen and (min-width: 45em) {
+  /* 720px */
   .views-display-columns > * {
     float: left; /* LTR */
     width: 32%;
diff --git a/core/themes/stable9/css/views_ui/views_ui.admin.theme.css b/core/themes/stable9/css/views_ui/views_ui.admin.theme.css
index 993229e26e77..a95a0c06a410 100644
--- a/core/themes/stable9/css/views_ui/views_ui.admin.theme.css
+++ b/core/themes/stable9/css/views_ui/views_ui.admin.theme.css
@@ -36,7 +36,9 @@
 .views-admin a.icon {
   border: 1px solid #ddd;
   border-radius: 4px;
-  background: linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat, repeat-y;
+  background:
+    linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat,
+    repeat-y;
   box-shadow: 0 0 0 rgba(0, 0, 0, 0.3333) inset;
 }
 .views-admin a.icon:hover {
@@ -78,28 +80,40 @@
   background-position: center 3px;
 }
 .views-admin a.icon.add {
-  background-position: center 3px, left top; /* LTR */
+  background-position:
+    center 3px,
+    left top; /* LTR */
 }
 [dir="rtl"] .views-admin a.icon.add {
-  background-position: center 3px, right top;
+  background-position:
+    center 3px,
+    right top;
 }
 .views-admin .icon.delete {
   background-position: center -52px;
 }
 .views-admin a.icon.delete {
-  background-position: center -52px, left top; /* LTR */
+  background-position:
+    center -52px,
+    left top; /* LTR */
 }
 [dir="rtl"] .views-admin a.icon.delete {
-  background-position: center -52px, right top;
+  background-position:
+    center -52px,
+    right top;
 }
 .views-admin .icon.rearrange {
   background-position: center -111px;
 }
 .views-admin a.icon.rearrange {
-  background-position: center -111px, left top; /* LTR */
+  background-position:
+    center -111px,
+    left top; /* LTR */
 }
 [dir="rtl"] .views-admin a.icon.rearrange {
-  background-position: center -111px, right top;
+  background-position:
+    center -111px,
+    right top;
 }
 .views-displays .tabs a:hover > .icon.add {
   background-position: center -25px;
@@ -484,7 +498,8 @@ td.group-title {
   vertical-align: top;
 }
 
-@media screen and (min-width: 45em) { /* 720px */
+@media screen and (min-width: 45em) {
+  /* 720px */
   .view-preview-form .form-type-textfield .description {
     white-space: nowrap;
   }
diff --git a/core/themes/starterkit_theme/css/components/dialog.css b/core/themes/starterkit_theme/css/components/dialog.css
index 16e17706030d..b66ca935eddd 100644
--- a/core/themes/starterkit_theme/css/components/dialog.css
+++ b/core/themes/starterkit_theme/css/components/dialog.css
@@ -13,7 +13,8 @@
   background: #fff;
 }
 
-@media all and (max-width: 48em) { /* 768px */
+@media all and (max-width: 48em) {
+  /* 768px */
   .ui-dialog {
     width: 92% !important;
   }
diff --git a/core/themes/starterkit_theme/css/components/messages.css b/core/themes/starterkit_theme/css/components/messages.css
index be259304491d..4c41e4402e60 100644
--- a/core/themes/starterkit_theme/css/components/messages.css
+++ b/core/themes/starterkit_theme/css/components/messages.css
@@ -7,9 +7,9 @@
   padding: 15px 20px 15px 35px; /* LTR */
   word-wrap: break-word;
   border: 1px solid;
-  border-width: 1px 1px 1px 0;  /* LTR */
+  border-width: 1px 1px 1px 0; /* LTR */
   border-radius: 2px;
-  background: no-repeat 10px 17px;  /* LTR */
+  background: no-repeat 10px 17px; /* LTR */
   overflow-wrap: break-word;
 }
 [dir="rtl"] .messages {
@@ -32,7 +32,7 @@
 }
 .messages--status {
   color: #325e1c;
-  border-color: #c9e1bd #c9e1bd #c9e1bd transparent;  /* LTR */
+  border-color: #c9e1bd #c9e1bd #c9e1bd transparent; /* LTR */
   background-color: #f3faef;
   background-image: url(../../images/icons/check.svg);
   box-shadow: -8px 0 0 #77b259; /* LTR */
@@ -44,7 +44,7 @@
 }
 .messages--warning {
   color: #734c00;
-  border-color: #f4daa6 #f4daa6 #f4daa6 transparent;  /* LTR */
+  border-color: #f4daa6 #f4daa6 #f4daa6 transparent; /* LTR */
   background-color: #fdf8ed;
   background-image: url(../../images/icons/warning.svg);
   box-shadow: -8px 0 0 #e09600; /* LTR */
@@ -55,7 +55,7 @@
 }
 .messages--error {
   color: #a51b00;
-  border-color: #f9c9bf #f9c9bf #f9c9bf transparent;  /* LTR */
+  border-color: #f9c9bf #f9c9bf #f9c9bf transparent; /* LTR */
   background-color: #fcf4f2;
   background-image: url(../../images/icons/error.svg);
   box-shadow: -8px 0 0 #e62600; /* LTR */
diff --git a/core/themes/starterkit_theme/css/components/progress.css b/core/themes/starterkit_theme/css/components/progress.css
index 1579776f5258..f8561b2eaf60 100644
--- a/core/themes/starterkit_theme/css/components/progress.css
+++ b/core/themes/starterkit_theme/css/components/progress.css
@@ -23,9 +23,7 @@
   border: 1px #07629a solid;
   border-radius: 10em;
   background: #057ec9;
-  background-image:
-    linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)),
-    linear-gradient(to right bottom, #0094f0 0%, #0094f0 25%, #007ecc 25%, #007ecc 50%, #0094f0 50%, #0094f0 75%, #0094f0 100%);
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15)), linear-gradient(to right bottom, #0094f0 0%, #0094f0 25%, #007ecc 25%, #007ecc 50%, #0094f0 50%, #0094f0 75%, #0094f0 100%);
   background-size: 40px 40px;
 }
 [dir="rtl"] .progress__bar {
@@ -47,6 +45,14 @@
  * Progress bar animations.
  */
 @keyframes animate-stripes {
-  0% { background-position: 0 0, 0 0; }
-  100% { background-position: 0 0, -80px 0; }
+  0% {
+    background-position:
+      0 0,
+      0 0;
+  }
+  100% {
+    background-position:
+      0 0,
+      -80px 0;
+  }
 }
diff --git a/core/yarn.lock b/core/yarn.lock
index 907fc7f0cbe5..fac528df3d6d 100644
--- a/core/yarn.lock
+++ b/core/yarn.lock
@@ -1869,6 +1869,7 @@ __metadata:
     stylelint-config-standard: "npm:^34.0.0"
     stylelint-formatter-gitlab: "npm:^1.0.2"
     stylelint-order: "npm:^6.0.3"
+    stylelint-prettier: "npm:^4.1.0"
     tabbable: "npm:^6.1.2"
     terser: "npm:^5.19.0"
     terser-webpack-plugin: "npm:^5.3.9"
@@ -7660,6 +7661,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stylelint-prettier@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "stylelint-prettier@npm:4.1.0"
+  dependencies:
+    prettier-linter-helpers: "npm:^1.0.0"
+  peerDependencies:
+    prettier: ">=3.0.0"
+    stylelint: ">=15.8.0"
+  checksum: 10c0/3824fa7fb78ac01f612490af677095c78a22d4a74fc49d0fa16c1c4345e7a015d3a62277ae5c4d7dbbf303c4fdc0eabe2709db3b8eac8e2c8c2130a3d4d6c62d
+  languageName: node
+  linkType: hard
+
 "stylelint@npm:^15.10.1":
   version: 15.11.0
   resolution: "stylelint@npm:15.11.0"
-- 
GitLab