// Copyright (c) 2014, 2019, Oracle and/or its affiliates. The Universal Permissive License (UPL), Version 1.0
// 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".

{{#shapes}}
// Include this mixin in component SCSS if the image needs to be scaled.
@mixin oj-fwk-icon-{{base}}-scale($scaleFactor: 1) {
  background-size: calc({{spriteWidth}}px * #{$scaleFactor}) calc({{spriteHeight}}px * #{$scaleFactor});
  background-position: calc(({{position.absolute.x}}px - {{padding.left}}px) * #{$scaleFactor}) calc(({{position.absolute.y}}px - {{padding.top}}px) * #{$scaleFactor});
  width: calc({{width.inner}}px * #{$scaleFactor});
  height: calc({{height.inner}}px * #{$scaleFactor});
}

{{/shapes}}

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

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

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

    {{/shapes}}
  }
}