Update tablist component styling to account for a-z tabs

Author: paulrobertlloyd

public/assets/styles/components/tablist.css

@@ -1,29 +1,44 @@
 .c-tablist {
-  --focus-outline-offset: -0.25em;
+  --focus-outline-offset: 0;
+  --color-link: var(--color-neutral-dark);
   --link-decoration: none;
 
-  box-shadow: inset 0 -1px 0 var(--color-neutral-dark-alpha);
-  margin-block-end: var(--space-s);
-  padding-inline: var(--page-gutter);
+  display: flex;
+  font: var(--font-label);
+  font-size: var(--font-size-s);
+  margin-block: var(--space-m);
 
   & ul {
+    align-items: start;
     display: flex;
-    justify-content: center;
+    flex-wrap: wrap;
+    margin-inline: auto;
+    row-gap: var(--space-s);
+  }
+
+  & li {
+    min-inline-size: 3rem;
+
+    &:not(:first-child) {
+      box-shadow: inset 1px 0 var(--color-neutral-dark-alpha);
+    }
   }
 
   & a {
     display: block;
-    padding-block: var(--space-m);
-    padding-inline: var(--space-xs);
+    padding-block: var(--space-s);
+    padding-inline: var(--space-m);
     text-align: center;
-    white-space: nowrap;
 
-    @media screen and (--from-s) {
-      padding-inline: var(--space-m);
+    &[aria-current] {
+      background-color: var(--color-neutral-dark-alpha);
+      box-shadow: inset 0 1px 0 var(--color-neutral-dark-alpha);
+      letter-spacing: -0.0313rem;
     }
 
-    &[aria-current] {
-      box-shadow: inset 0 -2px 0 var(--color-neutral-light);
+    &:focus {
+      position: relative;
+      z-index: 1;
     }
   }
 }