@utility breadcrumb {
  @layer base {
    --breadcrumb-font-size: var(--text-sm);
    --breadcrumb-item-active-color: var(--text-color-default);
    --breadcrumb-item-gap: --spacing(2);
    --breadcrumb-item-separator: '/';
    --breadcrumb-separator-color: var(--text-color-muted);
    @apply flex flex-wrap m-0 p-0
    text-[length:var(--breadcrumb-font-size)];
  }
}

@utility breadcrumb-separator-dashed {
  @layer base {
    --breadcrumb-item-separator: '-';
  }
}
@utility breadcrumb-separator-arrow {
  @layer base {
    --breadcrumb-item-separator: '>';
  }
}

@utility breadcrumb-item {
  @layer base {
    @apply flex items-center;
    > * {
      @apply flex items-center gap-0.5;
    }
    + .breadcrumb-item {
      @apply before:content-[var(--breadcrumb-item-separator)]
      before:text-[var(--breadcrumb-separator-color)]
      before:mx-[var(--breadcrumb-item-gap)];
    }

    &.active {
      @apply text-[var(--breadcrumb-item-active-color)] gap-0.5;
    }
  }
}