<template>
  <Flex class="step-item">
    <FlexItem class="step-item-avatar" align-items="center" justify-content="start" margin="e-3 b-3">
      <Avatar circle v-bind="attrs" />
      <b-div rounded="pill" class="step-line" />
    </FlexItem>
    <FlexItem class="step-item-content">
      <b-div class="step-item-content-inner">
        <slot />
      </b-div>
    </FlexItem>
  </Flex>
</template>

<script setup>
import { useAttrs, computed } from "#imports";
import Flex from "../../bootstrap/cssgrid/Flex";
import FlexItem from "../../bootstrap/cssgrid/FlexItem";
import Avatar from "../avatar/Avatar";
import bDiv from "../../html-block/Div";
const props = defineProps({});
const attrs = useAttrs();
const avatarSize = computed(() => {
  return `var(--bs-font-size-${attrs.size || "base"})`;
});
</script>

<style scoped>
.step-item {
  flex-direction: row;
}

.step-item-avatar {
  display: flex;
  flex-direction: column;
}

.breakpoint-before-mounted .step-line {
  display: none;
}

.step-line {
  border-color: var(--bs-border-color);
  border-right-style: none;
  border-bottom-style: none;
  border-left-width: 0.125rem;
  border-top-width: 0.125rem;
  flex-grow: 1;
  margin-top: 0.5em;
}

.step-centerd .step-item:last-child .step-line {
  display: none;
}

.step-inline .step-item {
  margin-bottom: 2em;
  flex-grow: 1;
  align-items: center;
}
.step-inline .step-item-avatar {
  position: relative;
  margin: 0 !important;
}
.step-inline .step-line {
  position: absolute;
  top: calc(100% + 0.5em);
  left: 50%;
  height: calc(100% - 1.5em);
  margin-top: 0;
  margin-bottom: 0;
}

