.mosaic-tt {
	--mosaic-tt-line: var(--mosaic-color-border, #d5d9e2);
	--mosaic-tt-marker: var(--mosaic-color-muted, #8a90a0);
	--mosaic-tt-active: var(--mosaic-color-primary, #2b4acb);
}

.mosaic-tt__line {
	overflow-x: auto;
	padding-block-end: 0.5rem;
}

.mosaic-tt__tabs {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	min-inline-size: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mosaic-tt__tabs li {
	position: relative;
	flex: 1 1 0;
	text-align: center;
}

/* The line runs behind the dots. */
.mosaic-tt__tabs li::before {
	position: absolute;
	inset-block-start: 0.55rem;
	inset-inline: 0;
	block-size: 2px;
	background: var(--mosaic-tt-line);
	content: "";
}

.mosaic-tt__tab {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 0 0.5rem;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	font: inherit;
}

.mosaic-tt__tab:focus-visible {
	outline: 3px solid var(--mosaic-tt-active);
	outline-offset: 3px;
}

.mosaic-tt__dot {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	border: 3px solid var(--mosaic-tt-marker);
	border-radius: 50%;
	background: #fff;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.mosaic-tt__tab[aria-selected="true"] .mosaic-tt__dot {
	border-color: var(--mosaic-tt-active);
	background: var(--mosaic-tt-active);
	transform: scale(1.25);
}

.mosaic-tt__date {
	font-weight: 600;
	opacity: 0.7;
}

.mosaic-tt__tab[aria-selected="true"] .mosaic-tt__date {
	color: var(--mosaic-tt-active);
	opacity: 1;
}

.mosaic-tt__panels {
	margin-block-start: 1.5rem;
}

.mosaic-tt__panel {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-block-end: 1.5rem;
}

.mosaic-tt__media {
	flex: 0 0 min(35%, 18rem);
}

.mosaic-tt__media img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: 0.75rem;
}

.mosaic-tt__title {
	margin: 0 0 0.4rem;
	font-size: 1.35rem;
}

.mosaic-tt__text {
	margin: 0;
}

/* Without the script, the dates are not buttons you can use, so only the stories show. */
.mosaic-tt:not(.is-ready) .mosaic-tt__line {
	display: none;
}

.mosaic-tt__panel[hidden] {
	display: none;
}

@media (max-width: 40rem) {
	.mosaic-tt__panel {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mosaic-tt__dot {
		transition: none;
	}
}