diff --git a/core/themes/claro/css/components/views-exposed-form.css b/core/themes/claro/css/components/views-exposed-form.css
index 1dcd477e563..696188afa94 100644
--- a/core/themes/claro/css/components/views-exposed-form.css
+++ b/core/themes/claro/css/components/views-exposed-form.css
@@ -27,8 +27,7 @@
 .views-exposed-form.views-exposed-form {
   display: flex;
   flex-wrap: wrap;
-  margin-top: var(--space-l);
-  margin-bottom: var(--space-l);
+  margin-block: var(--space-l);
   padding: var(--space-xs) var(--space-l) var(--space-l) var(--space-l);
   border: var(--details-border-size) solid var(--details-border-color);
   border-radius: var(--details-border-size-radius);
@@ -42,34 +41,20 @@
 
 .views-exposed-form__item.views-exposed-form__item {
   max-width: 100%;
-  margin: var(--space-s) var(--space-xs) 0 0; /* LTR */
-}
-
-[dir="rtl"] .views-exposed-form__item.views-exposed-form__item {
-  margin-right: 0;
-  margin-left: var(--space-xs);
+  margin-block: var(--space-s) 0;
+  margin-inline: 0 var(--space-xs);
 }
 
 .views-exposed-form__item--preceding-actions.views-exposed-form__item--preceding-actions {
-  margin-right: var(--space-m); /* LTR */
-}
-
-[dir="rtl"] .views-exposed-form__item--preceding-actions.views-exposed-form__item--preceding-actions {
-  margin-right: 0;
-  margin-left: var(--space-m);
+  margin-inline-end: var(--space-m);
 }
 
 .views-exposed-form__item--actions.views-exposed-form__item--actions .button {
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-block: 0;
 }
 
 .views-exposed-form__item--actions.views-exposed-form__item--actions .button:last-child {
-  margin-right: 0;
-}
-
-[dir="rtl"] .views-exposed-form__item--actions.views-exposed-form__item--actions:last-child {
-  margin-left: 0;
+  margin-inline-end: 0;
 }
 
 .views-exposed-form .form-item--no-label,
diff --git a/core/themes/claro/css/components/views-exposed-form.pcss.css b/core/themes/claro/css/components/views-exposed-form.pcss.css
index 5a1b1dc18d2..94777482baa 100644
--- a/core/themes/claro/css/components/views-exposed-form.pcss.css
+++ b/core/themes/claro/css/components/views-exposed-form.pcss.css
@@ -17,48 +17,45 @@
  * has been resolved.
  */
 
-.views-exposed-form.views-exposed-form {
-  display: flex;
-  flex-wrap: wrap;
-  margin-top: var(--space-l);
-  margin-bottom: var(--space-l);
-  padding: var(--space-xs) var(--space-l) var(--space-l) var(--space-l);
-  border: var(--details-border-size) solid var(--details-border-color);
-  border-radius: var(--details-border-size-radius);
-  background-color: var(--color-white);
-  box-shadow: var(--details-box-shadow);
+.views-exposed-form {
+  &.views-exposed-form {
+    display: flex;
+    flex-wrap: wrap;
+    margin-block: var(--space-l);
+    padding: var(--space-xs) var(--space-l) var(--space-l) var(--space-l);
+    border: var(--details-border-size) solid var(--details-border-color);
+    border-radius: var(--details-border-size-radius);
+    background-color: var(--color-white);
+    box-shadow: var(--details-box-shadow);
+  }
 }
-.views-exposed-form--preview.views-exposed-form--preview {
-  margin-top: 0;
+.views-exposed-form--preview {
+  &.views-exposed-form--preview {
+    margin-top: 0;
+  }
 }
 
-.views-exposed-form__item.views-exposed-form__item {
-  max-width: 100%;
-  margin: var(--space-s) var(--space-xs) 0 0; /* LTR */
-}
-[dir="rtl"] .views-exposed-form__item.views-exposed-form__item {
-  margin-right: 0;
-  margin-left: var(--space-xs);
+.views-exposed-form__item {
+  &.views-exposed-form__item {
+    max-width: 100%;
+    margin-block: var(--space-s) 0;
+    margin-inline: 0 var(--space-xs);
+  }
 }
 
-.views-exposed-form__item--preceding-actions.views-exposed-form__item--preceding-actions {
-  margin-right: var(--space-m); /* LTR */
-}
-[dir="rtl"] .views-exposed-form__item--preceding-actions.views-exposed-form__item--preceding-actions {
-  margin-right: 0;
-  margin-left: var(--space-m);
+.views-exposed-form__item--preceding-actions {
+  &.views-exposed-form__item--preceding-actions {
+    margin-inline-end: var(--space-m);
+  }
 }
 
-.views-exposed-form__item--actions.views-exposed-form__item--actions .button {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.views-exposed-form__item--actions.views-exposed-form__item--actions .button:last-child {
-  margin-right: 0;
-}
-[dir="rtl"] .views-exposed-form__item--actions.views-exposed-form__item--actions:last-child {
-  margin-left: 0;
+.views-exposed-form__item--actions {
+  &.views-exposed-form__item--actions .button {
+    margin-block: 0;
+    &:last-child {
+      margin-inline-end: 0;
+    }
+  }
 }
 
 .views-exposed-form .form-item--no-label,