.breadcrumbs {
  font-family: var(--font-family);
}

.breadcrumbs ul {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--font-size-sm);
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: var(--spacing-xxs);
  padding-block: calc(var(--spacing-xxs) + var(--density));
  padding-inline: 0;
  color: var(--color-fg-muted);
  border-radius: var(--border-radius-sm);
  position: relative;
  transition:
    color var(--transition-fast) var(--ease-standard),
    background-color var(--transition-fast) var(--ease-standard);
}

.breadcrumbs li:hover button {
  color: var(--color-fg-default);
  cursor: pointer;
}

.breadcrumbs li[aria-current='page'],
.breadcrumbs li:last-of-type {
  color: var(--color-fg-default);
  font-weight: var(--font-weight-medium);
  cursor: default;
}

.separator {
  display: flex;
  align-items: center;
  color: var(--color-fg-subtle);
  font-size: var(--font-size-md);
}

.breadcrumbs li svg {
  inline-size: var(--icon-size-sm);
  block-size: var(--icon-size-sm);
}

.breadcrumbs a,
.breadcrumbs button,
.breadcrumbs [role='link'] {
  all: unset;
  color: inherit;
  border-radius: var(--border-radius-default);
  padding-block: var(--spacing-xxs);
}

.breadcrumbs a:focus-visible,
.breadcrumbs button:focus-visible,
.breadcrumbs [role='link']:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.breadcrumbs [aria-disabled='true'],
.breadcrumbs .is-disabled {
  color: var(--color-disabled-fg);
  pointer-events: none;
}