Path to image isn't correct when using .less & CDN

We have a simple widget that contains a .less file for the styles.

WIDGET CONTENT

$core_v2_page.AddLink('stylesheet', $core_v2_widget.GetExecutedFileUrl('style.less'), "%{ Position = 'AfterTheme' }")

<div class="e14-ranked-locked-icon"></div>

WIDGET .LESS FILE (style.less)

.e14-ranked-locked-icon {
    width: 8px;
    height: 11px;
    float: right;
    margin-right: 8px;
    margin-top: -30px;
    background: url(/cfs-file/__key/e14core/images-icons/small_2D00_gray_2D00_padlock.png) no-repeat 0 0;
}

Our platform is using the CDN setting like this;

<?xml version="1.0"?>
<Overrides>
 <Override xpath="/CommunityServer/CentralizedFileStorage/fileStoreGroup[@name='default']" mode="remove" /> 
 <Override xpath="/CommunityServer/CentralizedFileStorage" mode="add" where="end">
  <fileStoreGroup name="Azure"
      default="true" 
      type="Telligent.Evolution.Azure.Filestorage.AzureBlobFilestorageProvider, Telligent.Evolution.Azure.Filestorage"
	  cdnUrl="https://mysite-storage.mydomain.com"
	  maximumSecureFileAccessDays="7"
      minimumSecureFileAccessHours="2"
      />
 </Override>    
</Overrides>

When the widget renders, the domain for the image file is getting rewritten to the -storage CDN domain, however the path to the file is then invalid so it 404s, i.e.

https://mysite-storage.mydomain.com/cfs-file/__key/e14core/images-icons/small_2D00_gray_2D00_padlock.png

If we simply put a <style> block inside the widget content, it doesn't rewrite the URL & everything works as expected.

How can we reference files from the .less which are in our CFS without them breaking like this?

Thanks,

Matt.