.breakpoint-gte-sm .step-sm.step-flex .step-item,
.breakpoint-gte-md .step-md.step-flex .step-item,
.breakpoint-gte-lg .step-lg.step-flex .step-item,
.breakpoint-gte-xl .step-xl.step-flex .step-item {
  flex-direction: column;
}
.breakpoint-gte-sm .step-sm.step-flex .step-item-avatar,
.breakpoint-gte-md .step-md.step-flex .step-item-avatar,
.breakpoint-gte-lg .step-lg.step-flex .step-item-avatar,
.breakpoint-gte-xl .step-xl.step-flex .step-item-avatar {
  flex-direction: row;
}
.breakpoint-gte-sm .step-sm.step-flex .step-line,
.breakpoint-gte-md .step-md.step-flex .step-line,
.breakpoint-gte-lg .step-lg.step-flex .step-line,
.breakpoint-gte-xl .step-xl.step-flex .step-line {
  margin-left: 0.5em;
  margin-right: 1em;
  margin-top: 0;
  margin-bottom: 0;
}
.breakpoint-gte-sm .step-sm.step-centerd .step-item,
.breakpoint-gte-md .step-md.step-centerd .step-item,
.breakpoint-gte-lg .step-lg.step-centerd .step-item,
.breakpoint-gte-xl .step-xl.step-centerd .step-item {
  flex-direction: column;
}
.breakpoint-gte-sm .step-sm.step-centerd .step-item-avatar,
.breakpoint-gte-md .step-md.step-centerd .step-item-avatar,
.breakpoint-gte-lg .step-lg.step-centerd .step-item-avatar,
.breakpoint-gte-xl .step-xl.step-centerd .step-item-avatar {
  display: block;
  position: relative;
}
.breakpoint-gte-sm .step-sm.step-centerd .step-line,
.breakpoint-gte-md .step-md.step-centerd .step-line,
.breakpoint-gte-lg .step-lg.step-centerd .step-line,
.breakpoint-gte-xl .step-xl.step-centerd .step-line {
  position: absolute;
  top: 50%;
  left: calc(50% - 1px);
  width: calc(100% - 6em);
  margin-left: 3em;
  margin-top: 0;
  margin-bottom: 0;
}
.breakpoint-gte-sm .step-sm.step-inline .step-item,
.breakpoint-gte-md .step-md.step-inline .step-item,
.breakpoint-gte-lg .step-lg.step-inline .step-item,
.breakpoint-gte-xl .step-xl.step-inline .step-item {
  margin-bottom: 0;
  align-items: between;
}
.breakpoint-gte-sm .step-sm.step-inline .step-item-content,
.breakpoint-gte-md .step-md.step-inline .step-item-content,
.breakpoint-gte-lg .step-lg.step-inline .step-item-content,
.breakpoint-gte-xl .step-xl.step-inline .step-item-content {
  flex-grow: 1;
  position: relative;
  display: flex;
  align-items: center;
}
.breakpoint-gte-sm .step-sm.step-inline .step-item-content-inner,
.breakpoint-gte-md .step-md.step-inline .step-item-content-inner,
.breakpoint-gte-lg .step-lg.step-inline .step-item-content-inner,
.breakpoint-gte-xl .step-xl.step-inline .step-item-content-inner {
  display: inline-block;
}
.breakpoint-gte-sm .step-sm.step-inline .step-item-content::after,
.breakpoint-gte-md .step-md.step-inline .step-item-content::after,
.breakpoint-gte-lg .step-lg.step-inline .step-item-content::after,
.breakpoint-gte-xl .step-xl.step-inline .step-item-content::after {
  content: "";
  top: 50%;
  flex-grow: 1;
  border-top-style: solid;
  border-top-color: var(--bs-border-color);
  margin-left: 0.5em;
  margin-right: 1em;
}
.breakpoint-gte-sm .step-sm.step-inline .step-line,
.breakpoint-gte-md .step-md.step-inline .step-line,
.breakpoint-gte-lg .step-lg.step-inline .step-line,
.breakpoint-gte-xl .step-xl.step-inline .step-line {
  display: none;
}
.breakpoint-gte-sm .step-sm.step-timeline .step-item,
.breakpoint-gte-md .step-md.step-timeline .step-item,
.breakpoint-gte-lg .step-lg.step-timeline .step-item,
.breakpoint-gte-xl .step-xl.step-timeline .step-item {
  margin-left: 50%;
  flex-basis: 50%;
  position: relative;
}
.breakpoint-gte-sm .step-sm.step-timeline .step-item-avatar,
.breakpoint-gte-md .step-md.step-timeline .step-item-avatar,
.breakpoint-gte-lg .step-lg.step-timeline .step-item-avatar,
.breakpoint-gte-xl .step-xl.step-timeline .step-item-avatar {
  display: inline-flex;
  justify-content: center !important;
  align-items: center !important;
  margin-left: calc(v-bind(avatarSize) * -1.5) !important;
  margin-right: 1em !important;
}
.breakpoint-gte-sm .step-sm.step-timeline .step-item:nth-child(even),
.breakpoint-gte-md .step-md.step-timeline .step-item:nth-child(even),
.breakpoint-gte-lg .step-lg.step-timeline .step-item:nth-child(even),
.breakpoint-gte-xl .step-xl.step-timeline .step-item:nth-child(even) {
  flex-direction: row-reverse;
  text-align: right;
  margin-left: auto;
  margin-right: 50%;
}
.breakpoint-gte-sm .step-sm.step-timeline .step-item:nth-child(even) .step-item-avatar,
.breakpoint-gte-md .step-md.step-timeline .step-item:nth-child(even) .step-item-avatar,
.breakpoint-gte-lg .step-lg.step-timeline .step-item:nth-child(even) .step-item-avatar,
.breakpoint-gte-xl .step-xl.step-timeline .step-item:nth-child(even) .step-item-avatar {
  margin-left: 1em !important;
  margin-right: calc(v-bind(avatarSize) * -1.5) !important;
}
</style>
