diff --git a/core/themes/claro/css/components/file.css b/core/themes/claro/css/components/file.css
index 27bc76fb8a..a18216c621 100644
--- a/core/themes/claro/css/components/file.css
+++ b/core/themes/claro/css/components/file.css
@@ -11,9 +11,11 @@
  */
 
 .file {
-  min-height: 1.0625rem;
+  --file-offset: 0.0625rem;
+
+  min-height: calc(1rem + var(--file-offset));
   padding-left: 1.5rem; /* LTR */
-  background-position: left 0.0625rem;
+  background-position: left var(--file-offset);
   background-size: 1rem 1rem;
   font-size: 0.889rem;
   line-height: 1.125rem;
diff --git a/core/themes/claro/css/components/file.pcss.css b/core/themes/claro/css/components/file.pcss.css
index 0c277eb557..ef36d4dd56 100644
--- a/core/themes/claro/css/components/file.pcss.css
+++ b/core/themes/claro/css/components/file.pcss.css
@@ -6,9 +6,11 @@
 @import "../base/variables.pcss.css";
 
 .file {
-  min-height: calc(var(--space-m) + 0.0625rem);
+  --file-offset: 0.0625rem;
+
+  min-height: calc(var(--space-m) + var(--file-offset));
   padding-left: var(--space-l); /* LTR */
-  background-position: left 0.0625rem;
+  background-position: left var(--file-offset);
   background-size: var(--space-m) var(--space-m);
   font-size: var(--font-size-s);
   line-height: calc(18rem / 16);