.breadcrumb {
  @apply inline-flex flex-wrap px-1;
}

.breadcrumb-item + .breadcrumb-item::before {
  @apply inline-block px-1;
  color: hsl(var(--color-text-muted));
  content: "/";
}

.breadcrumb-item a {
  @apply no-underline;

  &:hover {
    @apply underline;
  }

  &:focus {
    @apply ring-accent;
  }
}

.breadcrumb-item.active {
  @apply font-semibold;
}