@import "breakpoint";


/* Retina Ready Sprite Generation */
@import "compass/utilities";
@import "compass/css3";

// Import sprites for 1x and 2x images.
$sprite_1x: sprite-map("icons/*.png", $layout: smart);
$sprite_2x: sprite-map("icons_2x/*.png", $layout: smart);

// Create a mixin to dynamically load 2x images when necessary.
@mixin retina_ready_sprite($icon_name, $sprite_1x: $sprite_1x, $sprite_2x: $sprite_2x) {
    @include sprite-dimensions($sprite_1x, $icon_name);
    background-image: sprite-url($sprite_1x);
    background-position: sprite-position($sprite_1x, $icon_name);
    background-repeat: no-repeat;
    @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
        background-image: sprite-url($sprite_2x);
        /*
        // Uncomment this if get position issues in 2x sprite
        $pos: sprite-position($sprite_2x, $icon_name);
        background-position: nth($pos, 1)/2 nth($pos, 2)/2;
        */
        @include background-size(ceil(image-width(sprite-path($sprite_2x)) / 2) auto);
    }
}
/* End Of Retina Ready Sprite Generation */

// don't move these 4 lines elsewhere, up or down (it will break foundation breakpoints)
$small-breakpoint:  em-calc(620) !default;
$medium-breakpoint: em-calc(768) !default;
$large-breakpoint:  em-calc(992) !default;
$xlarge-breakpoint: em-calc(1200) !default;