:host {
  display: inline-flex;
  --wcs-progress-radial-rail-width: calc(var(--wcs-semantic-spacing-base) / 4);
  --wcs-progress-radial-rail-spacing: calc(var(--wcs-semantic-spacing-base) / 4);
  --wcs-progress-radial-rail-color: var(--wcs-semantic-color-background-surface-tertiary);
  --wcs-progress-radial-value-background-color: var(--wcs-semantic-color-background-surface-brand);
  --wcs-progress-radial-label-color: var(--wcs-semantic-color-text-primary);
  --wcs-progress-radial-label-font-size: calc(1.5 * var(--wcs-semantic-font-size-m));
  --wcs-progress-radial-label-font-weight: var(--wcs-semantic-font-weight-medium);
  --wcs-progress-radial-label-percentage-font-size: calc(var(--wcs-semantic-font-size-m) * 0.7);
  --wcs-progress-radial-animation-duration: var(--wcs-semantic-motion-duration-feedback-slower);
}

.progress-circle {
  position: relative;
  display: inline-block;
}

.circle-rail {
  position: absolute;
  z-index: 0;
  stroke: var(--wcs-progress-radial-rail-color);
  stroke-dasharray: var(--wcs-progress-radial-rail-width) var(--wcs-progress-radial-rail-spacing);
  fill: none;
}

.progress-circle-figure {
  position: absolute;
  top: 0;
  z-index: 1;
  transform: rotate(-90deg);
  transition: stroke-dashoffset var(--wcs-progress-radial-animation-duration) ease-out;
}

.progress-circle-label {
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: var(--wcs-progress-radial-label-font-size);
  font-weight: var(--wcs-progress-radial-label-font-weight);
  color: var(--wcs-progress-radial-label-color);
}
.progress-circle-label sup {
  font-size: var(--wcs-progress-radial-label-percentage-font-size);
  top: -0.85em;
  position: relative;
  line-height: 0;
  vertical-align: baseline;
}

.progress-circle-value {
  stroke: var(--wcs-progress-radial-value-background-color);
  stroke-linecap: round;
}

.progress-circle-value,
.progress-circle-meter {
  fill: none;
}