kabisa/kudos-frontend

.wrapper {
  width: 240px;
  height: 240px;
  position: relative;
}

.titleContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  text-align: center;
  color: var(--font-color-1);
}

.current {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.needed {
  font-size: var(--font-size-m);
  font-weight: var(--font-weight-medium);
}

.goalProgressContainer {
  --progressHeight: 100px;
  --progressWidth: 10px;
  position: relative;

  height: var(--progressHeight);
}

.goalProgressIndicator {
  -webkit-appearance: none;
  appearance: none;
  transform: rotate(-90deg) translateX(calc(0px - var(--progressHeight)));
  transform-origin: top left;
  /* Because we turn around the bar, width becomes height and vice versa */
  width: var(--progressHeight);
  height: var(--progressWidth);
  position: absolute;
}

.goalProgressIndicator[value]::-webkit-progress-bar {
  background-color: var(--kabisa-green-200);
}

.goalProgressIndicator::-webkit-progress-value {
  background-color: var(--kabisa-green-600);
}

.step {
  --stepAchieved: var(--kabisa-green-600);
  --stepEmpty: var(--kabisa-green-200);

  width: var(--stepCircleSize);
  height: var(--stepCircleSize);
  border-radius: 100%;
  background: var(--stepAchieved);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stepAchieved {
  background: var(--stepAchieved);
}

.stepEmpty {
  background: var(--stepEmpty);
}

.stepsContainer {
  --stepCircleSize: 30px;

  --circleOffset: calc(-1 * var(--stepCircleSize) / 2);
  position: absolute;
  top: var(--circleOffset);
  display: flex;
  flex-direction: column;
  align-items: center;
  height: var(--progressHeight);
  width: var(--progressWidth);
}

.percentage {
  --percentage: 0;
  --offset: 50%;
  --offsetFromProgressBar: 20px;

  position: absolute;
  bottom: calc(var(--progressHeight) * (var(--percentage) / 100));
  transform: translateY(var(--offset));
  left: var(--offsetFromProgressBar);
  font-family: var(--font-family);
}

.step > span {
  font-size: 1rem;
}