$fore-standard: var(
  --wds-circular-progress-bar-foreground-fill-standard,
  var(--wds-color-fill-standard-primary, var(--wsr-color-B10, #116dff))
);
$fore-premium: var(
  --wds-circular-progress-bar-foreground-fill-premium,
  var(--wds-color-fill-premium-primary, var(--wsr-color-P10, #9a27d5))
);
$fore-success: var(
  --wds-circular-progress-bar-foreground-fill-success,
  var(--wds-color-fill-success-primary, var(--wsr-color-G10, #25a55a))
);
$fore-error: var(
  --wds-circular-progress-bar-foreground-fill-error,
  var(--wds-color-fill-destructive-primary, var(--wsr-color-R00, #b81206))
);
$back-standard: var(
  --wds-circular-progress-bar-background-fill-standard,
  var(--wds-color-fill-standard-secondary, var(--wsr-color-B50, #e7f0ff))
);
$back-premium: var(
  --wds-circular-progress-bar-background-fill-premium,
  var(--wds-color-fill-premium-secondary, var(--wsr-color-P60, #f7edfc))
);
$back-success: var(
  --wds-circular-progress-bar-background-fill-success,
  var(--wds-color-fill-success-secondary, var(--wsr-color-G60, #e9f6ee))
);
$back-error: var(
  --wds-circular-progress-bar-background-fill-error,
  var(--wds-color-fill-destructive-secondary, var(--wsr-color-R30, #f69891))
);
$back-light: var(
  --wds-color-white,
  var(--wsr-color-D80-30, rgba(255, 255, 255, 0.3))
);

.circular-progress-bar {
  display: inline-block;

  & &__progress-bar {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
  }

  & &__arcs-container {
    width: 54px;
    height: 54px;
    position: relative;
  }

  & &__fore-arc,
  & &__back-arc {
    width: 100%;
    height: 100%;
    fill: none;
    stroke-linecap: round;
    position: absolute;
    top: 0;
    left: 0;
  }

  & &__fore-arc {
    stroke: $fore-standard;
  }

  & &__back-arc {
    stroke: $back-standard;
  }

  &--skin-premium &__fore-arc {
    stroke: $fore-premium;
  }

  &--skin-premium &__back-arc {
    stroke: $back-premium;
  }

  &--skin-success &__fore-arc {
    stroke: $fore-success;
  }

  &--skin-success &__back-arc {
    stroke: $back-success;
  }

  &--error &__fore-arc {
    stroke: $fore-error;
  }

  &--error &__back-arc {
    stroke: $back-error;
  }

  &--light &__back-arc {
    stroke: $back-light;
  }

  & &__status-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
  }

  &--success &__status-indicator {
    color: $fore-standard;
  }

  &--skin-premium &__status-indicator {
    color: $fore-premium;
  }

  &--skin-success &__status-indicator {
    color: $fore-success;
  }

  &--error &__status-indicator {
    color: var(
      --wds-circular-progress-bar-foreground-fill-error,
      var(--wds-color-fill-destructive-primary, var(--wsr-color-R10, #e62214))
    );
  }

  & &__status-indicator svg {
    height: 15px;
    width: 20px;
  }

  &--size-small &__status-indicator svg {
    height: 9px;
    width: 12px;
  }

  &--size-tiny &__status-indicator,
  &--size-tiny &__status-indicator svg {
    width: 24px;
    height: 24px;
  }

  & &__label,
  & &__progress-indicator {
    position: relative;
    height: 100%;
    font-family: var(
      --wds-font-family-default,
      Madefor,
      'Helvetica Neue',
      Helvetica,
      Arial,
      'メイリオ',
      'meiryo',
      'ヒラギノ角ゴ pro w3',
      'hiragino kaku gothic pro',
      sans-serif
    );
    font-size: var(
      --wds-circular-progress-bar-label-font-size,
      var(--wds-font-size-100, 10px)
    );
    font-weight: var(
      --wds-circular-progress-bar-label-font-weight,
      var(--wds-font-weight-bold, 700)
    );
    line-height: var(
      --wds-circular-progress-bar-label-font-line-height,
      var(--wds-font-line-height-200, 18px)
    );
    color: var(
      --wds-color-text-standard-primary,
      var(--wsr-color-D20, #333853)
    );
    margin-top: var(
      --wds-circular-progress-bar-label-padding-large,
      var(--wds-space-0, 12px)
    );
  }

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

  &--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-0, 12px)
    );
  }
}