import { defineComponent as v, useSlots as f, inject as h, computed as m, openBlock as c, createElementBlock as r, createElementVNode as t, normalizeClass as p, renderSlot as d, createCommentVNode as _ } from "vue";
import { T as I } from "./keys-BEdEsanp.js";
const T = {
  class: "stash-timeline-item group contents list-none",
  "data-test": "stash-timeline-item"
}, C = /* @__PURE__ */ v({
  __name: "TimelineItem",
  setup(b) {
    const u = f(), s = h(I.key);
    if (!s)
      throw Error("The TimelineItem component must be a child of the Timeline component.");
    const { density: o, side: e } = s, n = m(() => ({
      main: {
        "col-start-3": e.value === "end",
        "col-end-2": e.value === "start"
      },
      opposite: {
        "col-end-2": e.value === "end",
        "col-start-3": e.value === "start"
      }
    })), i = m(() => ({
      "mb-3": o.value === "compact",
      "mb-6": o.value === "comfortable"
    }));
    return (l, a) => (c(), r("li", T, [
      t("div", {
        class: p(["stash-timeline-item__main-content", [n.value.main, i.value]]),
        "data-test": "stash-timeline-item|content"
      }, [
        d(l.$slots, "default")
      ], 2),
      a[0] || (a[0] = t("div", {
        class: "stash-timeline-separator col-start-2 col-end-3 flex h-full flex-col items-center",
        "data-test": "stash-timeline-separator"
      }, [
        t("div", { class: "mt-[5px] rounded-full bg-ice-500 p-1.5" }),
        t("div", { class: "w-[2px] flex-1 bg-ice-500" })
      ], -1)),
      u.opposite ? (c(), r("div", {
        key: 0,
        class: p(["stash-timeline-item__opposite-content", [n.value.opposite, i.value]]),
        "data-test": "stash-timeline-item|opposite-content"
      }, [
        d(l.$slots, "opposite")
      ], 2)) : _("", !0)
    ]));
  }
});
export {
  C as default
};
//# sourceMappingURL=TimelineItem.js.map
