@value (
  fontSize12,
  fontSize36,
  fontWeightMedium,
  fontWeightBook,
  fontLineHeight100,
  fontLineHeight130,
  fontLetterSpacingMinus3,
  fontLetterSpacing4
) from  '../../../styles/variables/_font.css';

@value (colorTextPrimary, colorTextSecondary) from  '../../../styles/variables/_color.css';
@value (size240, size300, size400, size500, sizeFluid) from  '../../../styles/variables/_size.css';

@value (spaceNone, spaceXSmall) from  '../../../styles/variables/_space.css';

.wrapper {
  display: flex;
}

.donutChartContainer {
  width: sizeFluid;
  min-width: size500;
  min-height: size300;
  display: block;
  align-items: center;
  justify-content: center;
}

.subtitleWrap {
  display: flex;
  gap: spaceXSmall;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  width: sizeFluid;
}

.subtitleText {
  margin: spaceNone;
  color: colorTextPrimary;

  text-align: center;

  width: sizeFluid;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}

.subtitleSubtext {
  margin: spaceNone;
  color: colorTextSecondary;

  text-align: center;

  width: sizeFluid;
  overflow: hidden;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
}