:host {
  display: block;
}

:host ol {
  display: flex;
  list-style-type: none;
  align-items: center;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb) {
  display: none;
}

:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb.show) {
  display: flex;
}

:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.hide) {
  display: none;
  opacity: 0;
  visibility: hidden;
}

:host(.ic-breadcrumb-group-collapsed)
  ol
  ::slotted(ic-breadcrumb.visuallyhidden) {
  display: block;
  opacity: 0;
  transition: all var(--ic-easing-transition-slow);
}

:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.fade) {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  :host(.ic-breadcrumb-group-collapsed)
    ol
    ::slotted(ic-breadcrumb.visuallyhidden) {
    transition: none;
  }
}