Rework breadcrumb styling

Author: jacbn

src/app/components/elements/Accordion.tsx

@@ -172,7 +172,7 @@ export const Accordion = withRouter(({id, trustedTitle, index, children, startOp
                 aria-expanded={isOpen ? "true" : "false"}
             >
                 {isConceptPage && audienceString && <span className={
-                    classNames("stage-label d-flex align-items-center p-2 justify-content-center ", {[audienceStyle(audienceString)]: isAda, "text-bg-theme": isPhy})
+                    classNames("stage-label d-flex align-items-center p-2 justify-content-center ", {[audienceStyle(audienceString)]: isAda, "bg-theme text-white": isPhy})
                 }>
                     {siteSpecific(
                         audienceString,

src/scss/common/breadcrumbs.scss

@@ -3,51 +3,18 @@
 // NOMENSA breadcrumbs.scss
 .bread {
   background-color: $white;
-  margin-left: -1 * math.div($grid-gutter-width, 2);
-  margin-right: -1 * math.div($grid-gutter-width, 2);
   box-shadow: 0 2px 30px 0 $shadow-08;
   @include respond-above(xs) {
     background-color: transparent;
     box-shadow: none;
   }
-  @include respond-above(sm) {
-    margin: 0;
-  }
 
   .breadcrumb {
     display: flex;
     flex-wrap: wrap;
-    padding: 0.75rem 1rem;
     list-style: none;
     border-radius: 0.25rem;
     background-color: transparent;
     margin: 0;
-    padding-left: 1rem;
-    padding-right: 0;
-    @include respond-above(sm) {
-      padding-left: 0;
-    }
-
-    .breadcrumb-item {
-      font-family: $secondary-font-medium;
-
-      &.active {
-        color: $gray-blue;
-      }
-    }
-  }
-
-  .breadcrumb-item + .breadcrumb-item::before {
-    background-image: url('/assets/common/icons/chevron_right.svg');
-    background-repeat: no-repeat;
-    background-size: contain;
-    content: '';
-    height: 14px;
-    left: 20px;
-    margin-bottom: -2px;
-    margin-left: 2px;
-    margin-right: 10px;
-    margin-top: 7px;
-    width: 9px;
   }
 }

src/scss/cs/breadcrumbs.scss

@@ -1,10 +1,36 @@
 @import "../common/breadcrumbs";
 
-.breadcrumb-item + .breadcrumb-item::before {
-  position: relative;
-  height: 0.888rem !important;
-  left: 3px !important;
-  top: 4px !important;
-  margin: 0 !important;
-  width: 21px !important;
-}
+.bread {
+  margin-left: -1 * math.div($grid-gutter-width, 2);
+  margin-right: -1 * math.div($grid-gutter-width, 2);
+  @include respond-above(sm) {
+    margin: 0;
+  }
+
+  .breadcrumb {
+    padding: 0.75rem 0 0.75rem 1rem;
+    @include respond-above(sm) {
+      padding-left: 0;
+    }
+  }
+
+  .breadcrumb-item {
+    font-family: $secondary-font-medium;
+    &.active {
+      color: $gray-blue;
+    }
+  }
+
+  .breadcrumb-item + .breadcrumb-item::before {
+    position: relative;
+    background-image: url('/assets/common/icons/chevron_right.svg');
+    background-repeat: no-repeat;
+    background-size: contain;
+    content: '';
+    height: 0.888rem;
+    left: 3px;
+    top: 4px;
+    margin: 0;
+    width: 21px;
+  }
+}

src/scss/phy/breadcrumbs.scss

@@ -0,0 +1,43 @@
+@import "../common/breadcrumbs";
+
+.bread {
+    position: relative;
+
+    background-color: color-mix(in srgb, var(--subject-color-900) 50%, transparent 50%);
+    border-bottom: 1px solid color-mix(in srgb, white 20%, transparent 80%);
+
+    .breadcrumb-item {
+        display: flex;
+        color: white;
+    }
+    
+    .breadcrumb-item a {
+        text-decoration: none;
+        color: white;
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+
+    .breadcrumb-item + .breadcrumb-item::before, .breadcrumb-item:last-child::after {
+        display: block;
+        background-image: url('/assets/common/icons/chevron_up_white.svg');
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: contain;
+        rotate: 90deg;
+        opacity: 0.8;
+        content: '';
+        height: 14px;
+        left: 20px;
+        margin-bottom: -2px;
+        margin-left: 2px;
+        margin-right: 10px;
+        margin-top: 7px;
+        width: 9px;
+    }
+
+    .breadcrumb-item:last-child::after {
+        margin-left: 9px;
+    }
+}

src/scss/phy/color-theme.scss

@@ -125,10 +125,6 @@
       @include svg-color(url("/assets/phy/icons/redesign/hexagon.svg"), var(--subject-color-200), 60px, 60px, 60px);
       position: absolute;
     }
-    
-    .text-bg-theme {
-      @extend .text-bg-#{$palette};
-    }
 
     .alert-secondary {
       @extend .alert-#{$palette};

src/scss/phy/isaac.scss

@@ -360,7 +360,7 @@ $theme-colors-border-subtle: map-merge($theme-colors-border-subtle, $custom-colo
 @import "../common/modals";
 @import "forms";
 @import "../common/elements";
-@import "../common/breadcrumbs";
+@import "breadcrumbs";
 @import "../common/media";
 @import "../common/cookies";
 @import "../common/tabs";