@kaizen/components 0.0.0-canary-kz-components-css-layer-pre-release-20250527021003 → 0.0.0-canary-fix-fms-popover-20250603003244

package/src/TitleBlockZen/TitleBlockZen.module.scss

@@ -9,663 +9,660 @@
 @import './mixins';
 @import './variables';
 
-@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;
+$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;
+  }
+}
 
-    &.educationVariant {
-      background-color: $dt-color-background-color-eduction;
-    }
+.titleRow,
+.rowBelowSeparator {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
 
-    &.adminVariant {
-      background-color: $dt-color-background-color-admin;
-    }
+.adminVariant .titleRow {
+  background-color: $color-white;
+}
 
-    @media print {
-      display: none;
-    }
-  }
+%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
 
-  .titleRow,
-  .rowBelowSeparator {
-    display: flex;
-    width: 100%;
-    justify-content: center;
+  @include title-block-medium-and-small {
+    margin: 0 $title-block-margin-width-on-medium-and-small;
   }
+}
 
-  .adminVariant .titleRow {
-    background-color: $color-white;
-  }
+.titleRowInner {
+  @extend %titleBlockInner;
+}
 
-  %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
+.rowBelowSeparatorInner {
+  @extend %titleBlockInner;
+}
 
-    @include title-block-medium-and-small {
-      margin: 0 $title-block-margin-width-on-medium-and-small;
-    }
+.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);
+
+  .educationVariant & {
+    border-bottom-color: rgba($color-purple-700-rgb, 0.2);
   }
 
-  .titleRowInner {
-    @extend %titleBlockInner;
+  .adminVariant &,
+  .collapseNavigationArea & {
+    border-bottom-color: transparent;
   }
 
-  .rowBelowSeparatorInner {
-    @extend %titleBlockInner;
+  @include title-block-medium-and-small {
+    border-bottom: none;
   }
+}
 
-  .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);
+.title {
+  display: flex;
+  align-items: center;
+  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);
-    }
+  // Applying width 100% when the title is *not* long and is followed by a subtitle
+  // causes misalignment of both.
+  @include title-block-under-1366 {
+    width: 100%;
+  }
+}
 
