$icon-easing: cubic-bezier(0, 0, 0.25, 1);
$icon-fade-duration: 120ms;
$icon-rise-duration: 240ms;
$icon-rise-offset: 10px;
$icon-rise-offset-compact: 6px;

.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)
    );
  }

  @container style(--wds-internal-theme: odeditor) {
    @supports (transition-behavior: allow-discrete) {
      & &__status-indicator {
        transition:
          opacity $icon-fade-duration $icon-easing,
          translate $icon-rise-duration $icon-easing;
      }

      @starting-style {
        & &__status-indicator {
          opacity: 0;
          translate: 0 $icon-rise-offset;
        }

        &--size-tiny &__status-indicator,
        &--size-small &__status-indicator {
          translate: 0 $icon-rise-offset-compact;
        }
      }

      @media (prefers-reduced-motion) {
        @starting-style {
          & &__status-indicator,
          &--size-tiny &__status-indicator,
          &--size-small &__status-indicator {
            translate: none;
          }
        }
      }
    }
  }
}