@kaizen/components 1.78.1 → 1.79.0

package/src/TitleBlockZen/TitleBlockZen.module.scss

@@ -9,660 +9,663 @@
 @import './mixins';
 @import './variables';
 
-$title-block-margin-width-on-medium-and-small: 12px;
-$breadcrumb-circle-width: 48px;
-$breadcrumb-breakpoint-width: $layout-content-max-width + $layout-content-side-margin * 2 +
-  $breadcrumb-circle-width * 2.25;
-$title-block-separator-height: 0.1875rem;
-$tab-container-height-default: $ca-grid * 3;
-$tab-container-height-small: $ca-grid * 2.5;
-$tab-container-height-default-collapsed: 0;
-$tab-container-height-medium-and-small-collapsed: 0;
-
-/* stylelint-disable no-descending-specificity */
-.titleBlock {
-  position: relative;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background-color: $dt-color-background-color-default;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-
-  &.educationVariant {
-    background-color: $dt-color-background-color-eduction;
-  }
-
-  &.adminVariant {
-    background-color: $dt-color-background-color-admin;
-  }
-
-  @media print {
-    display: none;
-  }
-}
-
-.titleRow,
-.rowBelowSeparator {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-}
+@layer kz-components {
+  $title-block-margin-width-on-medium-and-small: 12px;
+  $breadcrumb-circle-width: 48px;
+  $breadcrumb-breakpoint-width: $layout-content-max-width + $layout-content-side-margin * 2 +
+    $breadcrumb-circle-width * 2.25;
+  $title-block-separator-height: 0.1875rem;
+  $tab-container-height-default: $ca-grid * 3;
+  $tab-container-height-small: $ca-grid * 2.5;
+  $tab-container-height-default-collapsed: 0;
+  $tab-container-height-medium-and-small-collapsed: 0;
+
+  /* stylelint-disable no-descending-specificity */
+  .titleBlock {
+    position: relative;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background-color: $dt-color-background-color-default;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
 
-.adminVariant .titleRow {
-  background-color: $color-white;
-}
+    &.educationVariant {
+      background-color: $dt-color-background-color-eduction;
+    }
 
-%titleBlockInner {
-  max-width: $layout-content-max-width;
-  margin: 0 $layout-content-side-margin;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  min-width: 0; // this is an important trick to prevent flexbox items from overflowing
+    &.adminVariant {
+      background-color: $dt-color-background-color-admin;
+    }
 
-  @include title-block-medium-and-small {
-    margin: 0 $title-block-margin-width-on-medium-and-small;
+    @media print {
+      display: none;
+    }
   }
-}
 
-.titleRowInner {
-  @extend %titleBlockInner;
-}
+  .titleRow,
+  .rowBelowSeparator {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+  }
 
-.rowBelowSeparatorInner {
-  @extend %titleBlockInner;
-}
+  .adminVariant .titleRow {
+    background-color: $color-white;
+  }
 
-.titleRowInnerContent {
-  position: relative;
-  display: flex;
-  width: 100%;
-  align-items: center;
-  min-height: $ca-grid * 3.5;
-  justify-content: space-between;
-  border-bottom: $title-block-separator-height solid rgba($color-white-rgb, 0.1);
+  %titleBlockInner {
+    max-width: $layout-content-max-width;
+    margin: 0 $layout-content-side-margin;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-width: 0; // this is an important trick to prevent flexbox items from overflowing
 
-  .educationVariant & {
-    border-bottom-color: rgba($color-purple-700-rgb, 0.2);
+    @include title-block-medium-and-small {
+      margin: 0 $title-block-margin-width-on-medium-and-small;
+    }
   }
 
-  .adminVariant &,
-  .collapseNavigationArea & {
-    border-bottom-color: transparent;
+  .titleRowInner {
+    @extend %titleBlockInner;
   }
 
-  @include title-block-medium-and-small {
-    border-bottom: none;
+  .rowBelowSeparatorInner {
+    @extend %titleBlockInner;
   }
-}
 
-.title {
-  display: flex;
-  align-items: center;
-  min-width: 0; // this is an important trick to prevent flexbox items from overflowing
-
-  // Applying width 100% when the title is *not* long and is followed by a subtitle
-  // causes misalignment of both.
-  @include title-block-under-1366 {
+  .titleRowInnerContent {
+    position: relative;
+    display: flex;
     width: 100%;
-  }
-}
+    align-items: center;
+    min-height: $ca-grid * 3.5;
+    justify-content: space-between;
+    border-bottom: $title-block-separator-height solid rgba($color-white-rgb, 0.1);
 
-.titleAndSubtitle {
-  display: flex;
-  align-items: center;
-  min-width: 0; // this is an important trick to prevent flexbox items from overflowing
-  transform: translateY(-0.0833em);
+    .educationVariant & {
+      border-bottom-color: rgba($color-purple-700-rgb, 0.2);
+    }
 
-  .hasSubtitle & {
-    @include title-block-under-1366 {
-      transform: translateY(-0.3833em);
+    .adminVariant &,
+    .collapseNavigationArea & {
+      border-bottom-color: transparent;
     }
-  }
-}
 
-.titleAndSubtitleInner {
-  display: flex;
-  min-width: 0; // this is an important trick to prevent flexbox items from overflowing
+    @include title-block-medium-and-small {
+      border-bottom: none;
+    }
+  }
 
-  // TODO: removing .hasLongTitle here fixes the alignment on Performance story, but we should be able to not wrap subtitle.
-  .hasSubtitle.hasLongTitle.hasLongSubtitle & {
+  .title {
+    display: flex;
     align-items: center;
+    min-width: 0; // this is an important trick to prevent flexbox items from overflowing
 
+    // Applying width 100% when the title is *not* long and is followed by a subtitle
+    // causes misalignment of both.
     @include title-block-under-1366 {
-      align-items: baseline;
+      width: 100%;
     }
   }
 
-  .hasPageSwitcherSelect & {
-    @include title-block-medium-and-small {
-      align-items: normal;
-      flex-direction: column;
-      justify-content: space-between;
-      transform: translateY(calc(#{$ca-grid} / 3));
+  .titleAndSubtitle {
+    display: flex;
+    align-items: center;
+    min-width: 0; // this is an important trick to prevent flexbox items from overflowing
+    transform: translateY(-0.0833em);
+
+    .hasSubtitle & {
+      @include title-block-under-1366 {
+        transform: translateY(-0.3833em);
+      }
     }
   }
 
-  .hasSubtitle & {
-    align-items: baseline;
-    overflow: hidden;
+  .titleAndSubtitleInner {
+    display: flex;
+    min-width: 0; // this is an important trick to prevent flexbox items from overflowing
 
-    @include title-block-under-1366 {
-      align-items: normal;
-      flex-direction: column;
-      justify-content: space-between;
-      transform: translateY(calc(#{$ca-grid} / 3));
+    // TODO: removing .hasLongTitle here fixes the alignment on Performance story, but we should be able to not wrap subtitle.
+    .hasSubtitle.hasLongTitle.hasLongSubtitle & {
+      align-items: center;
 
-      .hasLongTitle.hasLongSubtitle & {
+      @include title-block-under-1366 {
         align-items: baseline;
       }
     }
 
-    @include title-block-medium-and-small {
-      transform: translateY(calc(#{$ca-grid} / 2));
+    .hasPageSwitcherSelect & {
+      @include title-block-medium-and-small {
+        align-items: normal;
+        flex-direction: column;
+        justify-content: space-between;
+        transform: translateY(calc(#{$ca-grid} / 3));
+      }
     }
-  }
-}
 
-.titleTextOverride.titleTextOverride {
-  padding: 4px 0;
+    .hasSubtitle & {
+      align-items: baseline;
+      overflow: hidden;
 
-  @include title-block-under-1366 {
-    font-size: $typography-heading-2-font-size;
-    line-height: $typography-heading-2-line-height;
-    letter-spacing: $typography-heading-2-letter-spacing;
-    padding: 2px 0;
+      @include title-block-under-1366 {
+        align-items: normal;
+        flex-direction: column;
+        justify-content: space-between;
+        transform: translateY(calc(#{$ca-grid} / 3));
+
+        .hasLongTitle.hasLongSubtitle & {
+          align-items: baseline;
+        }
+      }
+
+      @include title-block-medium-and-small {
+        transform: translateY(calc(#{$ca-grid} / 2));
+      }
+    }
   }
 
-  .hasLongTitle & {
+  .titleTextOverride.titleTextOverride {
+    padding: 4px 0;
+
     @include title-block-under-1366 {
-      font-size: $typography-heading-3-font-size;
-      line-height: $typography-heading-3-line-height;
-      letter-spacing: $typography-heading-3-letter-spacing;
+      font-size: $typography-heading-2-font-size;
+      line-height: $typography-heading-2-line-height;
+      letter-spacing: $typography-heading-2-letter-spacing;
       padding: 2px 0;
     }
-  }
 
-  @include title-block-medium-and-small {
-    font-size: $typography-heading-4-font-size;
-    line-height: $typography-heading-4-line-height;
-    letter-spacing: $typography-heading-4-letter-spacing;
-    padding: 0;
+    .hasLongTitle & {
+      @include title-block-under-1366 {
+        font-size: $typography-heading-3-font-size;
+        line-height: $typography-heading-3-line-height;
+        letter-spacing: $typography-heading-3-letter-spacing;
+        padding: 2px 0;
+      }
+    }
+
+    @include title-block-medium-and-small {
+      font-size: $typography-heading-4-font-size;
+      line-height: $typography-heading-4-line-height;
+      letter-spacing: $typography-heading-4-letter-spacing;
+      padding: 0;
+    }
   }
-}
 
-.avatar {
-  display: none;
-  box-sizing: border-box;
-  overflow: hidden;
-  height: $ca-grid * 2;
-  width: $ca-grid * 2;
+  .avatar {
+    display: none;
+    box-sizing: border-box;
+    overflow: hidden;
+    height: $ca-grid * 2;
+    width: $ca-grid * 2;
 
-  @include ca-margin($end: calc(#{$ca-grid} / 2));
+    @include ca-margin($end: calc(#{$ca-grid} / 2));
 
-  > * {
-    max-width: 100%;
-  }
+    > * {
+      max-width: 100%;
+    }
 
-  @media (min-width: $layout-breakpoints-large) {
-    display: block;
-  }
+    @media (min-width: $layout-breakpoints-large) {
+      display: block;
+    }
 
-  &.withBorder {
-    border: 3px solid $color-white;
-    border-radius: 50%;
+    &.withBorder {
+      border: 3px solid $color-white;
+      border-radius: 50%;
+    }
+
+    .hasLongTitle & {
+      display: none;
+    }
   }
 
-  .hasLongTitle & {
+  .hamburger {
     display: none;
-  }
-}
 
-.hamburger {
-  display: none;
+    @include ca-margin($end: $spacing-xs);
 
-  @include ca-margin($end: $spacing-xs);
+    @include title-block-medium-and-small {
+      display: flex;
+      align-items: center;
+    }
+  }
 
-  @include title-block-medium-and-small {
+  .subtitle {
     display: flex;
     align-items: center;
-  }
-}
-
-.subtitle {
-  display: flex;
-  align-items: center;
-  color: $color-white;
-  font-family: $typography-paragraph-small-font-family;
-  font-weight: $typography-paragraph-small-font-weight;
-  font-size: $typography-paragraph-small-font-size;
-  line-height: $typography-paragraph-small-line-height;
-  letter-spacing: $typography-paragraph-small-letter-spacing;
-  max-width: 230px;
-  margin-inline: var(--spacing-12) 0;
+    color: $color-white;
+    font-family: $typography-paragraph-small-font-family;
+    font-weight: $typography-paragraph-small-font-weight;
+    font-size: $typography-paragraph-small-font-size;
+    line-height: $typography-paragraph-small-line-height;
+    letter-spacing: $typography-paragraph-small-letter-spacing;
+    max-width: 230px;
+    margin-inline: var(--spacing-12) 0;
+
+    .adminVariant & {
+      color: $color-purple-800;
+    }
 
-  .adminVariant & {
-    color: $color-purple-800;
+    @include title-block-under-1366 {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      max-width: none;
+      margin: calc(#{$ca-grid} / 5) 0;
+    }
   }
 
-  @include title-block-under-1366 {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    max-width: none;
-    margin: calc(#{$ca-grid} / 5) 0;
+  .subtitleText {
+    @include title-block-under-1366 {
+      max-width: 42vw;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    @include title-block-small {
+      max-width: 88vw;
+    }
   }
-}
 
-.subtitleText {
-  @include title-block-under-1366 {
-    max-width: 42vw;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
+  .sectionTitleContainer {
+    display: flex;
+    align-items: center;
+    padding: calc(#{$ca-grid} * 3 / 4) 0;
   }
 
-  @include title-block-small {
-    max-width: 88vw;
+  .sectionTitleInner {
+    display: flex;
+    flex-direction: column;
   }
-}
 
-.sectionTitleContainer {
-  display: flex;
-  align-items: center;
-  padding: calc(#{$ca-grid} * 3 / 4) 0;
-}
+  .sectionTitleOverride.sectionTitleOverride {
+    white-space: nowrap;
+    margin-inline: 0 var(--spacing-24);
+    font-family: $typography-heading-2-font-family;
+    font-weight: $typography-heading-2-font-weight;
+    font-size: $typography-heading-2-font-size;
+    line-height: $typography-heading-2-line-height;
+    letter-spacing: $typography-heading-2-letter-spacing;
 
-.sectionTitleInner {
-  display: flex;
-  flex-direction: column;
-}
+    @include title-block-under-1645 {
+      font-family: $typography-heading-3-font-family;
+      font-weight: $typography-heading-3-font-weight;
+      font-size: $typography-heading-3-font-size;
+      line-height: $typography-heading-3-line-height;
+      letter-spacing: $typography-heading-3-letter-spacing;
+    }
 
-.sectionTitleOverride.sectionTitleOverride {
-  white-space: nowrap;
-  margin-inline: 0 var(--spacing-24);
-  font-family: $typography-heading-2-font-family;
-  font-weight: $typography-heading-2-font-weight;
-  font-size: $typography-heading-2-font-size;
-  line-height: $typography-heading-2-line-height;
-  letter-spacing: $typography-heading-2-letter-spacing;
-
-  @include title-block-under-1645 {
-    font-family: $typography-heading-3-font-family;
-    font-weight: $typography-heading-3-font-weight;
-    font-size: $typography-heading-3-font-size;
-    line-height: $typography-heading-3-line-height;
-    letter-spacing: $typography-heading-3-letter-spacing;
-  }
-
-  @include title-block-medium-and-small {
-    font-family: $typography-heading-4-font-family;
-    font-weight: $typography-heading-4-font-weight;
-    font-size: $typography-heading-4-font-size;
-    line-height: $typography-heading-4-line-height;
-    letter-spacing: $typography-heading-4-letter-spacing;
+    @include title-block-medium-and-small {
+      font-family: $typography-heading-4-font-family;
+      font-weight: $typography-heading-4-font-weight;
+      font-size: $typography-heading-4-font-size;
+      line-height: $typography-heading-4-line-height;
+      letter-spacing: $typography-heading-4-letter-spacing;
+    }
   }
-}
 
-.sectionTitle {
-  display: block;
-}
+  .sectionTitle {
+    display: block;
+  }
 
-.sectionTitleDescription {
-  color: $color-white;
-  max-width: 780px;
-  font-family: $typography-paragraph-small-font-family;
-  font-weight: $typography-paragraph-small-font-weight;
-  font-size: $typography-paragraph-small-font-size;
-  line-height: $typography-paragraph-small-line-height;
-  letter-spacing: $typography-paragraph-small-letter-spacing;
+  .sectionTitleDescription {
+    color: $color-white;
+    max-width: 780px;
+    font-family: $typography-paragraph-small-font-family;
+    font-weight: $typography-paragraph-small-font-weight;
+    font-size: $typography-paragraph-small-font-size;
+    line-height: $typography-paragraph-small-line-height;
+    letter-spacing: $typography-paragraph-small-letter-spacing;
+
+    .sectionTitle + & {
+      margin-top: var(--spacing-6);
+    }
 
-  .sectionTitle + & {
-    margin-top: var(--spacing-6);
+    &.dark {
+      color: rgba($color-purple-800-rgb, 0.7);
+    }
   }
 
-  &.dark {
-    color: rgba($color-purple-800-rgb, 0.7);
+  .rowBelowSeparatorInnerContent {
+    display: flex;
+    width: 100%;
+    margin-top: -$title-block-separator-height;
+    justify-content: space-between;
   }
-}
-
-.rowBelowSeparatorInnerContent {
-  display: flex;
-  width: 100%;
-  margin-top: -$title-block-separator-height;
-  justify-content: space-between;
-}
 
-.titleAndAdjacent {
-  display: flex;
-  min-width: 0; // this is an important trick to prevent flexbox items from overflowing
-}
+  .titleAndAdjacent {
+    display: flex;
+    min-width: 0; // this is an important trick to prevent flexbox items from overflowing
+  }
 
-.titleAndAdjacentNotBreadcrumb {
-  display: flex;
-  transition: opacity 0.3s ease;
-  min-width: 0; // this is an important trick to prevent flexbox items from overflowing
-  align-items: center;
+  .titleAndAdjacentNotBreadcrumb {
+    display: flex;
+    transition: opacity 0.3s ease;
+    min-width: 0; // this is an important trick to prevent flexbox items from overflowing
+    align-items: center;
 
-  .breadcrumb:hover ~ &,
-  .breadcrumb:focus ~ &,
-  .breadcrumbTextLink:hover ~ &,
-  .breadcrumbTextLink:focus ~ & {
-    opacity: 0%;
+    .breadcrumb:hover ~ &,
+    .breadcrumb:focus ~ &,
+    .breadcrumbTextLink:hover ~ &,
+    .breadcrumbTextLink:focus ~ & {
+      opacity: 0%;
+    }
   }
-}
 
-.tag {
-  display: flex;
-  align-items: center;
-  margin-inline: var(--spacing-12) 0;
+  .tag {
+    display: flex;
+    align-items: center;
+    margin-inline: var(--spacing-12) 0;
 
-  @include title-block-medium-and-small {
-    display: none;
-  }
+    @include title-block-medium-and-small {
+      display: none;
+    }
 
-  + .pageSwitcherSelectNextToTitle {
-    margin-inline-start: 0;
+    + .pageSwitcherSelectNextToTitle {
+      margin-inline-start: 0;
+    }
   }
-}
 
-.pageSwitcherSelectNextToTitle {
-  flex-shrink: 0;
-  width: var(--spacing-240);
-  margin-inline: var(--spacing-12) 0;
-}
+  .pageSwitcherSelectNextToTitle {
+    flex-shrink: 0;
+    width: var(--spacing-240);
+    margin-inline: var(--spacing-12) 0;
+  }
 
-.pageSwitcherSelectUnderneathTitle {
-  flex-shrink: 0;
-  max-width: var(--spacing-240);
-}
+  .pageSwitcherSelectUnderneathTitle {
+    flex-shrink: 0;
+    max-width: var(--spacing-240);
+  }
 
-.navigationTabsContainer {
-  height: $tab-container-height-default;
+  .navigationTabsContainer {
+    height: $tab-container-height-default;
 
-  @include title-block-small {
-    height: $tab-container-height-small;
+    @include title-block-small {
+      height: $tab-container-height-small;
+    }
   }
-}
 
-.navigationTabsContainerCollapsed {
-  height: $tab-container-height-default-collapsed;
+  .navigationTabsContainerCollapsed {
+    height: $tab-container-height-default-collapsed;
 
-  @include title-block-medium-and-small {
-    height: $tab-container-height-medium-and-small-collapsed;
+    @include title-block-medium-and-small {
+      height: $tab-container-height-medium-and-small-collapsed;
+    }
   }
-}
 
-.navigationTabScrollerContainer {
-  .hasNavigationTabs & {
-    @include title-block-small {
-      display: block;
-      overflow-x: scroll;
-      scrollbar-width: none;
-      width: 100vw;
+  .navigationTabScrollerContainer {
+    .hasNavigationTabs & {
+      @include title-block-small {
+        display: block;
+        overflow-x: scroll;
+        scrollbar-width: none;
+        width: 100vw;
 
-      &::-webkit-scrollbar {
-        display: none;
+        &::-webkit-scrollbar {
+          display: none;
+        }
       }
     }
   }
-}
-
-.navigationTabsNav {
-  height: 100%;
-}
-
-.navigationTabsList {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  height: 100%;
-}
 
-%navigationTabEdgeShadow {
-  display: none;
-  pointer-events: none;
+  .navigationTabsNav {
+    height: 100%;
+  }
 
-  @include title-block-small {
-    display: block;
-    position: absolute;
-    top: $tab-container-height-small - $title-block-separator-height;
-    width: $tab-container-height-small;
-    height: $tab-container-height-small;
-    background: linear-gradient(0deg, $color-purple-600, rgba($color-purple-600-rgb, 0));
-    z-index: 1;
+  .navigationTabsList {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    height: 100%;
   }
 
-  .adminVariant & {
+  %navigationTabEdgeShadow {
+    display: none;
+    pointer-events: none;
+
     @include title-block-small {
-      background: linear-gradient(0deg, $color-gray-100, rgba($color-gray-100-rgb, 0));
+      display: block;
+      position: absolute;
+      top: $tab-container-height-small - $title-block-separator-height;
+      width: $tab-container-height-small;
+      height: $tab-container-height-small;
+      background: linear-gradient(0deg, $color-purple-600, rgba($color-purple-600-rgb, 0));
+      z-index: 1;
     }
-  }
 
-  .educationVariant & {
-    @include title-block-small {
-      background: linear-gradient(0deg, $color-blue-200, rgba($color-blue-200-rgb, 0));
+    .adminVariant & {
+      @include title-block-small {
+        background: linear-gradient(0deg, $color-gray-100, rgba($color-gray-100-rgb, 0));
+      }
+    }
+
+    .educationVariant & {
+      @include title-block-small {
+        background: linear-gradient(0deg, $color-blue-200, rgba($color-blue-200-rgb, 0));
+      }
     }
   }
-}
 
-.navigationTabEdgeShadowLeft {
-  @extend %navigationTabEdgeShadow;
+  .navigationTabEdgeShadowLeft {
+    @extend %navigationTabEdgeShadow;
 
-  transform: rotate(90deg);
-  left: 0;
-  top: calc(100% - #{$tab-container-height-default});
+    transform: rotate(90deg);
+    left: 0;
+    top: calc(100% - #{$tab-container-height-default});
 
-  @include title-block-small {
-    top: calc(100% - #{$tab-container-height-small});
+    @include title-block-small {
+      top: calc(100% - #{$tab-container-height-small});
+    }
   }
-}
 
-.navigationTabEdgeShadowRight {
-  @extend %navigationTabEdgeShadow;
+  .navigationTabEdgeShadowRight {
+    @extend %navigationTabEdgeShadow;
 
-  transform: rotate(-90deg);
-  right: 0;
-  top: calc(100% - #{$tab-container-height-default});
+    transform: rotate(-90deg);
+    right: 0;
+    top: calc(100% - #{$tab-container-height-default});
 
-  @include title-block-small {
-    top: calc(100% - #{$tab-container-height-small});
+    @include title-block-small {
+      top: calc(100% - #{$tab-container-height-small});
+    }
   }
-}
-
-// This should be in SecondaryAction.module.scss,
-// but the variants prevent us from breaking this out.
-.secondaryActionsContainer {
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-end;
-  padding: (calc(#{$ca-grid} / 2)) 0;
 
-  @include ca-margin($start: $ca-grid * 1.5);
+  // This should be in SecondaryAction.module.scss,
+  // but the variants prevent us from breaking this out.
+  .secondaryActionsContainer {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+    padding: (calc(#{$ca-grid} / 2)) 0;
+
+    @include ca-margin($start: $ca-grid * 1.5);
+
+    // To be removed eventually – the Dropdown does not
+    // currently set its own color, and we want it
+    // to be Cluny like the default secondary buttons
+    .educationVariant &,
+    .adminVariant & {
+      color: $color-blue-500;
+    }
 
-  // To be removed eventually – the Dropdown does not
-  // currently set its own color, and we want it
-  // to be Cluny like the default secondary buttons
-  .educationVariant &,
-  .adminVariant & {
-    color: $color-blue-500;
+    @include title-block-medium-and-small {
+      display: none;
+    }
   }
 
-  @include title-block-medium-and-small {
-    display: none;
-  }
-}
+  .breadcrumb {
+    @include button-reset;
 
-.breadcrumb {
-  @include button-reset;
+    cursor: pointer;
+    display: flex;
+    position: absolute;
+    align-items: center;
+    top: 50%;
+    transform: translateY(-50%);
+    text-decoration: none;
 
-  cursor: pointer;
-  display: flex;
-  position: absolute;
-  align-items: center;
-  top: 50%;
-  transform: translateY(-50%);
-  text-decoration: none;
+    @include ca-position($start: calc(-#{$breadcrumb-circle-width} - #{$ca-grid}));
 
-  @include ca-position($start: calc(-#{$breadcrumb-circle-width} - #{$ca-grid}));
+    align-self: normal;
 
-  align-self: normal;
+    &:hover .breadcrumbTextLink {
+      text-decoration: underline;
+    }
 
-  &:hover .breadcrumbTextLink {
-    text-decoration: underline;
-  }
+    &:focus {
+      outline: none;
+
+      &::after {
+        $focus-ring-offset: calc(
+          (-2 * #{$border-focus-ring-border-width}) - #{$border-focus-ring-border-width}
+        );
+
+        content: '';
+        position: absolute;
+        background: transparent;
+        border-color: $color-blue-200;
+        border-radius: 50%;
+        border-width: $border-focus-ring-border-width;
+        border-style: $border-focus-ring-border-style;
+        inset: $focus-ring-offset;
+      }
+    }
 
-  &:focus {
-    outline: none;
+    @media only screen and (max-width: $breadcrumb-breakpoint-width) {
+      position: relative;
+      transform: translateY(0);
+      margin-inline: 0 var(--spacing-12);
 
-    &::after {
-      $focus-ring-offset: calc(
-        (-2 * #{$border-focus-ring-border-width}) - #{$border-focus-ring-border-width}
-      );
+      @include ca-position($start: 0);
+    }
 
-      content: '';
-      position: absolute;
-      background: transparent;
-      border-color: $color-blue-200;
-      border-radius: 50%;
-      border-width: $border-focus-ring-border-width;
-      border-style: $border-focus-ring-border-style;
-      inset: $focus-ring-offset;
+    @include title-block-medium-and-small {
+      display: none;
     }
   }
 
-  @media only screen and (max-width: $breadcrumb-breakpoint-width) {
-    position: relative;
-    transform: translateY(0);
-    margin-inline: 0 var(--spacing-12);
-
-    @include ca-position($start: 0);
+  @mixin visually-hidden {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
   }
 
-  @include title-block-medium-and-small {
-    display: none;
+  @mixin visually-hidden-reset {
+    clip: initial;
+    clip-path: initial;
+    height: initial;
+    overflow: initial;
+    position: initial;
+    white-space: initial;
+    width: initial;
   }
-}
 
-@mixin visually-hidden {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
+  .breadcrumbTextLink {
+    // We are using visually hidden here instead of display:none so that a screen reader
+    // navigating via 'read mode' (which doesn't trigger hover/focus) will still hear this link name
+    @include visually-hidden;
+    @include ca-position($start: -2 * $ca-grid);
 
-@mixin visually-hidden-reset {
-  clip: initial;
-  clip-path: initial;
-  height: initial;
-  overflow: initial;
-  position: initial;
-  white-space: initial;
-  width: initial;
-}
+    position: absolute;
 
-.breadcrumbTextLink {
-  // We are using visually hidden here instead of display:none so that a screen reader
-  // navigating via 'read mode' (which doesn't trigger hover/focus) will still hear this link name
-  @include visually-hidden;
-  @include ca-position($start: -2 * $ca-grid);
+    @include title-block-under-1645 {
+      @include ca-position($start: $ca-grid);
+    }
 
-  position: absolute;
+    @media only screen and (min-width: $breadcrumb-breakpoint-width) {
+      @include ca-position($start: calc(#{$breadcrumb-circle-width} - #{$ca-grid}));
+    }
 
-  @include title-block-under-1645 {
-    @include ca-position($start: $ca-grid);
+    &:hover,
+    &:focus,
+    .breadcrumb:hover &,
+    .breadcrumb:focus & {
+      @include visually-hidden-reset;
+      // ^be careful of this mixin unsetting values you need
+      // e.g. I needed to set position:absolute again below
+      position: absolute;
+      display: block;
+      animation: slide-fade 0.4s;
+
+      [dir='rtl'] & {
+        animation: reverse-slide-fade 0.4s;
+      }
+    }
   }
 
-  @media only screen and (min-width: $breadcrumb-breakpoint-width) {
-    @include ca-position($start: calc(#{$breadcrumb-circle-width} - #{$ca-grid}));
+  .breadcrumbText {
+    margin-inline-start: $spacing-xl;
+    white-space: nowrap;
+    font-family: $typography-heading-5-font-family;
+    font-weight: $typography-heading-5-font-weight;
+    font-size: $typography-heading-5-font-size;
+    line-height: $typography-heading-5-line-height;
+    letter-spacing: $typography-heading-5-letter-spacing;
   }
 
-  &:hover,
-  &:focus,
-  .breadcrumb:hover &,
-  .breadcrumb:focus & {
-    @include visually-hidden-reset;
-    // ^be careful of this mixin unsetting values you need
-    // e.g. I needed to set position:absolute again below
-    position: absolute;
-    display: block;
-    animation: slide-fade 0.4s;
+  .breadcrumb,
+  .breadcrumb:hover,
+  .breadcrumbText {
+    color: $color-white;
 
-    [dir='rtl'] & {
-      animation: reverse-slide-fade 0.4s;
+    .educationVariant &,
+    .adminVariant & {
+      color: $color-purple-800;
     }
   }
-}
-
-.breadcrumbText {
-  margin-inline-start: $spacing-xl;
-  white-space: nowrap;
-  font-family: $typography-heading-5-font-family;
-  font-weight: $typography-heading-5-font-weight;
-  font-size: $typography-heading-5-font-size;
-  line-height: $typography-heading-5-line-height;
-  letter-spacing: $typography-heading-5-letter-spacing;
-}
 
-.breadcrumb,
-.breadcrumb:hover,
-.breadcrumbText {
-  color: $color-white;
+  .circle {
+    $border-width: 3px;
 
-  .educationVariant &,
-  .adminVariant & {
-    color: $color-purple-800;
-  }
-}
-
-.circle {
-  $border-width: 3px;
-
-  flex: 0 0 $breadcrumb-circle-width;
-  box-sizing: border-box;
-  width: $breadcrumb-circle-width;
-  height: $breadcrumb-circle-width;
-  color: $color-white;
-  border-color: rgba($color-white-rgb, 0.5);
-  border-width: 2px;
-  border-radius: 50%;
-  border-style: solid;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition:
-    background-color 0.3s ease,
-    transform 0.3s ease;
-
-  .breadcrumb:hover &,
-  .breadcrumb:focus & {
-    transform: scale(1.1);
-    border-color: $color-white;
+    flex: 0 0 $breadcrumb-circle-width;
+    box-sizing: border-box;
+    width: $breadcrumb-circle-width;
+    height: $breadcrumb-circle-width;
     color: $color-white;
-    background-color: rgba($color-white-rgb, 0.1);
-  }
+    border-color: rgba($color-white-rgb, 0.5);
+    border-width: 2px;
+    border-radius: 50%;
+    border-style: solid;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition:
+      background-color 0.3s ease,
+      transform 0.3s ease;
+
+    .breadcrumb:hover &,
+    .breadcrumb:focus & {
+      transform: scale(1.1);
+      border-color: $color-white;
+      color: $color-white;
+      background-color: rgba($color-white-rgb, 0.1);
+    }
 
-  .educationVariant &,
-  .adminVariant & {
-    color: $color-blue-500;
-    border-color: $color-blue-300;
-    border-width: $border-width;
-  }
+    .educationVariant &,
+    .adminVariant & {
+      color: $color-blue-500;
+      border-color: $color-blue-300;
+      border-width: $border-width;
+    }
 
-  .educationVariant .breadcrumb:hover &,
-  .educationVariant .breadcrumb:focus &,
-  .adminVariant .breadcrumb:hover &,
-  .adminVariant .breadcrumb:focus & {
-    border-color: $color-blue-500;
-    color: $color-blue-500;
-    background-color: rgba($color-blue-500-rgb, 0.1);
+    .educationVariant .breadcrumb:hover &,
+    .educationVariant .breadcrumb:focus &,
+    .adminVariant .breadcrumb:hover &,
+    .adminVariant .breadcrumb:focus & {
+      border-color: $color-blue-500;
+      color: $color-blue-500;
+      background-color: rgba($color-blue-500-rgb, 0.1);
+    }
   }
+  /* stylelint-enable no-descending-specificity */
 }
 
 @keyframes slide-fade {
@@ -700,4 +703,3 @@ $tab-container-height-medium-and-small-collapsed: 0;
     transform: translateX(0);
   }
 }
-/* stylelint-enable no-descending-specificity */