Fix focus style for pill links

Includes changes for:
- pills as page navigation
- pills as separate items
- big number links

app/assets/stylesheets/components/big-number.scss

@@ -97,7 +97,10 @@
 
       color: $light-blue-25;
 
-      .big-number {
+      .big-number,
+      .big-number-number,
+      .big-number-smaller,
+      .big-number-label {
         color: $light-blue-25;
       }
 
@@ -105,7 +108,18 @@
 
     &:active,
     &:focus {
-      outline: 3px solid $yellow;
+      background: $govuk-focus-colour;
+      border: none;
+      padding: 2px; /* replace the spacing the border gave */
+      /* override the default focus style to inset the underline */
+      box-shadow: inset 0 -4px $govuk-focus-text-colour;
+
+      .big-number-number,
+      .big-number-smaller,
+      .big-number-label {
+        color: $govuk-focus-text-colour;
+        text-decoration: none;
+      }
     }
 
     .big-number,

app/assets/stylesheets/components/pill.scss

@@ -55,6 +55,11 @@
     &:active,
     &:focus {
       z-index: 10;
+      color: $govuk-focus-text-colour;
+      /* override default focus styles to inset bottom underline */
+      box-shadow: inset 0 -4px $govuk-focus-text-colour;
+      border: none;
+      padding: 12px 2px; /* compensate for lack of border with padding */
     }
   }
 
@@ -77,7 +82,10 @@
     &:active,
     &:focus {
       z-index: 1000;
-      outline: 3px solid $yellow;
+      color: $govuk-focus-text-colour;
+      border: solid 2px $black;
+      padding: 10px 0px; /* reset padding to default */
+      box-shadow: inset 0 -2px $govuk-focus-text-colour; /* remove bottom border from underline */
     }
 
   }
@@ -94,6 +102,13 @@
 
   }
 
+  &-item,
+  &-item--selected {
+    &:focus .pill-item__label {
+      text-decoration: none;
+    }
+  }
+
   &-item--centered {
     text-align: center;
     padding-left: 0;
@@ -117,10 +132,17 @@
       text-decoration: underline;
     }
 
-    &:hover,
+    &:hover {
+      color: $light-blue-25;
+    }
+
     &:focus,
     &:link:focus {
-      color: $light-blue-25;
+      color: $govuk-focus-text-colour;
+      text-decoration: none;
+      background: $govuk-focus-colour;
+      /* override default focus style to inset bottom underline */
+      box-shadow: inset 0 -4px $govuk-focus-text-colour;
     }
 
   }