/* ****************************************************************************
 * COMMON: MIXINS
 */

@import "variables";

// High PPI display background
@mixin background-2x($path, $ext: "png", $w: auto, $h: auto, $pos: left top, $repeat: no-repeat) {
    $at1x_path: "#{$path}.#{$ext}";
    $at2x_path: "#{$path}@2x.#{$ext}";

    background: #fff url("#{$at1x_path}") $repeat $pos;
    background-size: $w $h;

    @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-image: url("#{$at2x_path}");
    }
}

// Breakpoints
@mixin bp($point) {
    // Phone: < 480px
    @if $point == phone {
        @media only screen and (max-width: $phone) {
            @content;
        }
    }

    // Phone Large: < 600px
    @if $point == phone-large {
        @media only screen and (max-width: $phone--large) {
            @content;
        }
    }

    // Tablet: < 783px
    @if $point == tablet {
        @media only screen and (max-width: $tablet) {
            @content;
        }
    }

    // Desktop Small: < 960px
    @if $point == desktop-small {
        @media only screen and (max-width: $desktop--small) {
            @content;
        }
    }

    // Desktop: < 1100px
    @if $point == desktop {
        @media only screen and (max-width: $desktop) {
            @content;
        }
    }

    // Desktop Large: < 1200px
    @if $point == desktop-large {
        @media only screen and (max-width: $desktop--large) {
            @content;
        }
    }

    // Desktop Wide: < 1440px
    @if $point == desktop-wide {
        @media only screen and (max-width: $desktop--wide) {
            @content;
        }
    }

    // Desktop Very Large: < 1600px
    @if $point == desktop-very-large {
        @media only screen and (max-width: $desktop--very-large) {
            @content;
        }
    }
}