.cobalt-circularProgressBar {
  --content-size: 64px;
  --total-size: calc((var(--content-size) / 4) + var(--content-size));
  --progress-color: var(--theme-semanticFillColor-base);

  position: relative;

  display: flex;
  justify-content: center;
  align-items: center;

  width: var(--total-size);
  height: var(--total-size);

  flex-shrink: 0;

  svg {
    position: absolute;

    display: inline-flex;

    width: calc(var(--total-size) - 2px);
    height: calc(var(--total-size) - 2px);

    vertical-align: bottom;
  }

  &__bar {
    fill: none;

    transform: rotate(-90deg) scaleX(-1);
    transform-origin: center center;

    stroke-width: 8px;
    stroke: var(--progress-color);
  }

  &__content {
    @apply c-bg-primary;

    position: absolute;

    display: flex;

    justify-content: center;
    align-items: center;

    width: var(--content-size);
    height: var(--content-size);

    border-radius: 50%;
  }

  &--animated .cobalt-circularProgressBar__bar {
    transition: stroke-dashoffset 1s cubic-bezier(0.43, 0.41, 0.22, 0.91);
  }

  &--size96 {
    --content-size: 96px;
  }

  &--size64 {
    --content-size: 64px;
  }

  &--size48 {
    --content-size: 48px;
  }

  &--size32 {
    --content-size: 32px;
  }

  &--info {
    --progress-color: var(--theme-semanticFillColor-secondary);
  }

  &--error {
    --progress-color: var(--theme-semanticFillColor-error);
  }

  &--success {
    --progress-color: var(--theme-semanticFillColor-success);
  }
}