@value (
  borderRadiusSmall
) from '../../styles/variables/_border.css';
@value (spaceHalfFluid, spaceNegHalfFluid) from '../../styles/variables/_space.css';
@value (size10, size20, sizeFluid) from
  '../../styles/variables/_size.css';
@value (
  colorBorderPrimary,
  colorBackgroundSecondary,
  colorBackgroundPrimary
) from '../../styles/variables/_color.css';
@value (motionDurationSlower) from
'../../styles/variables/_motion.css';

.donutChart {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: colorBackgroundPrimary;
}

.donutChartSvg {
  transform: rotate(-90deg);
}

.donutChartBackground,
.donutChartForeground {
  fill: none;
}

.donutChartBackground {
  stroke: colorBackgroundSecondary;
}

.donutChartForeground {
  transition: stroke-dashoffset motionDurationSlower;
}

.donutChartPercentage {
  position: absolute;
}