diff --git a/core/themes/claro/css/components/form--password-confirm.css b/core/themes/claro/css/components/form--password-confirm.css
index c61799841a..a4c755e442 100644
--- a/core/themes/claro/css/components/form--password-confirm.css
+++ b/core/themes/claro/css/components/form--password-confirm.css
@@ -12,17 +12,17 @@
 
 :root {
   /* Weak */
-  --password-strength-bar--weak-bg-color: var(--color-maximumred);
-  --password-strength-bar--weak-border-color: var(--color-maximumred);
+  --password-strength-bar-weak-bg-color: var(--color-maximumred);
+  --password-strength-bar-weak-border-color: var(--color-maximumred);
   /* Fair */
-  --password-strength-bar--fair-bg-color: var(--color-sunglow);
-  --password-strength-bar--fair-border-color: #977405;
+  --password-strength-bar-fair-bg-color: var(--color-sunglow);
+  --password-strength-bar-fair-border-color: #977405;
   /* Good */
-  --password-strength-bar--good-bg-color: var(--color-lightninggreen);
-  --password-strength-bar--good-border-color: var(--color-lightninggreen);
+  --password-strength-bar-good-bg-color: var(--color-lightninggreen);
+  --password-strength-bar-good-border-color: var(--color-lightninggreen);
   /* Strong */
-  --password-strength-bar--strong-bg-color: var(--color-lightninggreen);
-  --password-strength-bar--strong-border-color: var(--color-lightninggreen);
+  --password-strength-bar-strong-bg-color: var(--color-lightninggreen);
+  --password-strength-bar-strong-border-color: var(--color-lightninggreen);
 }
 
 /**
@@ -101,23 +101,23 @@
 }
 
 .password-strength__bar.is-weak {
-  border-color: var(--password-strength-bar--weak-border-color);
-  background-color: var(--password-strength-bar--weak-bg-color);
+  border-color: var(--password-strength-bar-weak-border-color);
+  background-color: var(--password-strength-bar-weak-bg-color);
 }
 
 .password-strength__bar.is-fair {
-  border-color: var(--password-strength-bar--fair-border-color);
-  background-color: var(--password-strength-bar--fair-bg-color);
+  border-color: var(--password-strength-bar-fair-border-color);
+  background-color: var(--password-strength-bar-fair-bg-color);
 }
 
 .password-strength__bar.is-good {
-  border-color: var(--password-strength-bar--good-border-color);
-  background-color: var(--password-strength-bar--good-bg-color);
+  border-color: var(--password-strength-bar-good-border-color);
+  background-color: var(--password-strength-bar-good-bg-color);
 }
 
 .password-strength__bar.is-strong {
-  border-color: var(--password-strength-bar--strong-border-color);
-  background-color: var(--password-strength-bar--strong-bg-color);
+  border-color: var(--password-strength-bar-strong-border-color);
+  background-color: var(--password-strength-bar-strong-bg-color);
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
@@ -147,23 +147,23 @@
 /* Password strength states */
 
 .password-strength__bar.is-weak {
-  border-color: var(--password-strength-bar--weak-border-color);
-  background-color: var(--password-strength-bar--weak-bg-color);
+  border-color: var(--password-strength-bar-weak-border-color);
+  background-color: var(--password-strength-bar-weak-bg-color);
 }
 
 .password-strength__bar.is-fair {
-  border-color: var(--password-strength-bar--fair-border-color);
-  background-color: var(--password-strength-bar--fair-bg-color);
+  border-color: var(--password-strength-bar-fair-border-color);
+  background-color: var(--password-strength-bar-fair-bg-color);
 }
 
 .password-strength__bar.is-good {
-  border-color: var(--password-strength-bar--good-border-color);
-  background-color: var(--password-strength-bar--good-bg-color);
+  border-color: var(--password-strength-bar-good-border-color);
+  background-color: var(--password-strength-bar-good-bg-color);
 }
 
 .password-strength__bar.is-strong {
-  border-color: var(--password-strength-bar--strong-border-color);
-  background-color: var(--password-strength-bar--strong-bg-color);
+  border-color: var(--password-strength-bar-strong-border-color);
+  background-color: var(--password-strength-bar-strong-bg-color);
 }
 
 @media (forced-colors: active) {
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 75970ac7ed..b0208c3283 100644
--- a/core/themes/claro/css/components/form--password-confirm.pcss.css
+++ b/core/themes/claro/css/components/form--password-confirm.pcss.css
@@ -5,17 +5,17 @@
 
 :root {
   /* Weak */
-  --password-strength-bar--weak-bg-color: var(--color-maximumred);
-  --password-strength-bar--weak-border-color: var(--color-maximumred);
+  --password-strength-bar-weak-bg-color: var(--color-maximumred);
+  --password-strength-bar-weak-border-color: var(--color-maximumred);
   /* Fair */
-  --password-strength-bar--fair-bg-color: var(--color-sunglow);
-  --password-strength-bar--fair-border-color: #977405;
+  --password-strength-bar-fair-bg-color: var(--color-sunglow);
+  --password-strength-bar-fair-border-color: #977405;
   /* Good */
-  --password-strength-bar--good-bg-color: var(--color-lightninggreen);
-  --password-strength-bar--good-border-color: var(--color-lightninggreen);
+  --password-strength-bar-good-bg-color: var(--color-lightninggreen);
+  --password-strength-bar-good-border-color: var(--color-lightninggreen);
   /* Strong */
-  --password-strength-bar--strong-bg-color: var(--color-lightninggreen);
-  --password-strength-bar--strong-border-color: var(--color-lightninggreen);
+  --password-strength-bar-strong-bg-color: var(--color-lightninggreen);
+  --password-strength-bar-strong-border-color: var(--color-lightninggreen);
 }
 
 /**
@@ -45,16 +45,13 @@
 }
 
 /* Password confirm widget states. */
-.js .is-initial {
-  &:not(.form-item--error) .form-item__description {
-    margin-block-start: 0;
-  }
-
-  &.is-password-empty.is-confirm-empty:not(.form-item--error) .password-confirm__confirm {
-    display: none;
-    max-block-size: 0;
-    margin-block-start: 0;
-  }
+.js .is-initial:not(.form-item--error) .form-item__description {
+  margin-block-start: 0;
+}
+.js .is-initial.is-password-empty.is-confirm-empty:not(.form-item--error) .password-confirm__confirm {
+  display: none;
+  max-block-size: 0;
+  margin-block-start: 0;
 }
 
 /**
@@ -91,23 +88,23 @@
   background-color: transparent;
 
   &.is-weak {
-    border-color: var(--password-strength-bar--weak-border-color);
-    background-color: var(--password-strength-bar--weak-bg-color);
+    border-color: var(--password-strength-bar-weak-border-color);
+    background-color: var(--password-strength-bar-weak-bg-color);
   }
 
   &.is-fair {
-    border-color: var(--password-strength-bar--fair-border-color);
-    background-color: var(--password-strength-bar--fair-bg-color);
+    border-color: var(--password-strength-bar-fair-border-color);
+    background-color: var(--password-strength-bar-fair-bg-color);
   }
 
   &.is-good {
-    border-color: var(--password-strength-bar--good-border-color);
-    background-color: var(--password-strength-bar--good-bg-color);
+    border-color: var(--password-strength-bar-good-border-color);
+    background-color: var(--password-strength-bar-good-bg-color);
   }
 
   &.is-strong {
-    border-color: var(--password-strength-bar--strong-border-color);
-    background-color: var(--password-strength-bar--strong-bg-color);
+    border-color: var(--password-strength-bar-strong-border-color);
+    background-color: var(--password-strength-bar-strong-bg-color);
   }
 }
 
@@ -138,20 +135,20 @@
 /* Password strength states */
 .password-strength__bar {
   &.is-weak {
-    border-color: var(--password-strength-bar--weak-border-color);
-    background-color: var(--password-strength-bar--weak-bg-color);
+    border-color: var(--password-strength-bar-weak-border-color);
+    background-color: var(--password-strength-bar-weak-bg-color);
   }
   &.is-fair {
-    border-color: var(--password-strength-bar--fair-border-color);
-    background-color: var(--password-strength-bar--fair-bg-color);
+    border-color: var(--password-strength-bar-fair-border-color);
+    background-color: var(--password-strength-bar-fair-bg-color);
   }
   &.is-good {
-    border-color: var(--password-strength-bar--good-border-color);
-    background-color: var(--password-strength-bar--good-bg-color);
+    border-color: var(--password-strength-bar-good-border-color);
+    background-color: var(--password-strength-bar-good-bg-color);
   }
   &.is-strong {
-    border-color: var(--password-strength-bar--strong-border-color);
-    background-color: var(--password-strength-bar--strong-bg-color);
+    border-color: var(--password-strength-bar-strong-border-color);
+    background-color: var(--password-strength-bar-strong-bg-color);
   }
 }
 
@@ -165,11 +162,9 @@
     }
   }
 
-  .password-strength__bar {
-    @nest .is-initial & {
-      border-color: transparent;
-      background-color: transparent;
-    }
+  .is-initial .password-strength__bar {
+    border-color: transparent;
+    background-color: transparent;
   }
 }