/*  2025-09-25   c.m.  */
/*  Donut chart CSS    */

html, body {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.donut {
  width: var(--size);
  height: var(--size);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.donut div {
  position: absolute;
}

.donut svg {
  --pi: 3.14159265359;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.donut circle {
  transform-origin: center center;
  stroke-dashoffset: 0;
  cx: calc(var(--size) / 2);
  cy: calc(var(--size) / 2);
  r: calc((var(--size) - var(--thick)) / 2);
  stroke-width: var(--thick);
  fill: none;
}

.donut circle:nth-child(1) {
  stroke-width: var(--thick);
  transform: rotateZ(
    calc(-90deg + (var(--gap) / 2 * 360deg / 100)));
  stroke-dasharray: 
    calc(var(--pi) * (var(--size) - var(--thick)) * (var(--y1) - var(--gap)) / 100) 
    calc(var(--pi) * (var(--size) - var(--thick)) * (100 - var(--y1) + var(--gap)) / 100);
}

.donut circle:nth-child(5) {
  stroke-width: calc(var(--thick) / 3);
  transform: rotateZ(
    calc(-90deg  + (var(--y1) + var(--gap) / 2) * 360deg / 100));
  stroke-dasharray: 
    calc(var(--pi) * (var(--size) - var(--thick)) * (100 - var(--y1) - var(--gap)) / 100) 
    calc(var(--pi) * (var(--size) - var(--thick)) * (var(--y1) + var(--gap)) / 100);
}