// Resolutions
$FHD: 1920px
$WXGA-plus: 1680px
$HD: 1366px
$WXGA: 1280px
$XGALandscape: 1024px
$XGAPortrait: 768px
$VGA: 640px
$HVGA: 480px
$QVGA: 320px

// Rafal Bromirski mixins rules (http://paranoida.com/)
//   ---
//   @ hdpi(ratio)                    // devices with hidpi displays (default ratio: 1.3)
//   ---
//   @ 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                           // only iPad (1, 2, Mini) landscape & portrait
//   @ ipad-landscape                 // only iPad (1, 2, Mini) only landscape
//   @ ipad-portrait                  // only iPad (1, 2, 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 ------------------------------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------------------------------------

// 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/)

=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 ----------------------------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------------------------------------

=iphone
  @media only screen and (min-device-width: 320px) and (max-device-width: 480px)
    @content

=iphone3
  @media only screen and (min-device-width: 320px) and (max-device-width: 480px)
  and (-webkit-device-pixel-ratio: 1)
    @content

=iphone3-portrait
  @media only screen and (min-device-width: 320px) and (max-device-width: 480px)
  and (-webkit-device-pixel-ratio: 1) and (orientation:portrait)
    @content

=iphone3-landscape
  @media only screen and (min-device-width: 320px) and (max-device-width: 480px)
  and (-webkit-device-pixel-ratio: 1) and (orientation:landscape)
    @content

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

=iphone4
  @media only screen and (min-device-width: 320px) and (max-device-width: 480px)
  and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3)
    @content

=iphone4-portrait
  @media only screen and (min-device-width: 320px) and (max-device-width: 480px)
  and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) and (orientation:portrait)
    @content

=iphone4-landscape
  @media only screen and (min-device-width: 320px)  and (max-device-width: 480px)
  and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) and (orientation:landscape)
    @content

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

=iphone5
  @media only screen and (min-device-width: 320px) and (max-device-width: 568px)
  and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71)
    @content

=iphone5-portrait
  @media only screen and (min-device-width: 320px) and (max-device-width: 568px)
  and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:portrait)
    @content

=iphone5-landscape
  @media only screen and (min-device-width: 320px) and (max-device-width: 568px)
  and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:landscape)
    @content

// ---------------------------------------------------------------------------------------------------------------------
// --- ipad + ipad mini ------------------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------------------------------------

=ipad
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
  and (-webkit-device-pixel-ratio: 1)
    @content

=ipad-portrait
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
  and (-webkit-device-pixel-ratio: 1) and (orientation:portrait)
    @content

=ipad-landscape
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
  and (-webkit-device-pixel-ratio: 1) and (orientation:landscape)
    @content

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

=ipad-retina
  @media screen and (min-device-width: 768px) and (max-device-width: 1024px)
  and (-webkit-device-pixel-ratio: 2)
    @content

=ipad-retina-portrait
  @media screen and (min-device-width: 768px) and (max-device-width: 1024px)
  and (-webkit-device-pixel-ratio: 2) and (orientation:portrait)
    @content

=ipad-retina-landscape
  @media screen and (min-device-width: 768px) and (max-device-width: 1024px)
  and (-webkit-device-pixel-ratio: 2) and (orientation:landscape)
    @content

// Retina
=retina
  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)
    @content

// Screen
=mq($res-min, $res-max)
  @media screen and ( min-width: if(unitless($res-min), $res-min*$units, $res-min) ) and ( max-width: if(unitless($res-max), $res-max*$units, $res-max) )
    @content

=mq-max($res)
  @media screen and ( max-width: if(unitless($res), $res*$units, $res) )
    @content

=mq-min($res)
  @media screen and ( min-width: if(unitless($res), $res*$units, $res) )
    @content

// Library screens

=mqhd
  @media only screen and (min-width: $HD)
    @content

// Only desktops & tablets landscape
=mq1366and1024
  @media only screen and (min-width: $XGALandscape + 1) and (max-width: $HD)
    @content

// >= 1024px
=mq1024
  @media only screen and (max-width: $XGALandscape)
    @content

// Only tablets portrait
=mq1024and768
  @media only screen and (min-width: $XGAPortrait + 1) and (max-width: $XGALandscape)
    @content

// >= 768px
=mq768
  @media only screen and (max-width: $XGAPortrait)
    @content

// Phones landscape
=mq768and480
  @media only screen and (min-width: $HVGA + 1) and (max-width: $XGAPortrait)
    @content

// >= 640px
=mq640
  @media only screen and (max-width: $VGA)
    @content

// >= 480px
=mq480
  @media only screen and (max-width: $HVGA)
    @content

// Small phones (>=320px)
=mq320
  @media only screen and (max-width: $QVGA)
    @content