:root {
  --breadcrumb-font: var(--font-type-label-small);
  --breadcrumb-slash-current-font: var(--breadcrumb-font);
  --breadcrumb-chevron-current-font: var(--font-type-label-small-strong);
  --breadcrumb-slash-gap: var(--space-2);
  --breadcrumb-chevron-gap: var(--space-3);
  --breadcrumb-slash-link-color: var(--color-link);
  --breadcrumb-chevron-link-color: var(--color-muted-foreground);
  --breadcrumb-slash-separator-color: var(--color-foreground);
  --breadcrumb-chevron-separator-color: var(--color-muted-foreground);
  --breadcrumb-icon-size: var(--space-4);
  --breadcrumb-link-radius: var(--radius-2);
  --breadcrumb-focus-outline: var(--focus-width) solid var(--color-focus-ring);
  --breadcrumb-rtl-transform: rotate(var(--rotate-half));
}

.breadcrumb {
  --breadcrumb-gap: var(--breadcrumb-slash-gap);
  --breadcrumb-link-color: var(--breadcrumb-slash-link-color);
  --breadcrumb-separator-color: var(--breadcrumb-slash-separator-color);
  --breadcrumb-current-font: var(--breadcrumb-slash-current-font);
}

.breadcrumb--chevron {
  --breadcrumb-gap: var(--breadcrumb-chevron-gap);
  --breadcrumb-link-color: var(--breadcrumb-chevron-link-color);
  --breadcrumb-separator-color: var(--breadcrumb-chevron-separator-color);
  --breadcrumb-current-font: var(--breadcrumb-chevron-current-font);
}

.breadcrumb {
  min-inline-size: 0;
  max-inline-size: 100%;
  font: var(--breadcrumb-font);
  color: var(--color-muted-foreground);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--breadcrumb-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb__item {
  display: flex;
  align-items: baseline;
  gap: var(--breadcrumb-gap);
  min-inline-size: 0;
  max-inline-size: 100%;
}

.breadcrumb__link,
.breadcrumb__text {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.breadcrumb__link {
  color: var(--breadcrumb-link-color);
  border-radius: var(--breadcrumb-link-radius);
  text-decoration: none;
}

.breadcrumb__link:hover {
  color: var(--color-foreground);
  text-decoration: underline;
}

.breadcrumb__link:focus-visible {
  outline: var(--breadcrumb-focus-outline);
  outline-offset: var(--focus-offset);
}

.breadcrumb__text[aria-current="page"] {
  color: var(--color-foreground);
  font: var(--breadcrumb-current-font);
}

.breadcrumb__separator {
  flex: none;
  color: var(--breadcrumb-separator-color);
}

.breadcrumb__icon {
  display: block;
  inline-size: var(--breadcrumb-icon-size);
  block-size: var(--breadcrumb-icon-size);
}

.breadcrumb--chevron .breadcrumb__separator {
  align-self: center;
}

.breadcrumb__icon:dir(rtl) {
  transform: var(--breadcrumb-rtl-transform);
}