{{!-- This is the template which is used for generating the CSS file for sprite by grunt-spritesmith  --}}

$retine_sprite_width : {{retina_spritesheet.width}}px;
$retine_sprite_height : {{retina_spritesheet.height}}px;

.emoticon {
        background : transparent url(.././assets/images/emojis.png) 0 0 no-repeat;
}

@media all and (-webkit-min-device-pixel-ratio : 1), all and (min--moz-device-pixel-ratio : 1), all and (-o-min-device-pixel-ratio : 1), all and (min-device-pixel-ratio : 1), all and (min-resolution : 96dpi) {
    .emoticon {
        background : transparent url(.././assets/images/emojis.png) 0 0 no-repeat;
    }
}

@media all and (-webkit-min-device-pixel-ratio : 1.5), all and (-o-min-device-pixel-ratio : 3/2), all and (min-device-pixel-ratio : 1.5), all and (min-resolution : 144dpi) {
    .emoticon {
        background      : transparent url(.././assets/images/emojis@2x.png) 0 0 no-repeat;
        background-size : $retine_sprite_width/2 $retine_sprite_height/2;
    }
}

{{#items}}
.emoticon-{{escape name}}{
    background-position: {{px.offset_x}} {{px.offset_y}};
}
{{/items}}