.breadcrumbs {
  display: flex;
  justify-content: center;
  position: relative;
}

.breadcrumbs ul {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  padding-block: var(--spacing-base-space-100);
  padding-inline-start: var(--spacing-base-space-300);
}

.breadcrumbs ul li {
  display: none;
  list-style: none;
  padding-block: var(--spacing-base-space-150);
}

.breadcrumbs ul li[hidden] {
  display: none;
}

.breadcrumbs ul li.back {
  display: block;
}

.breadcrumbs ul li.result {
  display: block;
}

.breadcrumbs ul li span {
  display: flex;
  align-items: center;
  color: var(--palette-default-fg-base);
  font-family: var(--typography-family-body-sans);
  font-size: var(--typography-font-size-body-16);
  font-weight: var(--typography-weight-medium);
  line-height: var(--typography-line-height-lh-24);
}

.breadcrumbs ul li span svg {
  width: 16px;
  height: 16px;
  margin-inline: var(--spacing-base-space-050) var(--spacing-base-space-100);
}

.breadcrumbs ul li span svg g path {
  stroke-width: 2px;
}

.breadcrumbs ul li span svg:has(g#icon-chevron-left) {
  margin-inline: var(--spacing-base-space-0) 0.625rem; /* Missing Token */
}

.breadcrumbs ul li span svg g#icon-chevron-right path {
  stroke: var(--buttons-secondary-default-fg);
}

.breadcrumbs ul li span a {
  color: var(--buttons-secondary-default-fg);
  font-family: var(--typography-family-body-sans);
  font-size: var(--typography-font-size-body-16);
  font-weight: var(--typography-weight-medium);
  line-height: var(--typography-line-height-lh-24);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: var(--spacing-base-space-050);
  text-underline-position: from-font;
}

.breadcrumbs ul li.back a {
  display: inline-flex;
}

.breadcrumbs ul li span a:hover {
  text-decoration-line: none;
}

@media (width >= 900px) {
  .breadcrumbs ul {
    padding-inline-start: var(--spacing-base-space-500);
  }

  .breadcrumbs ul li {
    display: block;
  }

  .breadcrumbs ul li.back {
    display: none;
  }
}