.breadcrumb {
  .hero-post & {
    @apply bg-zinc-200 py-4;

    .breadcrumb__list {
      @apply container;
    }
  }
}

.breadcrumb__list {
  --text-color: var(--text-color-override, theme('colors.zinc.900'));
  @apply text-sm text-[var(--text-color)] gap-y-1 leading-tight;
}

.breadcrumb__item {
  @apply flex items-center truncate;

  &:first-of-type > .material-symbols-sharp {
    @apply hidden min-w-[1em];
  }

  .material-symbols-sharp {
    @apply text-zinc-600 text-xs mx-1;
  }
}

.breadcrumb__link {
  @apply hover:text-sky-500;
}

.breadcrumb__link:is([aria-current="page"]) {
  @apply cursor-default;
}