Module:Creo/Components/Evolution/styles.css

.t-creo-evolution {
	--t-creo-evolution-gutter: 16px;
	--t-creo-evolution-offset: calc(var(--t-creo-evolution-gutter) * -1);
	--t-creo-evolution-line-width: 1px;
	--t-creo-evolution-line: var(--t-creo-evolution-line-width) solid
		var(--border-color-base);
	--t-creo-evolution-item-max-width: 200px;

	border: 1px solid var(--border-color-base);
	border-radius: 2px;
	margin-block: 16px;
	background: var(--background-color-neutral-subtle);
	font-size: 0.875rem;
	line-height: 1.375;
	text-align: center;
}

.t-creo-evolution-wrapper {
	overflow: auto;
}

.t-creo-evolution-wrapper > .t-creo-evolution-tree {
	/* Stated explicitly, not inherited: the skin does not apply border-box
	   here, so the padding below was being added on top of `width: 100%` and
	   made the tree 24px wider than the wrapper it scrolls inside. That gave
	   every panel a horizontal scrollbar, however small the tree was. */
	box-sizing: border-box;
	padding: 12px;
	/* Items carry no bottom gutter (see below), so the panel adds it back once
	   here, matching the space the first row's top padding puts above the
	   first card. */
	padding-bottom: calc(12px + var(--t-creo-evolution-gutter));
}

.t-creo-evolution-tree,
.t-creo-evolution-tree-item {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.t-creo-evolution-tree {
	display: table;
	width: 100%;
}

.t-creo-evolution-tree-item {
	/* No bottom padding. The gutter under an item used to be added here and
	   then taken away again by a negative margin on the tree, which pulled the
	   scrolling wrapper 16px shorter than its own content and left every panel
	   showing a vertical scrollbar. The space above the next level already
	   comes from that level's top padding plus the parent card's margin. */
	--padding: var(--t-creo-evolution-gutter)
		calc(var(--t-creo-evolution-gutter) / 2) 0;
	display: table-cell;
	padding: var(--padding);
	vertical-align: top;
}

.t-creo-evolution-tree-item .t-card {
	margin-inline: auto;
	margin-bottom: var(--t-creo-evolution-gutter);
	max-width: var(--t-creo-evolution-item-max-width);
	background: var(--background-color-base);
	flex-direction: column;
}

/* A card with nothing below it connects to nothing, so it needs no gutter.
   :last-child rather than :only-child, because TemplateStyles emits a <style>
   or <link> element inside every item ahead of the card. */
.t-creo-evolution-tree-item > .t-card:last-child {
	margin-bottom: 0;
}

.t-creo-evolution-tree-item.t-creo-evolution-tree-item--current > .t-card {
	border-color: var(--color-progressive) !important;
	box-shadow: var(--color-progressive) 0 0 0 1px;
}

.t-creo-evolution-tree-item .t-card__thumbnail img {
	width: 80px;
	height: 80px;
	object-fit: contain;
	object-position: bottom;
}

/* Horizontal lines */
.t-creo-evolution-tree-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	outline: var(--t-creo-evolution-line);
}

.t-creo-evolution-tree-item:first-child::before {
	left: 50%;
}

.t-creo-evolution-tree-item:last-child::before {
	right: 50%;
}

/* Vertical lines */
.t-creo-evolution-tree::before,
.t-creo-evolution-tree-item > .t-card::before {
	content: '';
	position: absolute;
	left: 50%;
	height: var(--t-creo-evolution-gutter);
	outline: var(--t-creo-evolution-line);
}

.t-creo-evolution-tree::before {
	top: var(--t-creo-evolution-offset);
}

.t-creo-evolution-tree-item > .t-card::before {
	--offset: calc(
		var(--t-creo-evolution-offset) - var(--t-creo-evolution-line-width)
	);
	top: var(--offset);
}

.t-creo-evolution-wrapper
	> .t-creo-evolution-tree
	> .t-creo-evolution-tree-item
	> .t-card::before {
	display: none;
}

/* Interactions */
.t-creo-evolution-tree-item .t-card--is-link .t-card__thumbnail img {
	transition: transform 100ms ease;
}

.t-creo-evolution-tree-item .t-card--is-link:hover .t-card__thumbnail img {
	transform: translateY(-4px);
}