.timeline-vertical {
  @apply flex-col;
}
.timeline-compact,
.timeline-horizontal.timeline-compact {
  --timeline-row-start: 0;
  .timeline-start {
    @apply col-start-1 col-end-4 row-start-3 row-end-4 m-1 self-start justify-self-center;
  }
  li:has(.timeline-start) .timeline-end {
    @apply col-start-[none] row-start-auto;
  }
}
.timeline-vertical.timeline-compact {
  & > li {
    --timeline-col-start: 0;
  }
  .timeline-start {
    @apply col-start-3 col-end-4 row-start-1 row-end-4 self-center justify-self-start;
  }
  li:has(.timeline-start) .timeline-end {
    @apply col-start-auto row-start-[none];
  }
}
:where(.timeline-vertical > li) {
  --timeline-row-start: minmax(0, 1fr);
  --timeline-row-end: minmax(0, 1fr);
}
.timeline-vertical > li > hr {
  @apply h-full;
}

:where(.timeline-vertical > li) {
  @apply justify-items-center;
}
:where(.timeline-vertical > li > hr) {
  &:first-child {
    @apply col-start-2 row-start-1;
  }
  &:last-child {
    @apply col-start-2 col-end-auto row-start-3 row-end-[none];
  }
}
.timeline-vertical .timeline-start {
  @apply col-start-1 col-end-2 row-start-1 row-end-4 self-center justify-self-end;
}
.timeline-vertical .timeline-end {
  @apply col-start-3 col-end-4 row-start-1 row-end-4 self-center justify-self-start;
}
.timeline-vertical:where(.timeline-snap-icon) > li {
  --timeline-col-start: minmax(0, 1fr);
  --timeline-row-start: 0.5rem;
}
/* horizontal */
.timeline-horizontal {
  @apply flex-row;
}
.timeline-horizontal > li > hr {
  @apply w-full;
}
:where(.timeline-horizontal > li) {
  @apply items-center;
}
:where(.timeline-horizontal > li > hr) {
  &:first-child {
    @apply col-start-1 row-start-2;
  }
  &:last-child {
    @apply col-start-3 col-end-[none] row-start-2  row-end-auto;
  }
}
.timeline-horizontal .timeline-start {
  @apply col-start-1 col-end-4 row-start-1 row-end-2 self-end justify-self-center;
}
.timeline-horizontal .timeline-end {
  @apply col-start-1 col-end-4 row-start-3 row-end-4 self-start justify-self-center;
}

:where(.timeline-snap-icon) > li,
.timeline-horizontal:where(.timeline-snap-icon) > li {
  --timeline-col-start: 0.5rem;
  --timeline-row-start: minmax(0, 1fr);
}
