.circular-progress {
    --stroke-width: 2px;
    position: relative;
    width: var(--var-size);
    height: var(--var-size);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: var(--c--globals--spacings--sm);
    transition: transform var(--transitionDuration, 0.3s) ease-in-out;

    &--loading {
        animation: spin 1s ease-in-out infinite;
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    // Qualified with the element + parent (specificity 0,2,1) on purpose: this
    // ring renders inside a cunningham Button icon slot in the header, where
    // `.c__button--medium .c__button__icon *` (0,2,0) would otherwise win and
    // resize the percentage to the button's icon font-size. The plain
    // `&__label` class (0,1,0) loses that fight; this selector wins it.
    span.circular-progress__label {
        font-size: 0.65rem;
        font-weight: bold;
        color: var(--c--contextuals--background--semantic--brand--primary);
        position: absolute;
        top: 52%;
        line-height: 1;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    &__background {
        stroke: var(--c--contextuals--background--semantic--neutral--secondary);
        stroke-width: var(--stroke-width);
        fill: none;
    }

    &__foreground {
        stroke: var(--c--contextuals--background--semantic--brand--primary);
        stroke-width: var(--stroke-width);
        fill: none;
        stroke-linecap: round;
        transition: stroke-dashoffset 0.3s ease-in-out;
    }

    &__icon-completed {
        color: var(--c--contextuals--background--semantic--success--primary)
    }
}
