diff --git a/core/profiles/demo_umami/themes/umami/css/components/navigation/skip-link/skip-link.css b/core/profiles/demo_umami/themes/umami/css/components/navigation/skip-link/skip-link.css
index 4f93f1fe0c7a0f8e65a7f8911e34f5069b987a2c..1dd4758ced042585501c657ab2355e94faf7ab10 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/navigation/skip-link/skip-link.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/navigation/skip-link/skip-link.css
@@ -4,11 +4,9 @@
  */
 
 .skip-link {
-  z-index: 50;
-  left: 50%;
+  z-index: 503;
+  inset-inline-start: 0;
   padding: 1px 10px 2px;
-  -webkit-transform: translateX(-50%);
-  transform: translateX(-50%);
   border: 1px solid #444;
   border-top-width: 0;
   border-radius: 0 0 10px 10px;
diff --git a/core/themes/claro/css/components/skip-link.css b/core/themes/claro/css/components/skip-link.css
index 8ec9a949674d3905fc4cde39110128aafbb16edd..34ca05bc57a36a722e2a4ab896a6c3e37942aab1 100644
--- a/core/themes/claro/css/components/skip-link.css
+++ b/core/themes/claro/css/components/skip-link.css
@@ -19,13 +19,16 @@
 }
 
 .skip-link {
-  z-index: 50;
-  left: 50%;
+  z-index: 503;
+  top: 0;
+  left: 0; /* LTR */
   padding: 1px 0.625rem 2px;
-  transform: translateX(-50%);
   color: var(--skip-link-color);
-  border-radius: 0 0 0.625rem 0.625rem;
+  border-radius: 0 0 0.625rem 0; /* LTR */
   background: var(--skip-link-bg-color);
+  box-shadow:
+    0 0 0 2px var(--color-white),
+    0 0 0 5px var(--color-focus);
   font-size: 0.94em;
 }
 
@@ -43,3 +46,9 @@
 .skip-link.visually-hidden.focusable:focus {
   position: absolute !important;
 }
+
+[dir="rtl"] .skip-link {
+  right: 0;
+  left: auto;
+  border-radius: 0 0 0 0.625rem;
+}
diff --git a/core/themes/claro/css/components/skip-link.pcss.css b/core/themes/claro/css/components/skip-link.pcss.css
index 8bc467a07fc4007a48516079cf3ebf5a9675c1bd..1b50e5e5d0132de9d69a615978c5edd9fb09ecae 100644
--- a/core/themes/claro/css/components/skip-link.pcss.css
+++ b/core/themes/claro/css/components/skip-link.pcss.css
@@ -12,13 +12,16 @@
 }
 
 .skip-link {
-  z-index: 50;
-  left: 50%;
+  z-index: 503;
+  top: 0;
+  left: 0; /* LTR */
   padding: 1px 10px 2px;
-  transform: translateX(-50%);
   color: var(--skip-link-color);
-  border-radius: 0 0 10px 10px;
+  border-radius: 0 0 10px 0; /* LTR */
   background: var(--skip-link-bg-color);
+  box-shadow:
+    0 0 0 2px var(--color-white),
+    0 0 0 5px var(--color-focus);
   font-size: 0.94em;
   &:hover,
   &:active {
@@ -32,3 +35,8 @@
     position: absolute !important;
   }
 }
+[dir="rtl"] .skip-link {
+  right: 0;
+  left: auto;
+  border-radius: 0 0 0 10px;
+}