breadcrumbs.css

.ds-breadcrumbs {
  --dsc-breadcrumbs-spacing: var(--ds-spacing-2);
  --dsc-breadcrumbs-chevron-size: var(--ds-sizing-6);

  &[data-size='sm'] {
    --dsc-breadcrumbs-spacing: var(--ds-spacing-1);
    --dsc-breadcrumbs-chevron-size: var(--ds-sizing-5);
  }

  &[data-size='lg'] {
    --dsc-breadcrumbs-spacing: var(--ds-spacing-3);
    --dsc-breadcrumbs-chevron-size: var(--ds-sizing-7);
  }

  & > :is(ol, ul) {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    margin: 0;
    padding: 0;
    gap: var(--dsc-breadcrumbs-spacing) 0;
  }

  & a:not(:focus-visible) {
    color: inherit;
  }

  & a[aria-current='page'] {
    text-decoration: none;
  }

  /* Draw chevron between items and before back link */
  & li:where(:not(:last-child))::after,
  & > :not(ol, ul)::before {
    background: currentcolor;
    content: '';
    display: inline-block;
    height: var(--dsc-breadcrumbs-chevron-size);
    margin-inline: var(--dsc-breadcrumbs-spacing);
    mask: center / contain no-repeat
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M9.47 5.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 1 1-1.06-1.06L14.44 12 9.47 7.03a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");
    vertical-align: middle;
    width: var(--dsc-breadcrumbs-chevron-size);
  }

  /* When link is direct child of Breadcrumbs, make it back button */
  & > :not(ol, ul)::before {
    margin: 0;
    rotate: 180deg;
  }

  @media (max-width: 650px) {
    & > :is(ol, ul):not(:only-child) {
      display: none; /* Hide list when mobile and having back link */
    }
  }

  @media (min-width: 651px) {
    & > :not(ol, ul) {
      display: none; /* Hide back link when desktop and having list */
    }
  }
}