.progress-circle {
  --circle-text-color: var(--text);
  --circle-background-color: var(--transparent-md);
  --circle-color: var(--color-slate-blue);
  --circle-complete-color: var(--primary);
  --circle-line-width: 10;

  .animated-circle {
    stroke-linecap: round;
    stroke-width: var(--circle-line-width);
    transform-origin: center;
  }

  .background-circle {
    stroke-width: var(--circle-line-width);
    fill: var(--circle-background-color);
    stroke: var(--color-platinum);
  }

  @include element(status) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--circle-text-color);
    shape-outside: circle(50%);
  }

  @include element(circle) {
    flex: 1;
    height: 100%;
  }

  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;

}