:host {
  @apply block bg-white text-active-branch h-12 w-full max-w-full relative rounded-[5px];
}

.shared-breadcrumb__prefix {
  @apply absolute left-0 top-0 bottom-0 bg-white rounded-l-[5px];
}

.shared-breadcrumb__prefix::after {
  @apply block w-6 -right-6 inset-y-0 absolute;
  content: "";
  box-shadow: 16px 0px 24px 0px white inset;
}

.shared-breadcrumb__suffix {
  @apply absolute right-0 top-0 bottom-0 bg-white rounded-r-[5px];
}

.shared-breadcrumb__suffix::before {
  @apply block w-6 -left-6 inset-y-0 absolute;
  content: "";
  box-shadow: -16px 0px 24px 0px white inset;
}

.shared-breadcrumb__crumbs {
  @apply grid grid-flow-col h-full items-center justify-center w-full max-w-screen-desktop-small overflow-x-scroll mx-auto;
}

.shared-breadcrumb__crumb {
  @apply whitespace-nowrap max-w-[200px] truncate;
}

.shared-breadcrumb__button-back {
  @apply flex flex-row items-center justify-start h-full px-4;
}
