diff --git a/core/themes/claro/css/components/tablesort-indicator.css b/core/themes/claro/css/components/tablesort-indicator.css
index 88f971423465782ba695f8ea2d51ca2f2907cd26..aab5fdbfd53274d34f137f60700c38081f2b21c8 100644
--- a/core/themes/claro/css/components/tablesort-indicator.css
+++ b/core/themes/claro/css/components/tablesort-indicator.css
@@ -15,8 +15,8 @@
   top: 50%;
   inset-inline-end: 1rem;
   width: 0.875rem; /* 14px */
-  height: 1rem; /* 16px */
-  margin-top: -0.5rem; /* -8px */
+  height: var(--space-m);
+  margin-block-start: -0.5rem; /* -8px */
   opacity: 0.5;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3e%3cpath d='M1.75.25v1.5h10.5V.25zm0 3v1.5h7.5v-1.5zm0 3v1.5h4.5v-1.5z' fill='%23000f33'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
diff --git a/core/themes/claro/css/components/tablesort-indicator.pcss.css b/core/themes/claro/css/components/tablesort-indicator.pcss.css
index 6b3a7dcc58bf0dcb4452898be199d0942f111c2d..a818d076f8bd6d3dad789ea903a1b94a6b0cf90e 100644
--- a/core/themes/claro/css/components/tablesort-indicator.pcss.css
+++ b/core/themes/claro/css/components/tablesort-indicator.pcss.css
@@ -8,8 +8,8 @@
   top: 50%;
   inset-inline-end: 1rem;
   width: 0.875rem; /* 14px */
-  height: 1rem; /* 16px */
-  margin-top: -0.5rem; /* -8px */
+  height: var(--space-m);
+  margin-block-start: -0.5rem; /* -8px */
   opacity: 0.5;
   background-image: url(../../images/icons/000f33/sort--inactive--ltr.svg);
   background-repeat: no-repeat;