.cobalt-circularProgressBar {
  --content-size: 64px;
  --total-size: calc((var(--content-size) / 4) + var(--content-size));

  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 {
    @apply c-stroke-onSurface;
    fill: none;

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

    stroke-width: 8px;
  }

  &__content {
    @apply c-bg-surface;

    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 &__bar {
    @apply c-stroke-tertiary;
  }

  &--error &__bar {
    @apply c-stroke-error;
  }

  &--success &__bar {
    @apply c-stroke-success;
  }
}