Timeline

.pds-timeline-item {
	color: var(--pds-color-foreground-default);
	--timeline-item-status-color: var(--pds-color-foreground-default-secondary);
}

.pds-timeline-item--agentic {
	--timeline-item-status-color: var(--pds-color-status-discovery-foreground);
}

.pds-timeline-item--error {
	--timeline-item-status-color: var(--pds-color-status-critical-foreground);
}

.pds-timeline-item--pending {
	--timeline-item-status-color: var(--pds-color-foreground-default-secondary);

	color: var(--pds-color-foreground-default-secondary);
}

.pds-timeline-item__row {
	align-items: center;
	display: flex;
	gap: var(--pds-spacing-xs);
	list-style: none;

	&::-webkit-details-marker {
		display: none;
	}
}

/* An expandable step is only as wide as its content, with the chevron right
   after the text (like the Chain of Thought summary), so the chevron reads as
   part of what you click. */
/* The time sits at the end of the row. An expandable step with a time spans
   the full row so the whole line is the click target, and the chevron comes
   after the time. */
.pds-timeline-item__time {
	color: var(--pds-color-foreground-default-secondary);
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
	margin-inline-start: auto;
	padding-inline-start: var(--pds-spacing-s);
}

summary.pds-timeline-item__row {
	border-radius: var(--pds-border-radius-default);
	cursor: pointer;
	display: inline-flex;

	&:focus-visible {
		outline: var(--pds-border-width-outline) solid
			var(--pds-color-interactive-focus);
	}
}

.pds-timeline-item--has-time summary.pds-timeline-item__row {
	display: flex;
}

.pds-timeline-item__status,
.pds-timeline-item__toggle {
	height: 1em;
	width: 1em;
}

.pds-timeline-item__status {
	color: var(--timeline-item-status-color);
	flex-shrink: 0;
}

.pds-timeline-item__secondary-text {
	color: var(--pds-color-foreground-default-secondary);

	code {
		font-family: var(--pds-typography-ff-code);
	}
}

.pds-timeline-item__toggle {
	color: var(--pds-color-foreground-default-secondary);
	flex-shrink: 0;
	transition: var(--pds-animation-transition-rotation);
}

/* Hover cue: the chevron darkens. */
summary.pds-timeline-item__row:hover .pds-timeline-item__toggle {
	color: var(--pds-color-foreground-default);
}

/* Open: the chevron flips to point up, as in the Chain of Thought summary. */
.pds-timeline-item details[open] .pds-timeline-item__toggle {
	transform: rotate(180deg);
}

.pds-timeline-item__detail {
	color: var(--pds-color-foreground-default-secondary);
	margin-block-start: var(--pds-spacing-2xs);
	padding-inline-start: var(--pds-spacing-l);
}

/* Detail text takes the step's size. Paragraphs would otherwise use the PDS
   default paragraph size and margins. */
.pds-timeline-item__detail p {
	font-size: inherit;
	line-height: inherit;
	margin: 0;
}

.pds-timeline-item__detail code {
	font-family: var(--pds-typography-ff-code);
}

/* Consumer content under the row. When the row has an icon, the content lines
   up with the label. */
.pds-timeline-item__content {
	margin-block-start: var(--pds-spacing-xs);
}

.pds-timeline-item__content--indented {
	padding-inline-start: calc(1em + var(--pds-spacing-xs));
}

.pds-timeline-item--quiet {
	color: var(--pds-color-foreground-default-secondary);
}

/* Diff counts in the secondary text slot. */
.pds-timeline-item__added {
	color: var(--pds-color-status-success-foreground);
}

.pds-timeline-item__removed {
	color: var(--pds-color-status-critical-foreground);
}