Add customisation variables

sass/components/breadcrumb.sass

@@ -1,3 +1,9 @@
+$breadcrumb-item-color: $text-light !default
+$breadcrumb-item-hover-color: $link-hover !default
+$breadcrumb-item-active-color: $text-strong !default
+
+$breadcrumb-item-separator-color: $text !default
+
 .breadcrumb
   +block
   +unselectable
@@ -9,23 +15,23 @@
   white-space: nowrap
   a
     align-items: center
-    color: $text-light
+    color: $breadcrumb-item-color
     display: flex
     justify-content: center
     padding: 0.5em 0.75em
     &:hover
-      color: $link-hover
+      color: $breadcrumb-item-hover-color
   li
     align-items: center
     display: flex
     &.is-active
       a
-        color: $text-strong
+        color: $breadcrumb-item-active-color
         cursor: default
         pointer-events: none
-    & + li:before
-      color: $text
-      content: '\0002f'
+    & + li::before
+      color: $breadcrumb-item-separator-color
+      content: "\0002f"
   ul, ol
     align-items: center
     display: flex
@@ -53,14 +59,14 @@
     font-size: $size-large
   // Styles
   &.has-arrow-separator
-    li + li:before
-      content: '\02192'
+    li + li::before
+      content: "\02192"
   &.has-bullet-separator
-    li + li:before
-      content: '\02022'
+    li + li::before
+      content: "\02022"
   &.has-dot-separator
-    li + li:before
-      content: '\000b7'
+    li + li::before
+      content: "\000b7"
   &.has-succeeds-separator
-    li + li:before
-      content: '\0227B'
+    li + li::before
+      content: "\0227B"