diff --git a/core/themes/claro/css/components/file.css b/core/themes/claro/css/components/file.css
index e42fbead76..020e5029e7 100644
--- a/core/themes/claro/css/components/file.css
+++ b/core/themes/claro/css/components/file.css
@@ -10,19 +10,22 @@
  * Extends styles of the file link.
  */
 
+[dir="ltr"] .file {
+  padding-left: var(--space-l);
+}
+
+[dir="rtl"] .file {
+  padding-right: var(--space-l);
+}
+
 .file {
-  min-height: calc(var(--space-m) + 0.0625rem);
-  padding-left: var(--space-l); /* LTR */
+  min-height: calc(var(--space-m) + 0.0625rem); /* LTR */
   background-position: left 0.0625rem;
   background-size: var(--space-m) var(--space-m);
   font-size: var(--font-size-s);
   line-height: calc(18rem / 16);
 }
 
-[dir="rtl"] .file {
-  padding-right: var(--space-l);
-}
-
 .file__size {
   color: var(--color-gray-800);
 }
diff --git a/core/themes/claro/css/components/file.pcss.css b/core/themes/claro/css/components/file.pcss.css
index c3c437f05c..8fbad0ae34 100644
--- a/core/themes/claro/css/components/file.pcss.css
+++ b/core/themes/claro/css/components/file.pcss.css
@@ -4,16 +4,13 @@
  */
 
 .file {
-  min-height: calc(var(--space-m) + 0.0625rem);
-  padding-left: var(--space-l); /* LTR */
+  min-block-size: calc(var(--space-m) + 0.0625rem);
+  padding-inline-start: var(--space-l); /* LTR */
   background-position: left 0.0625rem;
   background-size: var(--space-m) var(--space-m);
   font-size: var(--font-size-s);
   line-height: calc(18rem / 16);
 }
-[dir="rtl"] .file {
-  padding-right: var(--space-l);
-}
 
 .file__size {
   color: var(--color-gray-800);