/* The trail above the page heading.

   Values are the legacy `components/custom/Breadcrumb.vue`'s: 12px text, the
   24px glyph with 8px either side, and the current page darker than the links
   behind it. */
.breadcrumb {
  margin-bottom: 20px;
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  justify-content: start;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 400;
}

.breadcrumb-separator {
  flex: none;
  margin: 0 8px;
  color: var(--gray-500);
}

.breadcrumb-link {
  color: var(--gray-500);
  white-space: nowrap;
}

.breadcrumb-current {
  color: var(--gray-900);
  white-space: nowrap;
}