.circular-progress-bar {
  & &__back-arc {
    stroke: var(
      --wds-circular-progress-bar-background-fill-standard,
      var(--wds-color-fill-standard-secondary-disabled)
    );
  }

  &--skin-premium &__back-arc {
    stroke: var(
      --wds-circular-progress-bar-background-fill-premium,
      var(--wds-color-fill-premium-secondary-disabled)
    );
  }

  &--skin-success &__back-arc {
    stroke: var(
      --wds-circular-progress-bar-background-fill-success,
      var(--wds-color-fill-success-secondary-disabled)
    );
  }

  &--error &__back-arc {
    stroke: var(
      --wds-circular-progress-bar-background-fill-error,
      var(--wds-color-fill-destructive-secondary-disabled)
    );
  }

  &--light &__back-arc {
    stroke: var(
      --wds-color-white,
      var(--wsr-color-D80-30, rgba(255, 255, 255, 0.3))
    );
  }

  & &__label,
  & &__progress-indicator {
    font-size: var(
      --wds-circular-progress-bar-label-font-size,
      var(--wds-font-size-200)
    );
    font-weight: var(
      --wds-circular-progress-bar-label-font-weight,
      var(--wds-font-weight-medium)
    );
    line-height: var(
      --wds-circular-progress-bar-label-font-line-height,
      var(--wds-font-line-height-300)
    );
    margin-top: var(
      --wds-circular-progress-bar-label-padding-large,
      var(--wds-space-200)
    );
  }

  &--size-tiny &__label,
  &--size-tiny &__progress-indicator {
    margin-top: var(
      --wds-circular-progress-bar-label-padding-medium,
      var(--wds-space-100)
    );
  }

  &--size-small &__label,
  &--size-small &__progress-indicator,
  &--size-medium &__label,
  &--size-medium &__progress-indicator {
    margin-top: var(
      --wds-circular-progress-bar-label-padding-medium,
      var(--wds-space-100)
    );
  }
}