@import "compass/css3";
@import "compass/css3/user-interface";
@import "compass/utilities/sprites/base";
@import "compass/css3/border-radius";
@import "compass/utilities/sprites";
@import "compass/reset";


// Responsive Breakpoints

@mixin screen($resMin, $resMax)
{
    @media screen and (min-width: $resMin) and (max-width: $resMax)
    {
        @content;
    }
}

@mixin max-screen($res)
{
    @media screen and (max-width: $res)
    {
        @content;
    }
}

@mixin min-screen($res)
{
    @media screen and (min-width: $res)
    {
        @content;
    }
}

@mixin screen-height($resMin, $resMax)
{
    @media screen and (min-height: $resMin) and (max-height: $resMax)
    {
        @content;
    }
}

@mixin max-screen-height($res)
{
    @media screen and (max-height: $res)
    {
        @content;
    }
}

@mixin min-screen-height($res)
{
    @media screen and (min-height: $res)
    {
        @content;
    }
}

// ---------------------------------------------------------------------------------------------------------------------
// --- hdpi ------------------------------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------------------------------------

// Based on bourbon hidpi-media-queries file (https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_hidpi-media-query.scss)
// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)

@mixin hdpi($ratio: 1.3)
{
    @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
    only screen and (min--moz-device-pixel-ratio: $ratio),
    only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
    only screen and (min-resolution: #{round($ratio*96)}dpi),
    only screen and (min-resolution: #{$ratio}dppx)
    {
        @content;
    }
}

// ---------------------------------------------------------------------------------------------------------------------
// --- iphone ----------------------------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------------------------------------

@mixin iphone3($orientation: all)
{
    $deviceMinWidth: 320px;
    $deviceMaxWidth: 480px;
    $devicePixelRatio: 1;

    @if $orientation == all
    {
        @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth)
        and (-webkit-device-pixel-ratio: $devicePixelRatio)
        {
            @content;
        }
    }
    @else
    {
        @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth)
        and (-webkit-device-pixel-ratio: $devicePixelRatio) and (orientation: #{$orientation})
        {
            @content;
        }
    }
}

// ---------------------------------------------------------------------------------------------------------------------
// --- iphone-retina ---------------------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------------------------------------

@mixin iphone4($orientation: all)
{
    $deviceMinWidth: 320px;
    $deviceMaxWidth: 480px;
    $devicePixelRatio: 2;
    $deviceAspectRatio: '2/3';

    @if $orientation == all
    {
        @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth)
        and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio)
        {
            @content;
        }
    }
    @else
    {
        @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth)
        and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: 2/3) and (orientation: #{$orientation})
        {
            @content;
        }
    }
}

// ---------------------------------------------------------------------------------------------------------------------
// --- iphone-5 --------------------------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------------------------------------

@mixin iphone5($orientation: all)
{
    $deviceMinWidth: 320px;
    $deviceMaxWidth: 568px;
    $devicePixelRatio: 2;
    $deviceAspectRatio: '40/71';

    @if $orientation == all
    {
        @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth)
        and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio)
        {
            @content;
        }
    }
    @else
    {
        @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth)
        and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio) and (orientation: #{$orientation})
        {
            @content;
        }
    }
}

// ---------------------------------------------------------------------------------------------------------------------
// --- iphone-6 --------------------------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------------------------------------

@mixin iphone6($orientation: all)
{
    $deviceMinWidth: 375px;
    $deviceMaxWidth: 667px;
    $devicePixelRatio: 2;

    @if $orientation == all
    {
        @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth)
        and (-webkit-device-pixel-ratio: $devicePixelRatio)
        {
            @content;
        }
    }
    @else
    {
        @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth)
        and (-webkit-device-pixel-ratio: $devicePixelRatio) and (orientation: #{$orientation})
        {
            @content;
        }
    }
}

// ---------------------------------------------------------------------------------------------------------------------
// --- iphone-6 Plus ---------------------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------------------------------------

@mixin iphone6-plus($orientation: all)
{
    $deviceMinWidth: 414px;
    $deviceMaxWidth: 736px;
    $devicePixelRatio: 3;

    @if $orientation == all
    {
        @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth)
        and (-webkit-device-pixel-ratio: $devicePixelRatio)
        {
            @content;
        }
    }
    @else
    {
        @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth)
        and (-webkit-device-pixel-ratio: $devicePixelRatio) and (orientation: #{$orientation})
        {
            @content;
        }
    }
}

// ---------------------------------------------------------------------------------------------------------------------
// --- ipads (all) -----------------------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------------------------------------

@mixin ipad($orientation: all)
{
    $deviceMinWidth: 768px;
    $deviceMaxWidth: 1024px;

    @if $orientation == all
    {
        @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth)
        {
            @content;
        }
    }
    @else
    {
        @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth)
        and (orientation: #{$orientation})
        {
            @content;
        }
    }
}

// ---------------------------------------------------------------------------------------------------------------------
// --- medium (all) -----------------------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------------------------------------

@mixin medium($orientation: all)
{
    $deviceMinWidth: 940px;
    $deviceMaxWidth: 1200px;

    @if $orientation == all
    {
        @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth)
        {
            @content;
        }
    }
    @else
    {
        @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth)
        and (orientation: #{$orientation})
        {
            @content;
        }
    }
}
// ---------------------------------------------------------------------------------------------------------------------
// --- small (all) -----------------------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------------------------------------

@mixin small($orientation: all)
{
    $deviceMinWidth: 768px;
    $deviceMaxWidth: 1000px;

    @if $orientation == all
    {
        @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth)
        {
            @content;
        }
    }
    @else
    {
        @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth)
        and (orientation: #{$orientation})
        {
            @content;
        }
    }
}

// ---------------------------------------------------------------------------------------------------------------------
// --- xsmall (all) -----------------------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------------------------------------

@mixin xsmall($orientation: all)
{
    $deviceMinWidth: 240px;
    $deviceMaxWidth: 767px;

    @if $orientation == all
    {
        @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth)
        {
            @content;
        }
    }
    @else
    {
        @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth)
        and (orientation: #{$orientation})
        {
            @content;
        }
    }
}

// ---------------------------------------------------------------------------------------------------------------------
// --- ipad-retina -----------------------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------------------------------------

@mixin ipad-retina($orientation: all)
{
    $deviceMinWidth: 768px;
    $deviceMaxWidth: 1024px;
    $devicePixelRatio: 2;

    @if $orientation == all
    {
        @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth)
        and (-webkit-device-pixel-ratio: $devicePixelRatio)
        {
            @content;
        }
    }
    @else
    {
        @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth)
        and (-webkit-device-pixel-ratio: $devicePixelRatio) and (orientation: #{$orientation})
        {
            @content;
        }
    }
}