@include b(breadcrumb) {
  @include e(list) {
    @include polyfill-column-gap(2px);

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
    margin: 0 -6px;
    list-style: none;
  }

  @include e(item) {
    line-height: 1.5;
    color: var(--#{$rd-prefix}text-color-sub);
    border-radius: var(--#{$rd-prefix}border-radius);

    @include m(link) {
      cursor: pointer;
      transition: color var(--#{$rd-prefix}animation-duration-base) linear,
        background-color var(--#{$rd-prefix}animation-duration-base) linear;

      &:hover {
        color: var(--#{$rd-prefix}text-color);
        background-color: var(--#{$rd-prefix}background-color-gray);
      }
    }

    @include m(last) {
      color: var(--#{$rd-prefix}text-color);
    }
  }

  @include e(separator) {
    color: var(--#{$rd-prefix}text-color-sub);
  }
}