@use "../mixin";

/*
---
name: breadcrumbs()
category:
  - core/abstract
---
Abstract breadcrumbs component

### scss
```scss
@use "node_modules/sass-basis/src/css/core";

.c-breadcrumbs {
  @include core.breadcrumbs();
}
```

### html
```ejs
<ol class="c-breadcrumbs">
  <li class="c-breadcrumbs__item"><a href="#">Lorem</a></li>
  <li class="c-breadcrumbs__item">ipsum</li>
</ol>
```
*/

@mixin breadcrumbs() {
  @include mixin.list-unstyled();

  &__item {
    display: inline;

    &:nth-child(n + 2) {
      &::before {
        content: '';
        margin: .45em .45em .15em .15em;
        display: inline-block;
        height: .4em;
        width: .4em;
        border-color: currentColor;
        border-style: solid;
        border-width: 1px 1px 0 0;
        transform: rotate(45deg);
      }
    }
  }
}