View source for Module:Creo/Components/Stats/styles.css

.t-creo-stats-container {
	--t-creo-stats-max-width: 480px;
	--t-creo-stats-label-offset: 0.75rem;

	max-width: var(--t-creo-stats-max-width);
}

.t-creo-stats {
	/* 6rem is needed to fit the labels in the container */
	--t-creo-stats-padding: calc(6rem + var(--t-creo-stats-label-offset));

	max-width: var(--t-creo-stats-max-width);
	box-sizing: border-box;
	padding: var(--t-creo-stats-padding);
	background: var(--color-surface-1--hover);
}

.t-creo-stats-inner {
	position: relative;
}

.t-creo-stats-overlay {
	display: flex;
	gap: 16px;
}

.t-creo-stats-overlay-stat {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	line-height: 1;
	gap: 4px;
	font-family: var(--cp-font-family-heading);
}

.t-creo-stats-overlay-stat-label {
	color: var(--color-subtle);
	display: flex;
	gap: 4px;
	align-items: center;
}

.t-creo-stats-overlay-stat-value {
	font-size: 1.25rem;
	font-weight: 600;
}

.t-creo-stats .site-chartjs-initialized + .t-creo-stats-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.t-creo-stats .site-chartjs-initialized + .t-creo-stats-overlay .t-creo-stats-overlay-stat {
	--t-creo-stats-stat-angle: calc((360deg / var(--t-creo-stats-num-stats)) * var(--t-creo-stats-stat-index) - 90deg);
	--t-creo-stats-stat-left: calc(50% + (50% + var(--t-creo-stats-label-offset)) * cos(var(--t-creo-stats-stat-angle)));
	--t-creo-stats-stat-top: calc(50% + (50% + var(--t-creo-stats-label-offset)) * sin(var(--t-creo-stats-stat-angle)));
	--t-creo-stats-stat-transform: translate(
		calc(-50% + cos(var(--t-creo-stats-stat-angle)) * 50%),
		calc(-50% + sin(var(--t-creo-stats-stat-angle)) * 50%)
	);

	position: absolute;
	left: var(--t-creo-stats-stat-left);
	top: var(--t-creo-stats-stat-top);
	transform: var(--t-creo-stats-stat-transform);
	pointer-events: auto;
}

.t-creo-stats canvas {
	/* Always make the chart fill the container, so that the overlay can be positioned absolutely */
	width: 100% !important;
	height: 100% !important;
}