.breadcrumb {
  position: relative;
  isolation: isolate;
}

.breadcrumb::after {
  content: "";
  position: absolute;
  width: 25%;
  top: 0;
  height: 100%;
  right: 0;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(to right, transparent, hsl(from var(--color-background) h s l / 65%) 25%);
}

.breadcrumb__list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  list-style: none;
  padding: 0;
  font-size: .825rem;
  line-height: 1.15;
  text-align: left;
  margin-bottom: .8rem;
}

.breadcrumb__item {
  flex-shrink: 0;
}

.breadcrumb__item:not(:last-child) {
  position: relative;
  padding-right: 1em;
  margin-right: 1em;
}

.breadcrumb__item:not(:last-child)::after {
  content: "/";
  font-weight: inherit;
  color: hsl(from var(--color-white) h s l / 45%);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -4px;
}

.breadcrumb__item:last-child {
  font-weight: 300;
}

.breadcrumb__link {
  text-underline-offset: .25em;
  font-weight: 600;
  color: var(--color-theme-primary);
  padding-block: .35em;
  display: block;
}

.breadcrumb__link:is(:hover, :focus) {
  text-decoration: underline;
}

.breadcrumb__icon {
  transition: opacity 250ms ease-in-out;
  pointer-events: none;
}

.breadcrumb__item [data-state="active"] {
  display: none;
}

.breadcrumb__link:is(:hover, :focus) [data-state="default"] {
  display: none;
}

.breadcrumb__link:is(:hover, :focus) [data-state="active"] {
  display: block;
}