.breadcrumb {
  display: inline-flex;
  font-size: $font-size-smaller;
  align-items: center;
  margin: 1.25rem 0;
  flex-wrap: wrap;

  .ic {
    margin: 0 .125rem;
    color: var(--grey-4);

    &:nth-child(1) {
      margin-left: 0;
      margin-right: .3125rem;
    }
  }

  span {
    white-space: pre;
  }

  span.current {
    background-color: var(--color-red-a1);
    border-radius: .625rem;
    padding: 0 .625rem;
    the-transition();

    span {
      white-space: normal;
    }
    a {
      color: var(--primary-color);
    }

    &:hover {
      background-color: var(--color-red-a3);
    }
  }
}