@breadcrumb-prefix: ~'@{icecream-prefix}-breadcrumb';

.@{breadcrumb-prefix} {
  .extendBase();
  color: @icecream-color-grey-8;

  &-item {
    .extendBase();
    color: @icecream-color-grey-8;
    .setFontSize(@icecream-font-size-lg);
    font-weight: @icecream-bold;
    text-decoration: none;

    &:hover {
      color: @icecream-primary-color;

      &::after {
        color: @icecream-color-grey-8;
      }
    }

    &:not(:last-child)::after {
      content: '\002f';
      margin: 0 10px;
    }

    &:last-child {
      color: @icecream-color-grey-10;
    }
  }
}