.o-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  white-space: nowrap;
  font-size: $font-m;
}

.o-breadcrumb-item {
  > a {
    padding: $space-2 $space-1;
    color: $color-blue-500;
    user-select: none;
  }

  &:not(.-active) {
    > a {
      &:focus,
      &:hover {
        color: $color-blue-800;
      }
    }
  }

  &.-active {
    > a {
      font-weight: $font-medium;
      color: $color-grey-700;
      cursor: default;

      &:focus,
      &:active {
        text-decoration: none;
      }
    }
  }

  & + & {
    &::before {
      content: "\f054";
      font-family: "Font Awesome 5 Free", sans-serif;
      font-size: 10px;
      font-weight: 900;
      color: $color-grey-300;
      margin-left: $space-2;
      margin-right: $space-2;
    }
  }
}