.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);
}