//-----------------------------------------------------
// media queries scss
// Author: Rafal Bromirski
// https://github.com/paranoida/sass-mediaqueries/blob/master/_media-queries.scss
//-----------------------------------------------------

//-----------------------------------------------------
//
// Mixins:
//   @ min-screen(width)                      // shortcut for @media screen and (min-width ...)
//   @ max-screen(width)                      // shortcut for @media screen and (max-width ...)
//   @ screen(min-width, max-width)           // shortcut for @media screen and (min-width ...) and (max-width ...)
//   ---
//   @ min-screen-height(height)              // shortcut for @media screen and (min-height ...)
//   @ max-screen-height(height)              // shortcut for @media screen and (max-height ...)
//   @ screen-height(min-height, max-height)  // shortcut for @media screen and (min-height ...) and (max-height ...)
//   ---
//   @ iphone3                                // only iPhone (2, 3G, 3GS) landscape & portrait
//   @ iphone3(landscape)                     // only iPhone (2, 3G, 3GS) only landscape
//   @ iphone3(portrait)                      // only iPhone (2, 3G, 3GS) only portrait
//   ---
//   @ iphone4                                // only iPhone (4, 4S) landscape & portrait
//   @ iphone4(landscape)                     // only iPhone (4, 4S) only landscape
//   @ iphone4(portrait)                      // only iPhone (4, 4S) only portrait
//   ---
//   @ iphone5                                // only iPhone (5) landscape & portrait
//   @ iphone5(landscape)                     // only iPhone (5) only landscape
//   @ iphone5(portrait)                      // only iPhone (5) only portrait
//   ---
//   @ ipad                                   // all iPads (1, 2, 3, 4, Mini) landscape & portrait
//   @ ipad(landscape)                        // all iPads (1, 2, 3, 4, Mini) only landscape
//   @ ipad(portrait)                         // all iPads (1, 2, 3, 4, Mini) only portrait
//   ---
//   @ ipad-retina                            // only iPad (3, 4) landscape & portrait
//   @ ipad-retina(landscape)                 // only iPad (3, 4) only landscape
//   @ ipad-retina(portrait)                  // only iPad (3, 4) only portrait
//   ---
//   @ hdpi(ratio)                            // devices with hidpi displays (default ratio: 1.3)
//
//-----------------------------------------------------

// screen
//-----------------------------------------------------

@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-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
    and (-webkit-device-pixel-ratio: $devicePixelRatio)
    {
      @content;
    }
  }
  @else
  {
    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-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-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
    and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio)
    {
      @content;
    }
  }
  @else
  {
    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-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-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
    and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio)
    {
      @content;
    }
  }
  @else
  {
    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-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-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
    and (-webkit-device-pixel-ratio: $devicePixelRatio)
    {
      @content;
    }
  }
  @else
  {
    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
    and (-webkit-device-pixel-ratio: $devicePixelRatio) and (orientation:#{$orientation})
    {

      @content;
    }
  }
}


// iphone6-plus
//-----------------------------------------------------

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

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