/* lib/styles/components/breadcrumbs.css */

.breadcrumb--empty {
  display: none;
}

.breadcrumb {
  display: block;
  width: 100%;
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumb__link {
  white-space: nowrap;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition:
    color var(--motion-transition-interactive),
    text-decoration-color var(--motion-transition-interactive);
}

.breadcrumb__link:hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.1875rem;
  text-decoration-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
}

.breadcrumb__link:focus-visible {
  outline: var(--border-width-medium) solid color-mix(in srgb, var(--color-primary) 24%, transparent);
  outline-offset: var(--space-1);
}

.breadcrumb__separator {
  flex-shrink: 0;
  margin: 0 var(--space-1);
  color: var(--color-text-muted);
  font-size: 0.625rem;
  line-height: 1;
  transition: color var(--motion-transition-interactive);
}

.breadcrumb__current {
  margin-left: var(--space-1);
  white-space: nowrap;
  color: var(--color-heading);
  font-family: var(--font-body);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
}

.breadcrumb--dark .breadcrumb__link {
  color: color-mix(in srgb, var(--color-text-inverse) 60%, transparent);
}

.breadcrumb--dark .breadcrumb__link:hover {
  color: var(--color-text-inverse);
  text-decoration-color: color-mix(in srgb, var(--color-text-inverse) 40%, transparent);
}

.breadcrumb--dark .breadcrumb__separator {
  color: color-mix(in srgb, var(--color-text-inverse) 30%, transparent);
}

.breadcrumb--dark .breadcrumb__current {
  color: var(--color-text-inverse);
}

@media (max-width: 39.9375rem) {
  .breadcrumb__link,
  .breadcrumb__current {
    font-size: var(--font-size-label);
  }

  .breadcrumb__separator {
    font-size: 0.5625rem;
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .breadcrumb__link,
  .breadcrumb__separator {
    transition-duration: 0.01ms !important;
  }
}