.stepper {
  @apply inline-flex w-full flex-row items-start gap-4;
}

.stepper-item {
  @apply flex items-center flex-row flex-1;
}

.stepper-item-trigger {
  @apply focus-visible:border-ring focus-visible:ring-ring/50 inline-flex outline-none focus-visible:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 w-full flex-col items-start gap-2 rounded;
}

.stepper-item-indicator {
  @apply text-muted-foreground relative flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-medium bg-border h-1 w-full;
}

.stepper-item.active .stepper-item-indicator {
  @apply bg-foreground;
}

.stepper-item-title {
  @apply text-sm font-medium text-foreground;
}

.stepper-item:not(.active) .stepper-item-title {
  @apply text-muted-foreground;
}