[class^={{packageName}}-] {
    display:inline-block;
    vertical-align:middle;
    position: relative;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-image: url('{{{spritesheet.escaped_image}}}');

    {{#spritesheet}}
    $total_width: {{width}};
    $total_height: {{height}};
    {{/spritesheet}}

    {{#block "sprites"}}
        {{#each sprites}}
    &.{{packageName}}-{{name}} {
        background-size: (($total_width / {{width}}) * 100%) (($total_height / {{height}}) * 100%);
        background-position: (({{offset_x}} / ($total_width - {{width}})) * -100%) (({{offset_y}} / ($total_height - {{height}})) * -100%);
        width: {{px.width}};
        height: {{px.height}};
    }
        {{/each}}
    {{/block}}
}