/* #Breadcrumb
   -------------------------------------------------------------------------- */
/*doc
---
title: breadcrumb
name: breadcrumb
categories: [project]
---

パンくずリストのコンポーネントです。横幅を超えると、折り返さず省略されます。

```block
<ol class="p-breadcrumb">
  <li class="p-breadcrumb__item">
    <a href="#" class="p-breadcrumb__link">home</a>
  </li>
  <li class="p-breadcrumb__item">
    <a href="#" class="p-breadcrumb__link">page1</a>
  </li>
  <li class="p-breadcrumb__item">page2</li>
</ol>
```
*/
.p-breadcrumb {
  overflow: hidden;
  margin: 0;
  padding-left: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  list-style-type: none;
}

.p-breadcrumb__item {
  display: inline-block;
  &:last-child {
    display: inline;
  }
}

.p-breadcrumb__link {
  display: inline-block;
}

/* 2つ目以降のリストの前に`>`を表示する。 */
.p-breadcrumb__item:not(:first-of-type):before {
  content: "\003E";
  margin: 0 0.5em;
}