Template:Pie chart/style.css

.PieChartCircle {
	background: white;
	--PieChartSize: calc(2 * var(--PieChartRadius));
	width: var(--PieChartSize);
	height: var(--PieChartSize);
	overflow: hidden;
	border-radius: 50%;
	border: 1px solid black;
	margin: auto;
	padding: var(--PieChartRadius);
	box-sizing: border-box;
}

.PieChartHiddenText,
.PieChartPieceHiddenText {
	position: absolute;
	clip-path: inset(50%);
	opacity: 0;
}

.PieChartPiece {
	--PieChartPieceBackground: conic-gradient(
		from var(--PieChartPiecesStart, 0deg), 
		transparent var(--PieChartPieceBeginAngle),
		var(--PieChartPieceColor) var(--PieChartPieceBeginAngle),
		var(--PieChartPieceColor) var(--PieChartPieceEndAngle),
		transparent var(--PieChartPieceEndAngle));
	background: var(--PieChartPieceBackground);
	width: var(--PieChartSize);
	height: var(--PieChartSize);
	--PieChartNegativeMargin: calc(-1 * var(--PieChartRadius));
	margin-top: var(--PieChartNegativeMargin); /*should be margin-block-start*/
	margin-left: var(--PieChartNegativeMargin); /*should be margin-inline-start*/
	position: absolute;
	border-radius: 100%;
}

.PieChartPieceOffset {
	--PieChartOffsetTransform: translate(
		calc(sin((var(--PieChartPieceBeginAngle) + var(--PieChartPieceEndAngle)) / 2) * var(--PieChartPieceOffset)) 
		calc(cos((var(--PieChartPieceBeginAngle) + var(--PieChartPieceEndAngle)) / 2) * var(--PieChartPieceOffset) * -1));
	transform: var(--PieChartOffsetTransform);
}

.PieChartTemplate > .thumbinner {
	--PieChartThumbInnerWidth: calc(2 * var(--PieChartRadius) + 2px);
	width: var(--PieChartThumbInnerWidth);
}