diff --git a/core/themes/claro/css/components/form--text.css b/core/themes/claro/css/components/form--text.css
index 561880ef45..a976c865b7 100644
--- a/core/themes/claro/css/components/form--text.css
+++ b/core/themes/claro/css/components/form--text.css
@@ -6,9 +6,9 @@
  */
 
 /**
- * @file
- * Text and textarea input elements.
- */
+* @file
+* Text and textarea input elements.
+*/
 
 .form-element {
   box-sizing: border-box;
@@ -22,9 +22,43 @@
   font-size: var(--input-font-size);
   line-height: var(--input-line-height);
   -webkit-appearance: none;
-  appearance: none; /* Being able to control inner box shadow on iOS. */
+  appearance: none /* Being able to control inner box shadow on iOS. */
+
+  /**
+   * 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.error {
+    border-width: var(--input--error-border-size);
+    border-color: var(--input--error-border-color);
+  }
+
+.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);
+  }
+
 .no-touchevents .form-element--extrasmall,
 .no-touchevents .form-element[name$="][_weight]"] {
   min-height: calc(((var(--input--extrasmall-padding-vertical) + var(--input-border-size)) * 2) + var(--input--extrasmall-line-height)); /* iOS. */
@@ -66,15 +100,6 @@
   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.
  */
@@ -83,59 +108,21 @@
   vertical-align: top;
 }
 
-/**
- * Target IE 11 and Edge.
- *
- * Reduce the vertical padding of the file input element to make the browse
- * button fit into the needed input height.
- */
-
 /* stylelint-disable-next-line selector-type-no-unknown */
 
-_:-ms-fullscreen,
 :root .form-element--type-file {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
 
-/**
- * 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.error {
-  border-width: var(--input--error-border-size);
-  border-color: var(--input--error-border-color);
-}
-
-.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);
+  border-color: var(--input--error-border-color)
 }
 
+.form-element--type-textarea.error + .cke + .ck-editor > .ck-editor__main {
+    border: var(--input--error-border-size) solid var(--input--error-border-color);
+  }
+
 .form-element[disabled] {
   color: var(--input--disabled-fg-color);
   border-color: var(--input--disabled-border-color);
@@ -151,19 +138,25 @@ _:-ms-fullscreen,
 
 @media screen and (max-width: 37.5rem) {
   /* Number, date and time are skipped here */
-  .form-element {
-    float: none;
-    width: 100%;
-    margin-top: 0.75rem;
+  [dir="ltr"] .form-element {
+    margin-left: 0;
+  }
+  [dir="rtl"] .form-element {
     margin-right: 0;
+  }
+  [dir="ltr"] .form-element {
+    margin-right: 0;
+  }
+  [dir="rtl"] .form-element {
     margin-left: 0;
   }
-  .form-element:first-child,
-  .form-item__label + .form-element {
-    margin-top: 0;
+  .form-element {
+    float: none;
+    width: 100%;
+    margin-top: 0.75rem
   }
-}
-
-.form-element--type-textarea.error + .ck-editor > .ck-editor__main {
-  border: var(--input--error-border-size) solid var(--input--error-border-color);
+    .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 6bb2213207..5174922c2c 100644
--- a/core/themes/claro/css/components/form--text.pcss.css
+++ b/core/themes/claro/css/components/form--text.pcss.css
@@ -1,12 +1,12 @@
 /**
- * @file
- * Text and textarea input elements.
- */
+* @file
+* Text and textarea input elements.
+*/
 
 .form-element {
   box-sizing: border-box;
-  max-width: 100%;
-  min-height: calc(((var(--input-padding-vertical) + var(--input-border-size)) * 2) + var(--input-line-height)); /* iOS. */
+  max-inline-size: 100%;
+  min-block-size: calc(((var(--input-padding-vertical) + var(--input-border-size)) * 2) + var(--input-line-height)); /* iOS. */
   padding: var(--input-padding-vertical) var(--input-padding-horizontal);
   color: var(--input-fg-color);
   border: var(--input-border-size) solid var(--input-border-color);
@@ -15,11 +15,39 @@
   font-size: var(--input-font-size);
   line-height: var(--input-line-height);
   appearance: none; /* Being able to control inner box shadow on iOS. */
+
+  /**
+   * States.
+   */
+  &: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);
+  }
+
+  &.error {
+    border-width: var(--input--error-border-size);
+    border-color: var(--input--error-border-color);
+  }
+  &.error:hover {
+    box-shadow: none;
+  }
+  &.error:hover:focus {
+    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus);
+  }
 }
 
 .no-touchevents .form-element--extrasmall,
 .no-touchevents .form-element[name$="][_weight]"] {
-  min-height: calc(((var(--input--extrasmall-padding-vertical) + var(--input-border-size)) * 2) + var(--input--extrasmall-line-height)); /* iOS. */
+  min-block-size: calc(((var(--input--extrasmall-padding-vertical) + var(--input-border-size)) * 2) + var(--input--extrasmall-line-height)); /* iOS. */
   padding: var(--input--extrasmall-padding-vertical) var(--input--extrasmall-padding-horizontal);
   font-size: var(--input--extrasmall-font-size);
   line-height: var(--input--extrasmall-line-height);
@@ -41,25 +69,18 @@
   vertical-align: -webkit-baseline-middle; /* Prevent iOS input jump while filling. */
 }
 .form-element--type-date {
-  min-width: 9.5rem; /* Prevent input width change while filling. */
+  min-inline-size: 9.5rem; /* Prevent input width change while filling. */
 }
 .form-element--type-time {
-  min-width: 7.5rem; /* Prevent input width change while filling. */
+  min-inline-size: 7.5rem; /* Prevent input width change while filling. */
 }
 
 .form-element--type-color {
-  min-width: 3rem; /* Bigger input for webkit */
+  min-inline-size: 3rem; /* Bigger input for webkit */
   padding: 0; /* Bigger pickable area */
   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.
  */
@@ -67,48 +88,19 @@
   vertical-align: top;
 }
 
-/**
- * Target IE 11 and Edge.
- *
- * Reduce the vertical padding of the file input element to make the browse
- * button fit into the needed input height.
- */
 /* stylelint-disable-next-line selector-type-no-unknown */
-_:-ms-fullscreen,
-:root .form-element--type-file {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
 
-/**
- * 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);
+:root .form-element--type-file {
+  padding-block-start: 0.25rem;
+  padding-block-end: 0.25rem;
 }
 
-.form-element.error {
-  border-width: var(--input--error-border-size);
-  border-color: var(--input--error-border-color);
-}
-.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);
+
+  & + .ck-editor > .ck-editor__main {
+    border: var(--input--error-border-size) solid var(--input--error-border-color);
+  }
 }
 
 .form-element[disabled] {
@@ -128,16 +120,12 @@ _:-ms-fullscreen,
   .form-element {
     float: none;
     width: 100%;
-    margin-top: 0.75rem;
-    margin-right: 0;
-    margin-left: 0;
-  }
-  .form-element:first-child,
-  .form-item__label + .form-element {
-    margin-top: 0;
+    margin-block-start: 0.75rem;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+    &:first-child,
+    & .form-item__label {
+      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);
-}