@layer components {
  .breadcrumb {
    @apply flex flex-wrap items-center;

    &-item {
      @apply text-sm font-medium text-primary-500;

      &:not(:last-child) {
        @apply mr-1.5  after:ml-1.5 after:text-slate-500 after:content-['>'] after:dark:text-slate-400;
      }

      &:last-child {
        @apply font-normal text-slate-500 dark:text-slate-400;
      }
    }
  }
}
