.prs-breadcrumb {
  /* adjust this for link truncation width */
  --bread-max-w: 12rem;

  & > ol {
    color: var(--prs-c-gray-900);
    font-weight: normal;
    font-size: 0.875rem;
    line-height: 1.375rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;

    & > li {
      display: flex;
      align-items: center;
      gap: 0.25rem;

      &:where(:is(:last-child)) {
        max-width: var(--bread-max-w);
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition-property: var(--prs-transition-property);
        transition-timing-function: var(--prs-transition-timing);
        transition-duration: var(--prs-transition-duration);
      }
    }

    & > :where(li:not(:last-child))::after {
      margin: 3px 4.5px;
      border: 4px solid transparent;
      border-right: 0 none;
      border-left: 5px solid currentColor;
      content: '';
    }

  }

  a {
    max-width: var(--bread-max-w);
    color: var(--prs-c-primary);
    display: block;
    text-underline-offset: 0.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition-property: var(--prs-transition-property);
    transition-timing-function: var(--prs-transition-timing);
    transition-duration: var(--prs-transition-duration);

    &:hover {
      color: var(--prs-c-primary-600);
      text-decoration: underline;
    }
  }
}