/* 
 * Caution: "global styles" get injected into every component and can cause file size bloat.
 * These should only include SASS variables and mixins that are not written out to CSS directly
 */
/**
* @prop --cbp-breadcrumb-color: var(--cbp-color-text-darkest);
* @prop --cbp-breadcrumb-color-dark: var(--cbp-color-text-lightest);
* @prop --cbp-breadcrumb-gap: var(--cbp-space-2x);
* @prop --cbp-breadcrumb-divider: "/";
*/
:root {
  --cbp-breadcrumb-color: var(--cbp-color-text-darkest);
  --cbp-breadcrumb-color-dark: var(--cbp-color-text-lightest);
  --cbp-breadcrumb-gap: var(--cbp-space-2x);
  --cbp-breadcrumb-divider: "/";
}

[data-cbp-theme=light] cbp-breadcrumb[context*=dark]:not([context=light-always]),
[data-cbp-theme=dark] cbp-breadcrumb:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-breadcrumb-color: var(--cbp-breadcrumb-color-dark);
}

cbp-breadcrumb {
  color: var(--cbp-breadcrumb-color);
  display: block;
}
cbp-breadcrumb nav {
  display: flex;
  align-items: center;
  gap: var(--cbp-breadcrumb-gap);
  width: max-content;
  overflow: visible;
}
cbp-breadcrumb nav > *:not(:first-child)::before {
  content: var(--cbp-breadcrumb-divider);
  margin-inline-end: var(--cbp-breadcrumb-gap);
  white-space: nowrap;
}
cbp-breadcrumb nav a {
  white-space: nowrap;
}
cbp-breadcrumb nav > :first-child {
  margin-inline-end: calc(var(--cbp-breadcrumb-gap) * -1);
}
cbp-breadcrumb nav cbp-menu:not([hidden]) {
  display: flex;
  align-items: center;
  order: 1;
}