/* Breadcrumb mapping. ui-viz lists Breadcrumb only as a component name (no spec), so these are current HM values built from the HM
   Semantic tokens. Parent links are secondary text that turns primary on hover; the current page is a primary-colored label. */
:root, [data-hm-theme] {
  --hm-breadcrumb-font-size: 14px;
  --hm-breadcrumb-line-height: 20px;
  --hm-breadcrumb-font-weight: 400;
  --hm-breadcrumb-gap: 8px;

  --hm-breadcrumb-link-color: var(--hm-sem-fg-secondary);
  --hm-breadcrumb-link-hover-color: var(--hm-sem-fg-primary);
  --hm-breadcrumb-page-color: var(--hm-sem-fg-primary);
  --hm-breadcrumb-page-font-weight: 700;
  --hm-breadcrumb-separator-color: var(--hm-sem-fg-secondary);
  --hm-breadcrumb-separator-size: 16px;
  --hm-breadcrumb-ellipsis-size: 20px;
  --hm-breadcrumb-focus-radius: 2px;
}

[data-slot="breadcrumb-list"] {
  gap: var(--hm-breadcrumb-gap);
  color: var(--hm-breadcrumb-link-color);
  font-size: var(--hm-breadcrumb-font-size);
  line-height: var(--hm-breadcrumb-line-height);
  font-weight: var(--hm-breadcrumb-font-weight);
}
[data-slot="breadcrumb-item"] {
  gap: var(--hm-breadcrumb-gap);
}
[data-slot="breadcrumb-link"] {
  color: var(--hm-breadcrumb-link-color);
  border-radius: var(--hm-breadcrumb-focus-radius);
  text-decoration: none;
  outline: none;
}
[data-slot="breadcrumb-link"]:hover {
  color: var(--hm-breadcrumb-link-hover-color);
  text-decoration: underline;
  text-underline-offset: 4px;
}
[data-slot="breadcrumb-link"]:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
}
[data-slot="breadcrumb-page"] {
  color: var(--hm-breadcrumb-page-color);
  font-weight: var(--hm-breadcrumb-page-font-weight);
  cursor: default;
}
[data-slot="breadcrumb-separator"] {
  color: var(--hm-breadcrumb-separator-color);
}
[data-slot="breadcrumb-separator"] > svg {
  width: var(--hm-breadcrumb-separator-size);
  height: var(--hm-breadcrumb-separator-size);
}
[data-slot="breadcrumb-ellipsis"] {
  width: var(--hm-breadcrumb-ellipsis-size);
  height: var(--hm-breadcrumb-ellipsis-size);
  color: var(--hm-breadcrumb-separator-color);
}
[data-slot="breadcrumb-ellipsis"] > svg {
  width: var(--hm-breadcrumb-separator-size);
  height: var(--hm-breadcrumb-separator-size);
}