BreadcrumbsScroller.module.scss

// Horizontal scroll wrapper for the secondary-bar breadcrumbs. When the trail
// overflows, the scroll area is anchored to the right (current page visible)
// and a left chevron reveals ancestor crumbs. A left-edge fade signals that
// there is more content scrolled off to the left.

.scroller {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  position: relative;
}

// The chevrons overlay the ends of the scroll area (absolutely positioned)
// rather than sitting in the flex flow. This keeps the scroll area full-width
// and constant — so its scrollable range never shifts when a chevron toggles —
// while a hidden chevron leaves NO reserved gap at that edge. Each chevron
// carries the secondary bar's own background so a crumb scrolling underneath is
// masked rather than showing through the icon.
.leftChevron {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  color: var(--fgColor-muted, var(--color-fg-muted));
  background-color: var(--bgColor-default, var(--color-canvas-default));
}

.rightChevron {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  color: var(--fgColor-muted, var(--color-fg-muted));
  background-color: var(--bgColor-default, var(--color-canvas-default));
}

// On hover, keep the solid canvas background (Primer's invisible IconButton
// otherwise swaps in a translucent tint, letting crumbs bleed through the
// button) and instead signal interactivity by bolding the chevron: a
// currentColor stroke thickens the fill-based octicon glyph.
.leftChevron:hover,
.rightChevron:hover {
  background-color: var(
    --bgColor-default,
    var(--color-canvas-default)
  ) !important;
  color: var(--fgColor-default, var(--color-fg-default));

  svg {
    stroke: currentColor;
    stroke-width: 0.75px;
  }
}

// Hidden chevrons are removed from view and interaction (and from the tab
// order / a11y tree in the component). Because they're absolutely positioned
// they already occupy no layout space, so the scroll area is unaffected.
.chevronHidden {
  visibility: hidden;
  pointer-events: none;
}

.scrollArea {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  // Constant 16px on both ends: keeps a crumb off the border at the scroll
  // extremes, and mid-scroll the chevron overlays the end of the trail (its
  // solid background masks whatever passes underneath). Keeping this padding
  // fixed — never toggled with the chevrons — means the scroll content's width
  // never changes, so toggling a chevron can't reflow the trail or nudge the
  // scroll position (no hop, no mount bounce, no click-lands-short).
  padding: 0 16px;
  scrollbar-width: none; // Firefox — hide the horizontal scrollbar
  -ms-overflow-style: none;

  &::-webkit-scrollbar {
    display: none; // Chrome/Safari
  }

  // Make the brand Breadcrumbs <nav> the single, full-content-width scroll
  // child. Without this the brand nav fills only the visible width while its
  // <ol> overflows it — a nested overflow context that freezes scrollLeft at
  // its max so ancestor crumbs can never be revealed. Growing the nav to
  // max-content removes the nesting so the scroll range spans the whole trail;
  // min-width: 100% keeps short trails left-aligned and filling the container.
  :global(nav) {
    display: flex;
    flex: none;
    width: max-content;
    min-width: 100%;
    max-width: none;
    flex-wrap: nowrap;
  }

  :global(ol) {
    width: max-content;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}