/**
 * Default theme for Timeline components
 * Uses CSS variables for design token integration
 */
const timelineTheme = {
    // Root container - vertical layout
    baseStyle: "relative flex flex-col",
    // Root container - horizontal layout
    baseStyleHorizontal: "relative flex flex-row items-start",
    // Individual timeline item - vertical
    itemStyle: "relative flex gap-4",
    // Individual timeline item - horizontal
    itemStyleHorizontal: "relative flex flex-col items-center flex-1 gap-3",
    // Connector line - vertical (positioned on the marker column)
    lineStyle: "absolute top-0 bottom-0 w-0.5 bg-[var(--color-border)]",
    // Connector line - horizontal
    lineStyleHorizontal: "absolute left-0 right-0 h-0.5 bg-[var(--color-border)]",
    // Marker base styles (shared across statuses)
    markerStyle: "relative z-10 flex items-center justify-center shrink-0 rounded-full border-2 transition-colors duration-200",
    // Marker status-specific styles
    markerStatuses: {
        completed: "w-8 h-8 bg-[var(--color-success)] border-[var(--color-success)] text-[var(--color-success-contrast)]",
        active: "w-8 h-8 bg-[var(--color-primary)] border-[var(--color-primary)] text-[var(--color-primary-contrast)] ring-4 ring-[var(--color-primary-100)]",
        pending: "w-8 h-8 bg-[var(--color-background)] border-[var(--color-border)]",
    },
    // Content area - vertical
    contentStyle: "pb-8 pt-0.5 min-w-0",
    // Content area - horizontal
    contentStyleHorizontal: "text-center px-2 min-w-0",
};

export { timelineTheme };
