<script setup lang="ts">
import { StepperSeparator as ShadcnStepperSeparator } from '@/components/core/stepper';

defineOptions({
  name: 'UiStepperSeparator',
});
</script>

<template>
  <ShadcnStepperSeparator
    :class="[
      'absolute block shrink-0 rounded-full transition-colors',
      'left-[calc(50%+24px)] right-[calc(-50%+16px)] top-[23px] h-0.5',
      'group-data-[orientation=vertical]:left-[23px] group-data-[orientation=vertical]:top-[48px] group-data-[orientation=vertical]:bottom-[-40px] group-data-[orientation=vertical]:h-auto group-data-[orientation=vertical]:w-0.5 group-data-[orientation=vertical]:right-auto',
    ]"
  />
</template>
