@function retina-size($value) {
  @return floor($value / 2);
}

@mixin retina-bg-size($spriteWidth, $spriteHeight) {
  background-size: floor($spriteWidth / 2) floor($spriteHeight / 2);
}

.iti-flag {
  $item-width-maps: ({{#items}}{{strings.name}}: {{px.width}}, {{/items}});
  $standard-country: 'ac';
  width: map-get($item-width-maps, $standard-country);

  @each $key, $width in $item-width-maps {
    @if $width != map-get($item-width-maps, $standard-country) {
      &.#{$key} {
        width: $width;
      }
    }
  }

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-size: {{spritesheet.px.width}} {{spritesheet.px.height}};
  }

  {{#items}}
  &.{{strings.name}} {
    height: {{px.height}};
    background-position: {{px.offset_x}} {{px.offset_y}};
  }
  {{/items}}
}