-    .adminVariant &,
-    .collapseNavigationArea & {
-      border-bottom-color: transparent;
-    }
+.titleAndSubtitle {
+  display: flex;
+  align-items: center;
+  min-width: 0; // this is an important trick to prevent flexbox items from overflowing
+  transform: translateY(-0.0833em);
 
-    @include title-block-medium-and-small {
-      border-bottom: none;
+  .hasSubtitle & {
+    @include title-block-under-1366 {
+      transform: translateY(-0.3833em);
     }
   }
+}
 
-  .title {
-    display: flex;
+.titleAndSubtitleInner {
+  display: flex;
+  min-width: 0; // this is an important trick to prevent flexbox items from overflowing
+
+  // 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;
-    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 {
-      width: 100%;
+      align-items: baseline;
     }
   }
 
-  .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);
-      }
+  .hasPageSwitcherSelect & {
+    @include title-block-medium-and-small {
+      align-items: normal;
+      flex-direction: column;
+      justify-content: space-between;
+      transform: translateY(calc(#{$ca-grid} / 3));
     }
   }
 
-  .titleAndSubtitleInner {
-    display: flex;
-    min-width: 0; // this is an important trick to prevent flexbox items from overflowing
+  .hasSubtitle & {
+    align-items: baseline;
+    overflow: hidden;
 
-    // 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;
+    @include title-block-under-1366 {
+      align-items: normal;
+      flex-direction: column;
+      justify-content: space-between;
+      transform: translateY(calc(#{$ca-grid} / 3));
 
-      @include title-block-under-1366 {
+      .hasLongTitle.hasLongSubtitle & {
         align-items: baseline;
       }
     }
 
-    .hasPageSwitcherSelect & {
-      @include title-block-medium-and-small {
-        align-items: normal;
-        flex-direction: column;
-        justify-content: space-between;
-        transform: translateY(calc(#{$ca-grid} / 3));
-      }
+    @include title-block-medium-and-small {
+      transform: translateY(calc(#{$ca-grid} / 2));
     }
+  }
+}
 
-    .hasSubtitle & {
-      align-items: baseline;
-      overflow: hidden;
-
-      @include title-block-under-1366 {
-        align-items: normal;
-        flex-direction: column;
-        justify-content: space-between;
-        transform: translateY(calc(#{$ca-grid} / 3));
+.titleTextOverride.titleTextOverride {
+  padding: 4px 0;
 
-        .hasLongTitle.hasLongSubtitle & {
-          align-items: baseline;
-        }
-      }
-
-      @include title-block-medium-and-small {
-        transform: translateY(calc(#{$ca-grid} / 2));
-      }
-    }
+  @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;
   }
 
-  .titleTextOverride.titleTextOverride {
-    padding: 4px 0;
-
+  .hasLongTitle & {
     @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;
+      font-size: $typography-heading-3-font-size;
+      line-height: $typography-heading-3-line-height;
+      letter-spacing: $typography-heading-3-letter-spacing;
       padding: 2px 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;
+  @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;
+  }
+}
 
-    @include ca-margin($end: calc(#{$ca-grid} / 2));
+.avatar {
+  display: none;
+  box-sizing: border-box;
+  overflow: hidden;
+  height: $ca-grid * 2;
+  width: $ca-grid * 2;
 
-    > * {
-      max-width: 100%;
-    }
+  @include ca-margin($end: calc(#{$ca-grid} / 2));
 
-    @media (min-width: $layout-breakpoints-large) {
-      display: block;
-    }
+  > * {
+    max-width: 100%;
+  }
 
-    &.withBorder {
-      border: 3px solid $color-white;
-      border-radius: 50%;
-    }
+  @media (min-width: $layout-breakpoints-large) {
+    display: block;
+  }
 
-    .hasLongTitle & {
-      display: none;
-    }
+  &.withBorder {
+    border: 3px solid $color-white;
+    border-radius: 50%;
   }
 
-  .hamburger {
+  .hasLongTitle & {
     display: none;
+  }
+}
 
-    @include ca-margin($end: $spacing-xs);
+.hamburger {
+  display: none;
 
-    @include title-block-medium-and-small {
-      display: flex;
-      align-items: center;
-    }
-  }
+  @include ca-margin($end: $spacing-xs);
 
-  .subtitle {
+  @include title-block-medium-and-small {
     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;
-
-    .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;
-    }
   }
+}
 
-  .subtitleText {
-    @include title-block-under-1366 {
-      max-width: 42vw;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
+.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;
 
-    @include title-block-small {
-      max-width: 88vw;
-    }
+  .adminVariant & {
+    color: $color-purple-800;
   }
 
-  .sectionTitleContainer {
-    display: flex;
-    align-items: center;
-    padding: calc(#{$ca-grid} * 3 / 4) 0;
+  @include title-block-under-1366 {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: none;
+    margin: calc(#{$ca-grid} / 5) 0;
   }
+}
 
-  .sectionTitleInner {
-    display: flex;
-    flex-direction: column;
+.subtitleText {
+  @include title-block-under-1366 {
+    max-width: 42vw;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
 
-  .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-small {
+    max-width: 88vw;
+  }
+}
 
-    @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;
-    }
+.sectionTitleContainer {
+  display: flex;
+  align-items: center;
+  padding: calc(#{$ca-grid} * 3 / 4) 0;
+}
 
-    @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;
-    }
-  }
+.sectionTitleInner {
+  display: flex;
+  flex-direction: column;
+}
 
-  .sectionTitle {
-    display: block;
+.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;
   }
+}
 
-  .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 {
+  display: block;
+}
 
-    &.dark {
-      color: rgba($color-purple-800-rgb, 0.7);
-    }
-  }
+.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;
 
-  .rowBelowSeparatorInnerContent {
-    display: flex;
-    width: 100%;
-    margin-top: -$title-block-separator-height;
-    justify-content: space-between;
+  .sectionTitle + & {
+    margin-top: var(--spacing-6);
   }
 
-  .titleAndAdjacent {
-    display: flex;
-    min-width: 0; // this is an important trick to prevent flexbox items from overflowing
+  &.dark {
+    color: rgba($color-purple-800-rgb, 0.7);
   }
+}
 
-  .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%;
-    }
-  }
+.rowBelowSeparatorInnerContent {
+  display: flex;
+  width: 100%;
+  margin-top: -$title-block-separator-height;
+  justify-content: space-between;
+}
 
-  .tag {
-    display: flex;
-    align-items: center;
-    margin-inline: var(--spacing-12) 0;
+.titleAndAdjacent {
+  display: flex;
+  min-width: 0; // this is an important trick to prevent flexbox items from overflowing
+}
 
-    @include title-block-medium-and-small {
-      display: none;
-    }
+.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;
 
-    + .pageSwitcherSelectNextToTitle {
-      margin-inline-start: 0;
-    }
+  .breadcrumb:hover ~ &,
+  .breadcrumb:focus ~ &,
+  .breadcrumbTextLink:hover ~ &,
+  .breadcrumbTextLink:focus ~ & {
+    opacity: 0%;
   }
+}
 
-  .pageSwitcherSelectNextToTitle {
-    flex-shrink: 0;
-    width: var(--spacing-240);
-    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;
   }
 
-  .pageSwitcherSelectUnderneathTitle {
-    flex-shrink: 0;
-    max-width: var(--spacing-240);
+  + .pageSwitcherSelectNextToTitle {
+    margin-inline-start: 0;
   }
+}
 
-  .navigationTabsContainer {
-    height: $tab-container-height-default;
+.pageSwitcherSelectNextToTitle {
+  flex-shrink: 0;
+  width: var(--spacing-240);
+  margin-inline: var(--spacing-12) 0;
+}
 
-    @include title-block-small {
-      height: $tab-container-height-small;
-    }
+.pageSwitcherSelectUnderneathTitle {
+  flex-shrink: 0;
+  max-width: var(--spacing-240);
+}
+
+.navigationTabsContainer {
+  height: $tab-container-height-default;
+
+  @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%;
-  }
+.navigationTabsNav {
+  height: 100%;
+}
 
-  .navigationTabsList {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    height: 100%;
-  }
+.navigationTabsList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  height: 100%;
+}
 
-  %navigationTabEdgeShadow {
-    display: none;
-    pointer-events: none;
+%navigationTabEdgeShadow {
+  display: none;
+  pointer-events: none;
 
-    @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;
-    }
+  @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;
+  }
 
-    .adminVariant & {
-      @include title-block-small {
-        background: linear-gradient(0deg, $color-gray-100, rgba($color-gray-100-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));
-      }
+  .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);
-
-    // 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;
-    }
+// 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 title-block-medium-and-small {
-      display: none;
-    }
+  @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;
   }
 
-  .breadcrumb {
-    @include button-reset;
+  @include title-block-medium-and-small {
+    display: none;
+  }
+}
 
-    cursor: pointer;
-    display: flex;
-    position: absolute;
-    align-items: center;
-    top: 50%;
-    transform: translateY(-50%);
-    text-decoration: none;
+.breadcrumb {
+  @include button-reset;
 
-    @include ca-position($start: calc(-#{$breadcrumb-circle-width} - #{$ca-grid}));
+  cursor: pointer;
+  display: flex;
+  position: absolute;
+  align-items: center;
+  top: 50%;
+  transform: translateY(-50%);
+  text-decoration: none;
 
-    align-self: normal;
+  @include ca-position($start: calc(-#{$breadcrumb-circle-width} - #{$ca-grid}));
 
-    &:hover .breadcrumbTextLink {
-      text-decoration: underline;
-    }
+  align-self: normal;
 
-    &: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;
-      }
-    }
+  &:hover .breadcrumbTextLink {
+    text-decoration: underline;
+  }
 
-    @media only screen and (max-width: $breadcrumb-breakpoint-width) {
-      position: relative;
-      transform: translateY(0);
-      margin-inline: 0 var(--spacing-12);
+  &:focus {
+    outline: none;
 
-      @include ca-position($start: 0);
-    }
+    &::after {
+      $focus-ring-offset: calc(
+        (-2 * #{$border-focus-ring-border-width}) - #{$border-focus-ring-border-width}
+      );
 
-    @include title-block-medium-and-small {
-      display: none;
+      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;
     }
   }
 
-  @mixin visually-hidden {
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
+  @media only screen and (max-width: $breadcrumb-breakpoint-width) {
+    position: relative;
+    transform: translateY(0);
+    margin-inline: 0 var(--spacing-12);
 
-  @mixin visually-hidden-reset {
-    clip: initial;
-    clip-path: initial;
-    height: initial;
-    overflow: initial;
-    position: initial;
-    white-space: initial;
-    width: initial;
+    @include ca-position($start: 0);
   }
 
-  .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-medium-and-small {
+    display: none;
+  }
+}
 
-    position: absolute;
+@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-under-1645 {
-      @include ca-position($start: $ca-grid);
-    }
+@mixin visually-hidden-reset {
+  clip: initial;
+  clip-path: initial;
+  height: initial;
+  overflow: initial;
+  position: initial;
+  white-space: initial;
+  width: initial;
+}
 
-    @media only screen and (min-width: $breadcrumb-breakpoint-width) {
-      @include ca-position($start: calc(#{$breadcrumb-circle-width} - #{$ca-grid}));
-    }
+.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);
 
-    &: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;
+  position: absolute;
 
-      [dir='rtl'] & {
-        animation: reverse-slide-fade 0.4s;
-      }
-    }
+  @include title-block-under-1645 {
+    @include ca-position($start: $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;
+  @media only screen and (min-width: $breadcrumb-breakpoint-width) {
+    @include ca-position($start: calc(#{$breadcrumb-circle-width} - #{$ca-grid}));
   }
 
-  .breadcrumb,
-  .breadcrumb:hover,
-  .breadcrumbText {
-    color: $color-white;
+  &: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;
 
-    .educationVariant &,
-    .adminVariant & {
-      color: $color-purple-800;
+    [dir='rtl'] & {
+      animation: reverse-slide-fade 0.4s;
     }
   }
+}
+
+.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;
+}
 
-  .circle {
-    $border-width: 3px;
+.breadcrumb,
+.breadcrumb:hover,
+.breadcrumbText {
+  color: $color-white;
 
-    flex: 0 0 $breadcrumb-circle-width;
-    box-sizing: border-box;
-    width: $breadcrumb-circle-width;
-    height: $breadcrumb-circle-width;
+  .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;
     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;
-      color: $color-white;
-      background-color: rgba($color-white-rgb, 0.1);
-    }
+    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 {
@@ -703,3 +700,4 @@
     transform: translateX(0);
   }
 }
+/* stylelint-enable no-descending-specificity */