diff --git a/core/themes/claro/css/components/form--text.css b/core/themes/claro/css/components/form--text.css
index a395d391a8..9c3c4e72c4 100644
--- a/core/themes/claro/css/components/form--text.css
+++ b/core/themes/claro/css/components/form--text.css
@@ -66,22 +66,14 @@
   text-indent: calc(0.75rem - 1px); /* Text-input fallback for non-supporting browsers like Safari */
 }
 
-/**
- * Reset value border and background of the file input on IE11 and Edge.
- */
-
 .form-element--type-file::-ms-value {
-  border: 0;
-  background: inherit;
-}
-
-/**
- * Better upload button alignment for Chrome.
- */
+    border: 0;   /* Reset value border and background of the file input on IE11 and Edge. */
+    background: inherit;
+  }
 
 .form-element--type-file::-webkit-file-upload-button {
-  vertical-align: top;
-}
+    vertical-align: top;   /* Better upload button alignment for Chrome. */
+  }
 
 /**
  * Target IE 11 and Edge.
@@ -103,21 +95,21 @@ _:-ms-fullscreen,
  */
 
 .form-element:active {
-  border-color: #003ecc;
-}
+    border-color: #003ecc;
+  }
 
 .form-element:hover {
-  border-color: #232429;
-  box-shadow: inset 0 0 0 1px #232429;
-}
+    border-color: #232429;
+    box-shadow: inset 0 0 0 1px #232429;
+  }
 
 .form-element:focus {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
-}
+    box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+  }
 
 .form-element:hover:focus {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #232429;
-}
+    box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #232429;
+  }
 
 .form-element.error {
   border-width: 2px;
@@ -125,24 +117,27 @@ _:-ms-fullscreen,
 }
 
 .form-element.error:hover {
-  box-shadow: none;
-}
+    box-shadow: none;
+  }
 
 .form-element.error:hover:focus {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
-}
+    box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769;
+  }
 
 .form-element--type-textarea.error + .cke {
-  border-color: #dc2323;
-}
+    border-color: #dc2323;
+  }
+
+.form-element--type-textarea.error + .ck-editor > .ck-editor__main {
+    border: 2px solid #dc2323;
+  }
 
 .form-element[disabled] {
   color: #828388;
   border-color: #bababf;
   background-color: #f2f2f3;
   box-shadow: none;
-  /* https://stackoverflow.com/q/262158#answer-23511280 */
-  -webkit-text-fill-color: #828388;
+  -webkit-text-fill-color: #828388; /* https://stackoverflow.com/q/262158#answer-23511280 */
 }
 
 /**
@@ -158,12 +153,8 @@ _:-ms-fullscreen,
     margin-right: 0;
     margin-left: 0;
   }
-  .form-element:first-child,
-  .form-item__label + .form-element {
-    margin-top: 0;
-  }
-}
-
-.form-element--type-textarea.error + .ck-editor > .ck-editor__main {
-  border: 2px solid #dc2323;
+    .form-element:first-child,
+    .form-element + .form-item__label {
+      margin-top: 0;
+    }
 }
diff --git a/core/themes/claro/css/components/form--text.pcss.css b/core/themes/claro/css/components/form--text.pcss.css
index 368cf5b5f8..aa93d904fb 100644
--- a/core/themes/claro/css/components/form--text.pcss.css
+++ b/core/themes/claro/css/components/form--text.pcss.css
@@ -55,18 +55,14 @@
   text-indent: calc(0.75rem - var(--input-border-size)); /* Text-input fallback for non-supporting browsers like Safari */
 }
 
-/**
- * Reset value border and background of the file input on IE11 and Edge.
- */
-.form-element--type-file::-ms-value {
-  border: 0;
-  background: inherit;
-}
-/**
- * Better upload button alignment for Chrome.
- */
-.form-element--type-file::-webkit-file-upload-button {
-  vertical-align: top;
+.form-element--type-file {
+  &::-ms-value {
+    border: 0;   /* Reset value border and background of the file input on IE11 and Edge. */
+    background: inherit;
+  }
+  &::-webkit-file-upload-button {
+    vertical-align: top;   /* Better upload button alignment for Chrome. */
+  }
 }
 
 /**
@@ -85,32 +81,41 @@ _:-ms-fullscreen,
 /**
  * States.
  */
-.form-element:active {
-  border-color: var(--input--focus-border-color);
-}
-.form-element:hover {
-  border-color: var(--input--hover-border-color);
-  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);
-}
-.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);
-}
 
+.form-element {
+  &:active {
+    border-color: var(--input--focus-border-color);
+  }
+  &:hover {
+    border-color: var(--input--hover-border-color);
+    box-shadow: inset 0 0 0 var(--input-border-size) var(--input--hover-border-color);
+  }
+  &:focus {
+    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);
+  }
+  &: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);
+  }
+}
 .form-element.error {
   border-width: var(--input--error-border-size);
   border-color: var(--input--error-border-color);
+
+  &:hover {
+    box-shadow: none;
+  }
+  &:hover:focus {
+    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);
+  }
 }
-.form-element.error:hover {
-  box-shadow: none;
-}
-.form-element.error:hover: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);
+
+.form-element--type-textarea.error {
+  & + .cke {
+    border-color: var(--input--error-border-color);
+  }
+  & + .ck-editor > .ck-editor__main {
+    border: var(--input--error-border-size) solid var(--input--error-border-color);
+  }
 }
 
 .form-element[disabled] {
@@ -118,8 +123,7 @@ _:-ms-fullscreen,
   border-color: var(--input--disabled-border-color);
   background-color: var(--input--disabled-bg-color);
   box-shadow: none;
-  /* https://stackoverflow.com/q/262158#answer-23511280 */
-  -webkit-text-fill-color: var(--input--disabled-fg-color);
+  -webkit-text-fill-color: var(--input--disabled-fg-color); /* https://stackoverflow.com/q/262158#answer-23511280 */
 }
 
 /**
@@ -133,13 +137,9 @@ _:-ms-fullscreen,
     margin-top: 0.75rem;
     margin-right: 0;
     margin-left: 0;
+    &:first-child,
+    & + .form-item__label {
+      margin-top: 0;
+    }
   }
-  .form-element:first-child,
-  .form-item__label + .form-element {
-    margin-top: 0;
-  }
-}
-
-.form-element--type-textarea.error + .ck-editor > .ck-editor__main {
-  border: var(--input--error-border-size) solid var(--input--error-border-color);
 }