/*
 * The trail above a page in a hierarchy (BreadcrumbsHelper#breadcrumbs_tag):
 * quiet links separated by a drawn ›, the page itself last in plain ink. It
 * wraps on a phone rather than scrolling, and each link is a 44px target on
 * touch through an ::after that reaches above and below its line.
 */
@layer components {
  .breadcrumbs {
    margin-block-end: var(--space-sm);
  }

  .breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3xs) var(--space-2xs);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--color-ink-muted);
    font-family: var(--font-ui);
    font-size: var(--text-ui-sm);
    line-height: var(--leading-ui-sm);
  }

  .breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);

    & a {
      position: relative;
    }

    &[aria-current="page"] {
      color: var(--color-ink);
    }
  }

  /* Outside the rule: Chrome before 130 drops declarations in an @media
     nested inside a nested pseudo-element. */
  @media (pointer: coarse) {
    .breadcrumbs__item a::after {
      content: "";
      position: absolute;
      inset-block: calc((100% - var(--target-min)) / 2);
      inset-inline: 0;
    }
  }

  .breadcrumbs__separator {
    color: var(--color-ink-subtle);
  }
}