Issue #2409069 by andybroomfield, idebr, emma.maria, LewisNyman, zach.bimson, Schnitzel, theMusician: Clean up the "skip-link" component in Bartik

core/themes/bartik/css/components/skip-link.css

@@ -1,37 +1,25 @@
-/* ------------------ Skip link ----------------- */
+/**
+ * @file
+ * Styles for the skip link.
+ */
 
-.skip-link,
-.skip-link.visually-hidden.focusable {
-  left: 50%; /* LTR */
-  margin-left: -5.25em; /* LTR */
-  margin-top: 0;
-  position: absolute !important;
-  width: auto;
+.skip-link {
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
   z-index: 50;
-}
-[dir="rtl"] .skip-link,
-[dir="rtl"] .skip-link.visually-hidden.focusable {
-  left: auto;
-  right: 50%;
-  margin-left: 0;
-  margin-right: -5.25em;
-}
-.skip-link,
-.skip-link:link,
-.skip-link:visited {
   background: #444;
   background: rgba(0, 0, 0, 0.6);
-  color: #fff;
-  display: inline-block;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 0.94em;
-  line-height: 1.7;
-  padding: 1px 10px 2px 10px;
-  text-decoration: none;
+  line-height: 1.7em;
+  padding: 1px 10px 2px;
   border-radius: 0 0 10px 10px;
-}
-.skip-link:hover,
-.skip-link:active,
-.skip-link:focus {
+  border-bottom-width: 0;
   outline: 0;
 }
+.skip-link.visually-hidden.focusable:focus {
+  position: absolute !important;
+  color: #fff;
+}