libs/barista-components/breadcrumbs/src/_breadcrumbs-theme.scss
// prettier-ignore
:host.dt-color-main {
  --dt-breadcrumbs-item-default-color: var(--dt-theme-main-default-color);
  --dt-breadcrumbs-item-hover-color: var(--dt-theme-main-hover-color);
  --dt-breadcrumbs-item-active-color: var(--dt-theme-main-active-color);
}

:host.dt-color-error {
  --dt-breadcrumbs-item-default-color: var(--dt-error-default-color);
  --dt-breadcrumbs-item-hover-color: var(--dt-error-hover-color);
  --dt-breadcrumbs-item-active-color: var(--dt-error-active-color);
}

:host.dt-color-neutral {
  --dt-breadcrumbs-item-default-color: var(--dt-neutral-default-color);
  --dt-breadcrumbs-item-hover-color: var(--dt-neutral-hover-color);
  --dt-breadcrumbs-item-active-color: var(--dt-neutral-active-color);
}

:host {
  background-color: var(--dt-breadcrumbs-item-default-color);
}

:host ::ng-deep a.dt-breadcrumbs-item:not(:last-child),
:host button.dt-breadcrumb-collapsed-trigger {
  background-color: var(--dt-breadcrumbs-item-active-color);
  &::before {
    background-color: var(--dt-breadcrumbs-item-active-color);
  }
}

:host ::ng-deep a.dt-breadcrumbs-item:not(:last-child):hover,
:host ::ng-deep a.dt-breadcrumbs-item:not(:last-child):focus {
  background-color: var(--dt-breadcrumbs-item-hover-color);
  &::before {
    background-color: var(--dt-breadcrumbs-item-hover-color);
  }
}

:host button.dt-breadcrumb-collapsed-trigger:hover,
:host button.dt-breadcrumb-collapsed-trigger:focus,
:host button.dt-breadcrumb-collapsed-trigger:active {
  background-color: var(--dt-breadcrumbs-item-hover-color);
  &::before {
    background-color: var(--dt-breadcrumbs-item-hover-color);
  }
}

:host
  ::ng-deep
  a.dt-breadcrumbs-item.dt-breadcrumbs-item-non-interactive:not(:last-child) {
  background-color: var(--dt-breadcrumbs-item-default-color);
  &::before {
    background-color: var(--dt-breadcrumbs-item-default-color);
  }
}
// prettier-ignore-start
/* stylelint-disable max-line-length, prettier/prettier */
// For whatever reason, stylelint-disable-next-line does not work...
:host
  ::ng-deep
  .dt-breadcrumbs-item:first-child:not(:only-child):not(.dt-breadcrumbs-item-non-interactive)::before,
:host button.dt-breadcrumb-collapsed-trigger::before {
  background-color: var(--dt-breadcrumbs-item-active-color);

  &.dt-breadcrumbs-item-non-interactive {
    background-color: var(--dt-breadcrumbs-item-default-color);
  }
}

:host
  ::ng-deep
  .dt-breadcrumbs-item:first-child:not(:only-child):not(.dt-breadcrumbs-item-non-interactive):hover::before {
  background-color: var(--dt-breadcrumbs-item-hover-color);
}
/* stylelint-enable max-line-length, prettier/prettier*/
// prettier-ignore-end

:host ::ng-deep .dt-breadcrumbs-item .dt-breadcrumb-non-clickable,
:host ::ng-deep a.dt-breadcrumbs-item.dt-breadcrumbs-item-non-interactive,
:host ::ng-deep a.dt-breadcrumbs-item:last-child {
  &::before {
    background-color: var(--dt-breadcrumbs-item-default-color);
  }
}
