// Copyright (c) 2014, 2026, Oracle and/or its affiliates.  Licensed under The Universal Permissive License (UPL), Version 1.0 as shown at https://oss.oracle.com/licenses/upl/

// DO NOT MODIFY THIS FILE MANUALLY!
// This file is automatically generated based on the SVG images in
// /rt/src/main/css/<skin>/images/ folder. For each image, it generates a
// corresponding .oj-fwk-icon-<image file name> style class, replacing hyphens
// in the file name with underscores. The SCSS template can be found in
// /rt/src/main/scss/templates/svg-sprite-template.scss.txt
// To update this file, run "grunt jet-svg-sprite" or "grunt build".

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-cbsingle-hover-selected-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((0px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(48px * #{$scaleFactor});
  height: calc(48px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-cbsingle-hover-unselected-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-52px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(48px * #{$scaleFactor});
  height: calc(48px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-checkbox-dis-selected-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-104px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(48px * #{$scaleFactor});
  height: calc(48px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-checkbox-dis-unselected-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-156px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(48px * #{$scaleFactor});
  height: calc(48px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-checkbox-ena-selected-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-208px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(48px * #{$scaleFactor});
  height: calc(48px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-checkbox-ena-unselected-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-260px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(48px * #{$scaleFactor});
  height: calc(48px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-checkbox-pressed-selected-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-312px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(48px * #{$scaleFactor});
  height: calc(48px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-checkbox-pressed-unselected-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-364px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(48px * #{$scaleFactor});
  height: calc(48px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-checkbox-tristate-partial-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-416px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(18px * #{$scaleFactor});
  height: calc(18px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-checkbox-tristate-selected-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-438px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(18px * #{$scaleFactor});
  height: calc(18px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-checkbox-tristate-unselected-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-460px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(18px * #{$scaleFactor});
  height: calc(18px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-menuitemcheckbox-dis-selected-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-482px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(24px * #{$scaleFactor});
  height: calc(24px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-menuitemcheckbox-dis-unselected-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-510px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(24px * #{$scaleFactor});
  height: calc(24px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-menuitemcheckbox-ena-selected-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-538px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(24px * #{$scaleFactor});
  height: calc(24px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-menuitemcheckbox-ena-unselected-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-566px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(24px * #{$scaleFactor});
  height: calc(24px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-move-handle-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-594px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(36px * #{$scaleFactor});
  height: calc(21px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-radio-dis-selected-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-634px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(48px * #{$scaleFactor});
  height: calc(48px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-radio-dis-unselected-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-686px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(48px * #{$scaleFactor});
  height: calc(48px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-radio-ena-selected-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-738px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(48px * #{$scaleFactor});
  height: calc(48px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-radio-ena-unselected-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-790px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(48px * #{$scaleFactor});
  height: calc(48px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-radio-pressed-selected-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-842px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(48px * #{$scaleFactor});
  height: calc(48px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-radio-pressed-unselected-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-894px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(48px * #{$scaleFactor});
  height: calc(48px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-spinner-00-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-946px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(40px * #{$scaleFactor});
  height: calc(40px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-spinner-10-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-990px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(40px * #{$scaleFactor});
  height: calc(40px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-spinner-20-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-1034px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(40px * #{$scaleFactor});
  height: calc(40px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-spinner-30-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-1078px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(40px * #{$scaleFactor});
  height: calc(40px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-spinner-40-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-1122px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(40px * #{$scaleFactor});
  height: calc(40px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-spinner-50-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-1166px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(40px * #{$scaleFactor});
  height: calc(40px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-spinner-60-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-1210px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(40px * #{$scaleFactor});
  height: calc(40px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-spinner-70-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-1254px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(40px * #{$scaleFactor});
  height: calc(40px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-spinner-80-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-1298px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(40px * #{$scaleFactor});
  height: calc(40px * #{$scaleFactor});
}

// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-spinner-90-scale($scaleFactor: 1) {
  background-size: calc(1386px * #{$scaleFactor}) calc(52px * #{$scaleFactor});
  background-position: calc((-1342px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(40px * #{$scaleFactor});
  height: calc(40px * #{$scaleFactor});
}


@if $includeIconClasses != false {
  @include module-include-once("alta.android.sprite") {

    .oj-fwk-icon-cbsingle-hover-selected {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-cbsingle-hover-selected-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-cbsingle-hover-selected {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-cbsingle-hover-selected:before {
      content: oj-image-url('cbsingle_hover_selected.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-cbsingle-hover-selected {
        background-image: none;
      }
      .oj-fwk-icon-cbsingle-hover-selected:before {
        content: oj-image-url('cbsingle_hover_selected.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-cbsingle-hover-unselected {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-cbsingle-hover-unselected-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-cbsingle-hover-unselected {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-cbsingle-hover-unselected:before {
      content: oj-image-url('cbsingle_hover_unselected.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-cbsingle-hover-unselected {
        background-image: none;
      }
      .oj-fwk-icon-cbsingle-hover-unselected:before {
        content: oj-image-url('cbsingle_hover_unselected.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-checkbox-dis-selected {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-checkbox-dis-selected-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-checkbox-dis-selected {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-checkbox-dis-selected:before {
      content: oj-image-url('checkbox_dis_selected.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-checkbox-dis-selected {
        background-image: none;
      }
      .oj-fwk-icon-checkbox-dis-selected:before {
        content: oj-image-url('checkbox_dis_selected.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-checkbox-dis-unselected {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-checkbox-dis-unselected-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-checkbox-dis-unselected {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-checkbox-dis-unselected:before {
      content: oj-image-url('checkbox_dis_unselected.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-checkbox-dis-unselected {
        background-image: none;
      }
      .oj-fwk-icon-checkbox-dis-unselected:before {
        content: oj-image-url('checkbox_dis_unselected.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-checkbox-ena-selected {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-checkbox-ena-selected-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-checkbox-ena-selected {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-checkbox-ena-selected:before {
      content: oj-image-url('checkbox_ena_selected.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-checkbox-ena-selected {
        background-image: none;
      }
      .oj-fwk-icon-checkbox-ena-selected:before {
        content: oj-image-url('checkbox_ena_selected.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-checkbox-ena-unselected {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-checkbox-ena-unselected-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-checkbox-ena-unselected {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-checkbox-ena-unselected:before {
      content: oj-image-url('checkbox_ena_unselected.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-checkbox-ena-unselected {
        background-image: none;
      }
      .oj-fwk-icon-checkbox-ena-unselected:before {
        content: oj-image-url('checkbox_ena_unselected.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-checkbox-pressed-selected {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-checkbox-pressed-selected-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-checkbox-pressed-selected {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-checkbox-pressed-selected:before {
      content: oj-image-url('checkbox_pressed_selected.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-checkbox-pressed-selected {
        background-image: none;
      }
      .oj-fwk-icon-checkbox-pressed-selected:before {
        content: oj-image-url('checkbox_pressed_selected.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-checkbox-pressed-unselected {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-checkbox-pressed-unselected-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-checkbox-pressed-unselected {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-checkbox-pressed-unselected:before {
      content: oj-image-url('checkbox_pressed_unselected.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-checkbox-pressed-unselected {
        background-image: none;
      }
      .oj-fwk-icon-checkbox-pressed-unselected:before {
        content: oj-image-url('checkbox_pressed_unselected.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-checkbox-tristate-partial {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-checkbox-tristate-partial-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-checkbox-tristate-partial {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-checkbox-tristate-partial:before {
      content: oj-image-url('checkbox_tristate_partial.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-checkbox-tristate-partial {
        background-image: none;
      }
      .oj-fwk-icon-checkbox-tristate-partial:before {
        content: oj-image-url('checkbox_tristate_partial.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-checkbox-tristate-selected {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-checkbox-tristate-selected-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-checkbox-tristate-selected {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-checkbox-tristate-selected:before {
      content: oj-image-url('checkbox_tristate_selected.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-checkbox-tristate-selected {
        background-image: none;
      }
      .oj-fwk-icon-checkbox-tristate-selected:before {
        content: oj-image-url('checkbox_tristate_selected.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-checkbox-tristate-unselected {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-checkbox-tristate-unselected-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-checkbox-tristate-unselected {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-checkbox-tristate-unselected:before {
      content: oj-image-url('checkbox_tristate_unselected.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-checkbox-tristate-unselected {
        background-image: none;
      }
      .oj-fwk-icon-checkbox-tristate-unselected:before {
        content: oj-image-url('checkbox_tristate_unselected.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-menuitemcheckbox-dis-selected {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-menuitemcheckbox-dis-selected-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-menuitemcheckbox-dis-selected {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-menuitemcheckbox-dis-selected:before {
      content: oj-image-url('menuitemcheckbox_dis_selected.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-menuitemcheckbox-dis-selected {
        background-image: none;
      }
      .oj-fwk-icon-menuitemcheckbox-dis-selected:before {
        content: oj-image-url('menuitemcheckbox_dis_selected.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-menuitemcheckbox-dis-unselected {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-menuitemcheckbox-dis-unselected-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-menuitemcheckbox-dis-unselected {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-menuitemcheckbox-dis-unselected:before {
      content: oj-image-url('menuitemcheckbox_dis_unselected.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-menuitemcheckbox-dis-unselected {
        background-image: none;
      }
      .oj-fwk-icon-menuitemcheckbox-dis-unselected:before {
        content: oj-image-url('menuitemcheckbox_dis_unselected.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-menuitemcheckbox-ena-selected {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-menuitemcheckbox-ena-selected-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-menuitemcheckbox-ena-selected {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-menuitemcheckbox-ena-selected:before {
      content: oj-image-url('menuitemcheckbox_ena_selected.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-menuitemcheckbox-ena-selected {
        background-image: none;
      }
      .oj-fwk-icon-menuitemcheckbox-ena-selected:before {
        content: oj-image-url('menuitemcheckbox_ena_selected.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-menuitemcheckbox-ena-unselected {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-menuitemcheckbox-ena-unselected-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-menuitemcheckbox-ena-unselected {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-menuitemcheckbox-ena-unselected:before {
      content: oj-image-url('menuitemcheckbox_ena_unselected.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-menuitemcheckbox-ena-unselected {
        background-image: none;
      }
      .oj-fwk-icon-menuitemcheckbox-ena-unselected:before {
        content: oj-image-url('menuitemcheckbox_ena_unselected.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-move-handle {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-move-handle-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-move-handle {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-move-handle:before {
      content: oj-image-url('move_handle.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-move-handle {
        background-image: none;
      }
      .oj-fwk-icon-move-handle:before {
        content: oj-image-url('move_handle.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-radio-dis-selected {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-radio-dis-selected-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-radio-dis-selected {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-radio-dis-selected:before {
      content: oj-image-url('radio_dis_selected.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-radio-dis-selected {
        background-image: none;
      }
      .oj-fwk-icon-radio-dis-selected:before {
        content: oj-image-url('radio_dis_selected.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-radio-dis-unselected {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-radio-dis-unselected-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-radio-dis-unselected {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-radio-dis-unselected:before {
      content: oj-image-url('radio_dis_unselected.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-radio-dis-unselected {
        background-image: none;
      }
      .oj-fwk-icon-radio-dis-unselected:before {
        content: oj-image-url('radio_dis_unselected.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-radio-ena-selected {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-radio-ena-selected-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-radio-ena-selected {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-radio-ena-selected:before {
      content: oj-image-url('radio_ena_selected.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-radio-ena-selected {
        background-image: none;
      }
      .oj-fwk-icon-radio-ena-selected:before {
        content: oj-image-url('radio_ena_selected.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-radio-ena-unselected {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-radio-ena-unselected-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-radio-ena-unselected {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-radio-ena-unselected:before {
      content: oj-image-url('radio_ena_unselected.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-radio-ena-unselected {
        background-image: none;
      }
      .oj-fwk-icon-radio-ena-unselected:before {
        content: oj-image-url('radio_ena_unselected.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-radio-pressed-selected {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-radio-pressed-selected-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-radio-pressed-selected {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-radio-pressed-selected:before {
      content: oj-image-url('radio_pressed_selected.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-radio-pressed-selected {
        background-image: none;
      }
      .oj-fwk-icon-radio-pressed-selected:before {
        content: oj-image-url('radio_pressed_selected.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-radio-pressed-unselected {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-radio-pressed-unselected-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-radio-pressed-unselected {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-radio-pressed-unselected:before {
      content: oj-image-url('radio_pressed_unselected.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-radio-pressed-unselected {
        background-image: none;
      }
      .oj-fwk-icon-radio-pressed-unselected:before {
        content: oj-image-url('radio_pressed_unselected.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-spinner-00 {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-spinner-00-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-spinner-00 {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-spinner-00:before {
      content: oj-image-url('spinner_00.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-spinner-00 {
        background-image: none;
      }
      .oj-fwk-icon-spinner-00:before {
        content: oj-image-url('spinner_00.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-spinner-10 {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-spinner-10-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-spinner-10 {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-spinner-10:before {
      content: oj-image-url('spinner_10.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-spinner-10 {
        background-image: none;
      }
      .oj-fwk-icon-spinner-10:before {
        content: oj-image-url('spinner_10.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-spinner-20 {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-spinner-20-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-spinner-20 {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-spinner-20:before {
      content: oj-image-url('spinner_20.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-spinner-20 {
        background-image: none;
      }
      .oj-fwk-icon-spinner-20:before {
        content: oj-image-url('spinner_20.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-spinner-30 {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-spinner-30-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-spinner-30 {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-spinner-30:before {
      content: oj-image-url('spinner_30.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-spinner-30 {
        background-image: none;
      }
      .oj-fwk-icon-spinner-30:before {
        content: oj-image-url('spinner_30.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-spinner-40 {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-spinner-40-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-spinner-40 {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-spinner-40:before {
      content: oj-image-url('spinner_40.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-spinner-40 {
        background-image: none;
      }
      .oj-fwk-icon-spinner-40:before {
        content: oj-image-url('spinner_40.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-spinner-50 {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-spinner-50-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-spinner-50 {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-spinner-50:before {
      content: oj-image-url('spinner_50.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-spinner-50 {
        background-image: none;
      }
      .oj-fwk-icon-spinner-50:before {
        content: oj-image-url('spinner_50.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-spinner-60 {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-spinner-60-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-spinner-60 {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-spinner-60:before {
      content: oj-image-url('spinner_60.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-spinner-60 {
        background-image: none;
      }
      .oj-fwk-icon-spinner-60:before {
        content: oj-image-url('spinner_60.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-spinner-70 {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-spinner-70-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-spinner-70 {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-spinner-70:before {
      content: oj-image-url('spinner_70.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-spinner-70 {
        background-image: none;
      }
      .oj-fwk-icon-spinner-70:before {
        content: oj-image-url('spinner_70.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-spinner-80 {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-spinner-80-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-spinner-80 {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-spinner-80:before {
      content: oj-image-url('spinner_80.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-spinner-80 {
        background-image: none;
      }
      .oj-fwk-icon-spinner-80:before {
        content: oj-image-url('spinner_80.svg');
        width: 100%;
        height: 100%;
      }
    }

    .oj-fwk-icon-spinner-90 {
      background-image: oj-image-url('sprites/sprite.svg');
      @include oj-fwk-icon-spinner-90-scale;
    }

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-spinner-90 {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-spinner-90:before {
      content: oj-image-url('spinner_90.svg');
      width: 100%;
      height: 100%;
    }

    // In print mode, background-image disappears, so we have to use content.
    // For small dppx, sprites may be clipped significantly, so we disable it.
    // IE and Safari do not support dppx, so they will always use sprites, and
    // that is fine because the clipping is insignificant on IE and Safari. 
    /* autoprefixer: ignore next */
    @media print, (max-resolution: .99dppx) {
      .oj-fwk-icon-spinner-90 {
        background-image: none;
      }
      .oj-fwk-icon-spinner-90:before {
        content: oj-image-url('spinner_90.svg');
        width: 100%;
        height: 100%;
      }
    }

  }
}