.hb-steps {
  @apply ml-4 mb-12 pl-6 border-l border-gray-200 [counter-reset:hb_step];

  border-left-color: var(--color-neutral-200);
}

.dark .hb-steps {
  border-left-color: var(--color-neutral-600);
}

.hb-steps h3 {
  counter-increment: hb-step;

  &::before {
    @apply absolute w-[33px] h-[33px];
    @apply rounded-full border-4 border-white dark:border-slate-300;
    @apply bg-gray-100 dark:bg-hb-dark;
    @apply text-base font-normal text-center -indent-px;
    @apply mt-[3px] ml-[-41px];

    color: var(--color-neutral-700);
    content: counter(hb-step);
  }
}

.dark .hb-steps h3::before {
  color: var(--color-neutral-200);
}