.ds-breadcrumbs {
  --breadcrumbs-color: var(--bh-content-subtle);
  --breadcrumbs-current: var(--bh-content-default);
  --breadcrumbs-border: var(--bh-border-subtle);
  --breadcrumbs-surface: var(--bh-bg-raised);
  --breadcrumbs-radius: var(--bh-radius-lg-8);

  box-sizing: border-box;
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  color: var(--breadcrumbs-color);
  font-family: var(--bh-font-family);
  font-size: var(--bh-text-body-md-font-size);
  font-weight: var(--bh-font-weight-medium);
  letter-spacing: 0;
  line-height: var(--bh-text-body-md-line-height);
}

.ds-breadcrumbs *,
.ds-breadcrumbs *::before,
.ds-breadcrumbs *::after {
  box-sizing: border-box;
}

.ds-breadcrumbs ol {
  display: inline-flex;
  align-items: center;
  gap: var(--bh-space-xs-4);
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-breadcrumbs--raised ol {
  gap: var(--bh-space-md-8);
  padding: var(--bh-space-xl-12);
  border: var(--bh-space-xxxs-1) solid var(--breadcrumbs-border);
  border-radius: var(--breadcrumbs-radius);
  background: var(--breadcrumbs-surface);
}

.ds-breadcrumbs li,
.ds-breadcrumbs a,
.ds-breadcrumbs li > span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--bh-space-xs-4);
}

.ds-breadcrumbs a {
  color: inherit;
  text-decoration: none;
}

.ds-breadcrumbs a:hover {
  color: var(--breadcrumbs-current);
}

.ds-breadcrumbs a:focus-visible {
  border-radius: var(--bh-radius-sm-4);
  outline: var(--bh-space-xxs-2) solid var(--bh-border-focus);
  outline-offset: var(--bh-space-xxs-2);
}

.ds-breadcrumbs .is-current {
  color: var(--breadcrumbs-current);
}

.ds-breadcrumbs__icon {
  width: var(--bh-space-4xl-20);
  height: var(--bh-space-4xl-20);
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  color: currentColor;
}

.ds-breadcrumbs__icon:empty {
  display: none;
}

.ds-breadcrumbs__icon svg {
  width: var(--bh-space-4xl-20);
  height: var(--bh-space-4xl-20);
  display: block;
}

.ds-breadcrumbs__label {
  max-width: 20ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-breadcrumbs__label--hidden {
  position: absolute;
  width: var(--bh-space-xxxs-1);
  height: var(--bh-space-xxxs-1);
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.ds-breadcrumbs__separator {
  width: var(--bh-space-3xl-16);
  height: var(--bh-space-3xl-16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--breadcrumbs-color);
  line-height: var(--bh-text-body-2xs-regular-line-height);
}

.ds-breadcrumbs__separator svg {
  width: var(--bh-space-3xl-16);
  height: var(--bh-space-3xl-16);
  display: block;
}

.ds-breadcrumbs[dir="rtl"] .ds-breadcrumbs__separator svg {
  transform: scaleX(-1);
}

.ds-breadcrumbs--icon-only a,
.ds-breadcrumbs--icon-only li > span:not(.ds-breadcrumbs__separator) {
  width: var(--bh-space-6xl-32);
  height: var(--bh-space-6xl-32);
  justify-content: center;
  border-radius: var(--breadcrumbs-radius);
}

.ds-breadcrumbs--icon-only a:hover {
  background: var(--bh-interactive-ghost-hover);
}
