@layer components {
  /*
    パンくず。実測: overlays.md「5b. パンくず」と structure.md「背後に重ねた親のシート」。
    「From the to-do list: Salvaged, up-cycled materials」と同じく、地の文は13px・#757575、
    上の階層は青緑（--rx-link）の下線付きのリンクにする。区切りは淡い灰色の小さな記号（推測。手本は「:」で区切る文の形）。
  */
  .rx-breadcrumb {
    --rx-breadcrumb-text: #757575;
    min-inline-size: 0;
    color: var(--rx-breadcrumb-text);
    font-size: var(--rx-label);
    line-height: var(--rx-label-leading);
    & > ol {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: var(--rx-space-1) var(--rx-space-2);
      padding: 0;
      list-style: none;
    }
    & > ol > li {
      display: flex;
      align-items: baseline;
      gap: var(--rx-space-2);
      min-inline-size: 0;
    }
    & > ol > li + li::before {
      content: "›";
      flex-shrink: 0;
      color: var(--rx-gray-500);
    }
    & > ol > li > :is(a, span) {
      min-inline-size: 0;
      overflow-wrap: anywhere;
    }
    /* 上の階層はリンクと同じ青緑の文字に1pxの下線。ホバーで赤茶。当たり判定だけを上下に広げる。 */
    & > ol > li > a {
      position: relative;
      color: var(--rx-link);
      text-decoration-line: underline;
      text-decoration-thickness: var(--rx-stroke-width);
      text-underline-offset: 0.15em;
      &::before {
        content: "";
        position: absolute;
        inset-block: -0.5rem;
        inset-inline: -0.25rem;
      }
      &:hover {
        color: var(--rx-link-hover);
      }
    }
    /* 今いる場所は手本のパンくずに出ない（推測）。地の文より濃い黒の通常の太さにする。 */
    & > ol > li:last-child {
      color: var(--rx-ink);
    }
  }
}