Align breadcrumb back link with back link

Author: colinrotherham

packages/components/breadcrumb/_index.scss

@@ -41,7 +41,7 @@
   @include nhsuk-font(16); // [4]
 
   &:not(:last-child)::after {
-    background: url("data:image/svg+xml,%3Csvg class='nhsuk-icon nhsuk-icon__chevron-right' xmlns='http://www.w3.org/2000/svg' fill='%23aeb7bd' height='18' width='18' viewBox='0 0 24 24' aria-hidden='true'%3E%3Cpath d='M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z'%3E%3C/path%3E%3C/svg%3E")
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23aeb7bd' height='18' width='18' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z'%3E%3C/path%3E%3C/svg%3E")
       right 0 top 0 no-repeat;
     content: "";
     display: inline-block;
@@ -59,33 +59,54 @@
 
 .nhsuk-breadcrumb__back {
   margin: 0;
-  padding-left: nhsuk-spacing(3);
-  position: relative;
-  @include nhsuk-font(16); // [4]
+  line-height: 1;
 
   @include nhsuk-media-query($from: tablet) {
     display: none; // [5]
   }
-
-  &::before {
-    background: url("data:image/svg+xml,%3Csvg class='nhsuk-icon nhsuk-icon__chevron-left' xmlns='http://www.w3.org/2000/svg' fill='%23005eb8' height='24' width='24' viewBox='8 0 24 24' aria-hidden='true'%3E%3Cpath d='M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z'%3E%3C/path%3E%3C/svg%3E")
-      no-repeat;
-    content: "";
-    display: inline-block;
-    height: 18px;
-    left: 0;
-    position: absolute;
-    top: -1px;
-    width: 10px;
-  }
 }
 
 .nhsuk-breadcrumb__backlink {
+  $icon-background: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23005eb8' height='24' width='24' viewBox='8 0 24 24'%3E%3Cpath d='M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z'%3E%3C/path%3E%3C/svg%3E";
+  $icon-background-hover: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%237c2855' height='24' width='24' viewBox='8 0 24 24'%3E%3Cpath d='M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z'%3E%3C/path%3E%3C/svg%3E";
+  $icon-background-focus: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23212b32' height='24' width='24' viewBox='8 0 24 24'%3E%3Cpath d='M8.5 12c0-.3.1-.5.3-.7l5-5c.4-.4 1-.4 1.4 0s.4 1 0 1.4L10.9 12l4.3 4.3c.4.4.4 1 0 1.4s-1 .4-1.4 0l-5-5c-.2-.2-.3-.4-.3-.7z'%3E%3C/path%3E%3C/svg%3E";
+
+  background: none;
+  border: 0;
+  cursor: pointer;
+  display: inline-block;
+  padding: 0 0 0 16px;
+  position: relative;
   text-decoration: none;
 
   @include nhsuk-link-style-no-visited-state;
+  @include nhsuk-font(16); // [4]
+
+  &::before {
+    background: url($icon-background) no-repeat 8px 0;
+    content: "";
+    display: block;
+
+    height: 24px;
+    left: -8px;
+    position: absolute;
+    top: -1px;
+    width: 24px;
+
+    @include nhsuk-media-query($from: tablet) {
+      top: 0; // [3]
+    }
+  }
 
   &:hover {
     text-decoration: underline;
   }
+
+  &:hover::before {
+    background-image: url($icon-background-hover);
+  }
+
+  &:focus::before {
+    background-image: url($icon-background-focus);
+  }
 }