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

    &__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)
    }
}
