:where(:root),
:where(:host) {
  --vaadin-breadcrumbs-font-weight: var(--aura-font-weight-medium);
  --vaadin-breadcrumbs-link-color: 'inherit';
}

vaadin-breadcrumbs[theme~='accent'] {
  --vaadin-breadcrumbs-link-color: var(--aura-accent-text-color);
}

vaadin-breadcrumbs-item:not([slot='overlay'])::part(link),
vaadin-breadcrumbs::part(overflow-button) {
  transition:
    color 80ms,
    background-color 80ms;
}

vaadin-breadcrumbs-item[current] {
  font-weight: var(--aura-font-weight-semibold);
}

@media (any-hover: hover) {
  vaadin-breadcrumbs-item:not([slot='overlay'], [disabled])::part(link):hover,
  vaadin-breadcrumbs::part(overflow-button):hover {
    color: var(--vaadin-text-color);
  }

  vaadin-breadcrumbs-item[slot='overlay']:not([disabled])::part(link):hover {
    background: var(--_aura-highlight-color);
  }
}

vaadin-breadcrumbs-item[slot='overlay']::part(link) {
  --vaadin-breadcrumbs-item-border-radius: var(--vaadin-item-border-radius);
  font-weight: var(--aura-font-weight-medium);
  -webkit-user-select: none;
  user-select: none;
}

vaadin-breadcrumbs-item:not([disabled], [slot='overlay'])::part(link):active,
vaadin-breadcrumbs::part(overflow-button):active
/* TODO need a part or state to target the overflow-button when it's expanded */ {
  background: var(--vaadin-background-container-strong);
  color: var(--vaadin-text-color);
}

vaadin-breadcrumbs-item[slot='overlay']:not([disabled])::part(link):active {
  background: var(--_aura-highlight-color);
}