/* Progress icons follow the text colour; the ring behind the arc is the text colour at 20%.
   The SVGs in /icons/progress are masks, so only their opacity matters. */
.custom-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    flex-shrink: 0;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: var(--custom-icon) no-repeat center / contain;
    mask: var(--custom-icon) no-repeat center / contain;
}

.custom-icon-progress-10 { --custom-icon: url('/icons/progress/progress-10.svg'); }
.custom-icon-progress-20 { --custom-icon: url('/icons/progress/progress-20.svg'); }
.custom-icon-progress-30 { --custom-icon: url('/icons/progress/progress-30.svg'); }
.custom-icon-progress-40 { --custom-icon: url('/icons/progress/progress-40.svg'); }
.custom-icon-progress-50 { --custom-icon: url('/icons/progress/progress-50.svg'); }
.custom-icon-progress-60 { --custom-icon: url('/icons/progress/progress-60.svg'); }
.custom-icon-progress-70 { --custom-icon: url('/icons/progress/progress-70.svg'); }
.custom-icon-progress-80 { --custom-icon: url('/icons/progress/progress-80.svg'); }
.custom-icon-progress-90 { --custom-icon: url('/icons/progress/progress-90.svg'); }
.custom-icon-progress-100 { --custom-icon: url('/icons/progress/progress-100.svg'); }