.navigation{
  @apply flex w-fit rounded-primary
}
.item-wrapper{
  @apply inline-flex items-center rtl:space-x-reverse;
}
.item {
  @apply relative inline-flex items-center  px-3 py-2 text-sm font-medium;
}
.item-after {
  @apply after:absolute after:left-[100%] after:top-1/2 after:mt-[-18px] after:block after:h-0 after:w-0 after:border-y-[18px] after:border-l-[8px] after:!border-l-white after:border-r-transparent after:border-y-transparent after:content-[''] after:z-20;
}
.item-before {
  @apply before:absolute before:left-[100%] before:top-1/2 before:mt-[-18px] before:block before:h-0 before:ml-[1px] before:w-0 before:border-y-[18px] before:border-l-[8px] before:border-l-green-500 before:border-y-transparent before:content-[''] before:z-10;
}
.item-label{
  @apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-xs flex items-center justify-center gap-1
}
.check-icon{
  @apply rounded-full bg-primary-50 p-0.5 text-blue-500
}