ul.breadcrumbs {
  display: flex;
  height: scale.$lg-4;

  li {
    display: flex;
    align-items: flex-start;
    @include Typography.Interface(M);
    overflow: hidden;

    a {
      color: inherit;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      overflow: hidden;

      svg {
        margin-right: scale.$sm-3;
      }

      &:hover {
        color: rgb(var(--link));
      }

      span {
        font-weight: normal;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }

    &::after {
      content: '/';
      color: rgb(var(--outline));
      font-weight: normal;
      margin-inline-start: 0.5rem;
    }

    &:last-child::after {
      display: none;
    }
  }
}
