<template>
 <Flex :class="classObject">
  <slot />
 </Flex>
</template>

<script setup>
import { computed } from "#imports";
import Flex from "../../bootstrap/cssgrid/Flex";
const props = defineProps({
  step: {
    type: String,
    default: void 0
  },
  type: {
    type: String,
    default: "flex"
  },
  borderStyle: {
    type: String,
    default: "solid"
  }
});
const classObject = computed(() => {
  return {
    [`step`]: true,
    [`step-${props.step}`]: props.step,
    ["flex-column"]: true,
    [`flex-${props.step}-row`]: props.step && props.type != "timeline",
    [`step-${props.type}`]: props.type,
    [`step-border-${props.borderStyle}`]: props.borderStyle
  };
});
</script>

<style scoped>
.breakpoint-gte-sm .step-sm.step-centerd,
.breakpoint-gte-md .step-md.step-centerd,
.breakpoint-gte-lg .step-lg.step-centerd,
.breakpoint-gte-xl .step-xl.step-centerd {
  text-align: center;
}

:deep(.step-line) {
  border-right-style: none;
  border-bottom-style: none;
  border-top-style: v-bind(borderStyle);
  border-left-style: v-bind(borderStyle);
}
</style>
