.p-steplist {
  @apply relative m-0 flex list-none items-center justify-between overflow-x-auto p-0;
}

.p-step {
  @apply relative flex flex-auto items-center gap-4 p-2 last-of-type:flex-initial;
}

.p-step-header {
  @apply inline-flex cursor-pointer items-center gap-2 rounded-md border-none bg-transparent p-0 no-underline transition-colors duration-200 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary;
}

.p-step.p-disabled .p-step-header {
  @apply cursor-default;
}

.p-stepper.p-stepper-readonly .p-step {
  @apply cursor-auto;
}

.p-step-title {
  @apply block max-w-full overflow-hidden text-ellipsis whitespace-nowrap font-medium text-surface-500 transition-colors duration-200 dark:text-surface-400;
}

.p-step-number {
  @apply relative z-10 flex h-8 min-w-8 items-center justify-center rounded-full border-2 border-surface-200 bg-surface-0 text-lg font-medium leading-8 text-surface-500 after:absolute after:h-full after:w-full after:rounded-full after:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.06),0px_1px_1px_0px_rgba(0,0,0,0.12)] dark:border-surface-700 dark:bg-surface-900 dark:text-surface-400;
}

.p-step-active .p-step-header {
  @apply cursor-default;
}

.p-step-active .p-step-number {
  @apply border-surface-200 bg-surface-0 text-primary dark:border-surface-700 dark:bg-surface-900;
}

.p-step-active .p-step-title {
  @apply text-primary;
}

.p-step:not(.p-disabled):focus-visible {
  @apply outline outline-1 outline-offset-2 outline-primary;
}

.p-step:has(~ .p-step-active) .p-stepper-separator {
  @apply bg-primary;
}

.p-stepper-separator {
  @apply h-[2px] w-full flex-1 bg-surface-200 transition-colors duration-200 dark:bg-surface-700;
}

.p-steppanels {
  @apply px-2 pb-[1.125rem] pt-[0.875rem];
}

.p-steppanel {
  @apply bg-surface-0 text-surface-700 dark:bg-surface-900 dark:text-surface-0;
}

.p-stepper:has(.p-stepitem) {
  @apply flex flex-col;
}

.p-stepitem {
  @apply flex flex-initial flex-col;
}

.p-stepitem.p-stepitem-active {
  @apply flex-auto;
}

.p-stepitem .p-step {
  @apply flex-initial;
}

.p-stepitem .p-steppanel-content {
  @apply w-full ps-4;
}

.p-stepitem .p-steppanel {
  @apply flex flex-auto;
}

.p-stepitem .p-stepper-separator {
  @apply relative start-[-2.5px] ms-[1.625rem] h-auto w-[2px] flex-shrink-0 flex-grow-0 basis-auto;
}

.p-stepitem:has(~ .p-stepitem-active) .p-stepper-separator {
  @apply bg-primary;
}

.p-stepitem:last-of-type .p-steppanel {
  @apply ps-8;
}
