Issue #3293398 by Aditya4478, Gauravvvv, _utsavsharma, Sakthivel M,...

Issue #3293398 by Aditya4478, Gauravvvv, _utsavsharma, Sakthivel M, sasanikolic, smustgrave: Refactor Claro's file stylesheet

core/themes/claro/css/components/file.css

@@ -11,18 +11,18 @@
  */
 
 .file {
-  min-height: calc(var(--space-m) + 0.0625rem);
-  padding-left: var(--space-l); /* LTR */
-  background-position: left 0.0625rem;
+  --file-offset: 0.0625rem;
+  --file-font-size: var(--font-size-s);
+  --file-size-color: var(--color-gray-800);
+
+  min-block-size: calc(var(--space-m) + var(--file-offset));
+  padding-inline-start: var(--space-l);
+  background-position: left var(--file-offset);
   background-size: var(--space-m) var(--space-m);
-  font-size: var(--font-size-s);
+  font-size: var(--file-font-size);
   line-height: calc(18rem / 16);
 }
 
-[dir="rtl"] .file {
-  padding-right: var(--space-l);
-}
-
 .file__size {
-  color: var(--color-gray-800);
+  color: var(--file-size-color);
 }

core/themes/claro/css/components/file.pcss.css

@@ -4,17 +4,18 @@
  */
 
 .file {
-  min-height: calc(var(--space-m) + 0.0625rem);
-  padding-left: var(--space-l); /* LTR */
-  background-position: left 0.0625rem;
+  --file-offset: 0.0625rem;
+  --file-font-size: var(--font-size-s);
+  --file-size-color: var(--color-gray-800);
+
+  min-block-size: calc(var(--space-m) + var(--file-offset));
+  padding-inline-start: var(--space-l);
+  background-position: left var(--file-offset);
   background-size: var(--space-m) var(--space-m);
-  font-size: var(--font-size-s);
+  font-size: var(--file-font-size);
   line-height: calc(18rem / 16);
 }
-[dir="rtl"] .file {
-  padding-right: var(--space-l);
-}
 
 .file__size {
-  color: var(--color-gray-800);
+  color: var(--file-size-color);
 }