// 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-animated-overlay-scale($scaleFactor: 1) {
  background-size: calc(972px * #{$scaleFactor}) calc(44px * #{$scaleFactor});
  background-position: calc((0px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(52px * #{$scaleFactor});
  height: calc(4px * #{$scaleFactor});
}

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

// 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(972px * #{$scaleFactor}) calc(44px * #{$scaleFactor});
  background-position: calc((-80px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(20px * #{$scaleFactor});
  height: calc(20px * #{$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(972px * #{$scaleFactor}) calc(44px * #{$scaleFactor});
  background-position: calc((-104px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(20px * #{$scaleFactor});
  height: calc(20px * #{$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(972px * #{$scaleFactor}) calc(44px * #{$scaleFactor});
  background-position: calc((-128px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(20px * #{$scaleFactor});
  height: calc(20px * #{$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(972px * #{$scaleFactor}) calc(44px * #{$scaleFactor});
  background-position: calc((-152px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(20px * #{$scaleFactor});
  height: calc(20px * #{$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(972px * #{$scaleFactor}) calc(44px * #{$scaleFactor});
  background-position: calc((-176px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(20px * #{$scaleFactor});
  height: calc(20px * #{$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(972px * #{$scaleFactor}) calc(44px * #{$scaleFactor});
  background-position: calc((-200px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(20px * #{$scaleFactor});
  height: calc(20px * #{$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(972px * #{$scaleFactor}) calc(44px * #{$scaleFactor});
  background-position: calc((-224px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(20px * #{$scaleFactor});
  height: calc(20px * #{$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(972px * #{$scaleFactor}) calc(44px * #{$scaleFactor});
  background-position: calc((-248px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(20px * #{$scaleFactor});
  height: calc(20px * #{$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(972px * #{$scaleFactor}) calc(44px * #{$scaleFactor});
  background-position: calc((-272px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(20px * #{$scaleFactor});
  height: calc(20px * #{$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(972px * #{$scaleFactor}) calc(44px * #{$scaleFactor});
  background-position: calc((-296px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(20px * #{$scaleFactor});
  height: calc(20px * #{$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(972px * #{$scaleFactor}) calc(44px * #{$scaleFactor});
  background-position: calc((-320px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(20px * #{$scaleFactor});
  height: calc(20px * #{$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(972px * #{$scaleFactor}) calc(44px * #{$scaleFactor});
  background-position: calc((-344px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(40px * #{$scaleFactor});
  height: calc(20px * #{$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(972px * #{$scaleFactor}) calc(44px * #{$scaleFactor});
  background-position: calc((-388px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(20px * #{$scaleFactor});
  height: calc(20px * #{$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(972px * #{$scaleFactor}) calc(44px * #{$scaleFactor});
  background-position: calc((-412px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(20px * #{$scaleFactor});
  height: calc(20px * #{$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(972px * #{$scaleFactor}) calc(44px * #{$scaleFactor});
  background-position: calc((-436px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(20px * #{$scaleFactor});
  height: calc(20px * #{$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(972px * #{$scaleFactor}) calc(44px * #{$scaleFactor});
  background-position: calc((-460px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(20px * #{$scaleFactor});
  height: calc(20px * #{$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(972px * #{$scaleFactor}) calc(44px * #{$scaleFactor});
  background-position: calc((-484px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(20px * #{$scaleFactor});
  height: calc(20px * #{$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(972px * #{$scaleFactor}) calc(44px * #{$scaleFactor});
  background-position: calc((-508px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(20px * #{$scaleFactor});
  height: calc(20px * #{$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(972px * #{$scaleFactor}) calc(44px * #{$scaleFactor});
  background-position: calc((-532px - 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(972px * #{$scaleFactor}) calc(44px * #{$scaleFactor});
  background-position: calc((-576px - 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(972px * #{$scaleFactor}) calc(44px * #{$scaleFactor});
  background-position: calc((-620px - 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(972px * #{$scaleFactor}) calc(44px * #{$scaleFactor});
  background-position: calc((-664px - 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(972px * #{$scaleFactor}) calc(44px * #{$scaleFactor});
  background-position: calc((-708px - 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(972px * #{$scaleFactor}) calc(44px * #{$scaleFactor});
  background-position: calc((-752px - 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(972px * #{$scaleFactor}) calc(44px * #{$scaleFactor});
  background-position: calc((-796px - 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(972px * #{$scaleFactor}) calc(44px * #{$scaleFactor});
  background-position: calc((-840px - 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(972px * #{$scaleFactor}) calc(44px * #{$scaleFactor});
  background-position: calc((-884px - 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(972px * #{$scaleFactor}) calc(44px * #{$scaleFactor});
  background-position: calc((-928px - 2px) * #{$scaleFactor}) calc((0px - 2px) * #{$scaleFactor});
  width: calc(40px * #{$scaleFactor});
  height: calc(40px * #{$scaleFactor});
}


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

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

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-animated-overlay {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-animated-overlay:before {
      content: oj-image-url('animated-overlay.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-animated-overlay {
        background-image: none;
      }
      .oj-fwk-icon-animated-overlay:before {
        content: oj-image-url('animated-overlay.svg');
        width: 100%;
        height: 100%;
      }
    }

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

    // In high-contrast mode, background-image disappears, so we have to use content.
    .oj-hicontrast .oj-fwk-icon-cbsingle-dis-selected {
      background-image: none;
    }
    .oj-hicontrast .oj-fwk-icon-cbsingle-dis-selected:before {
      content: oj-image-url('cbsingle_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-cbsingle-dis-selected {
        background-image: none;
      }
      .oj-fwk-icon-cbsingle-dis-selected:before {
        content: oj-image-url('cbsingle_dis_selected.svg');
        width: 100%;
        height: 100%;
      }
    }

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

  }
}