/*
 * PureCSS.com
 * https://purecss.com/examples/donut-chart/
 * SVG donut chart animated with stroke-dashoffset — no JavaScript required.
 */

.demo-donut-chart .donuts {
		display: flex;
		gap: 1.5rem;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
	}

.demo-donut-chart .donut-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: .5rem;
	}

:is(.demo-donut-chart .donut-wrap) .donut-name {
			font-size: .8rem;
			color: var(--text-muted);
			font-weight: 500;
		}

.demo-donut-chart .donut-svg {
		transform: rotate(-90deg);
		overflow: visible;
	}

.demo-donut-chart .donut-track {
		fill: none;
		stroke: var(--surface-2);
		stroke-width: 10;
	}

.demo-donut-chart .donut-fill {
		fill: none;
		stroke-width: 10;
		stroke-linecap: round;
		stroke-dasharray: 220;
		stroke-dashoffset: 220;
		animation: donut-draw 1.4s cubic-bezier(0.16, 1, 0.3, 1) .2s forwards;
	}

.demo-donut-chart .donut-fill-green  { stroke: var(--accent); stroke-dashoffset: calc(220 * (1 - .75)); }

.demo-donut-chart .donut-fill-sky    { stroke: var(--sky);    stroke-dashoffset: calc(220 * (1 - .60)); }

.demo-donut-chart .donut-fill-coral  { stroke: var(--coral);  stroke-dashoffset: calc(220 * (1 - .88)); }

.demo-donut-chart .donut-center {
		position: relative;
	}

.demo-donut-chart .donut-label-wrap {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(90deg);
		text-align: center;
	}

.demo-donut-chart .donut-pct {
		display: block;
		font-size: 1.3rem;
		font-weight: 700;
		font-family: var(--font-mono);
		line-height: 1;
	}

.demo-donut-chart .donut-title {
		font-size: .7rem;
		color: var(--text-muted);
		font-weight: 500;
	}

@keyframes donut-draw {
	from { stroke-dashoffset: 220; }
}