/*
 *
 *  * Copyright 2015 encuestame
 *  *
 *  *  Licensed under the Apache License, Version 2.0 (the "License");
 *  *  you may not use this file except in compliance with the License.
 *  *  You may obtain a copy of the License at
 *  *
 *  *       http://www.apache.org/licenses/LICENSE-2.0
 *  *
 *  *  Unless required by applicable law or agreed to in writing, software
 *  *  distributed under the License is distributed on an "AS IS" BASIS,
 *  *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  *  See the License for the specific language governing permissions and
 *  *  limitations under the License.
 *
 */


@mq-mobile-portrait		: 320px;
@mq-mobile-landscape	: 480px;
@mq-tablet-portrait		: 768px;
@mq-tablet-landscape	: 1024px;
@mq-desktop				: 1382px;
@iphone-portrait: 320px;
@iphone-landscape: 480px;
@ipad-portrait: 768px;
@ipad-landscape: 1024px;



.portrait-only(@rules) {
  @media (orientation: portrait) {
    @rules();
  }
}

// Both portrait and landscape
.mobile-only(@rules) {
  @media (max-width : @mq-mobile-landscape) {
    @rules();
  }
}

// Everything up to and including the portrait width of the phone
// Since it's the smallest query it doesn't need a min
.mobile-portrait-only(@rules) {
  @media (max-width : @mq-mobile-portrait) and (orientation: portrait) {
    @rules();
  }
}

// Everything up to and including the mobile portrait
.mobile-portrait-and-below(@rules) {
  @media (max-width : @mq-mobile-portrait) and (orientation: portrait) {
    @rules();;
  }
}

// Everything above and including the mobile portrait
.mobile-portrait-and-up(@rules) {
  @media (min-width : @mq-mobile-portrait) and (orientation: portrait) {
    @rules();;
  }
}

// Everthing larger than a portrait mobile up until mobile landscape
.mobile-landscape-only(@rules) {
  @media only screen
  and (min-width : @mq-mobile-portrait + 1)
  and (max-width : @mq-mobile-landscape)
  and (orientation: landscape)
  {
    @rules();;
  }
}

// Everything up to and including the mobile landscape width
.mobile-landscape-and-below(@rules) {
  @media only screen and (max-width : @mq-mobile-landscape) and (orientation: landscape) {
    @rules();;
  }
}

// Everything above and including the mobile landscape width
.mobile-landscape-and-up(@rules) {
  @media only screen and (min-width : @mq-mobile-portrait + 1) and (orientation: landscape) {
    @rules();;
  }
}

// Both the portrait and landscape width of the tablet
// Larger than a landscape mobile but less than or equal to a landscape tablet
.tablet-only(@rules) {
  @media only screen and (min-width : @mq-mobile-landscape + 1) and (max-width : @mq-tablet-landscape) {
    @rules();;
  }
}

// Everything larger than mobile landscape up until the portrait width of the tablet
.tablet-portrait-only(@rules) {
  @media only screen and (min-width : @mq-mobile-landscape + 1) and (max-width : @mq-tablet-portrait) {
    @rules();;
  }
}

// Everything below and including the portrait width of the tablet
.tablet-portrait-and-below(@rules) {
  @media only screen and (max-width : @mq-tablet-portrait) {
    @rules();;
  }
}

// Everything above and including the portrait width of the tablet
.tablet-portrait-and-up(@rules) {
  @media only screen and (min-width : @mq-mobile-landscape + 1) {
    @rules();;
  }
}

// Larger than portrait but less than or equal to the landscape width
.tablet-landscape-only(@rules) {
  @media only screen and (min-width : @mq-tablet-portrait + 1) and (max-width : @mq-tablet-landscape) {
    @rules();;
  }
}

// Up to and including the tablet landscape
.tablet-landscape-and-below(@rules) {
  @media only screen and (max-width : @mq-tablet-landscape) {
    @rules();;
  }
}

// Everything larger than portrait tablet
.tablet-landscape-and-up(@rules) {
  @media only screen and (min-width : @mq-tablet-portrait + 1) {
    @rules();;
  }
}

// Everything larger than a landscape tablet
.desktop-and-up(@rules) {
  @media only screen and (min-width : @mq-tablet-landscape + 1) {
    @rules();;
  }
}

// Everything below and including the desktop
.desktop-and-below(@rules) {
  @media only screen and (max-width : @mq-desktop) {
    @rules();;
  }
}

// Everything larger than a landscape tablet but less than or equal to the desktop
.desktop-only(@rules) {
  @media only screen and (min-width : @mq-tablet-landscape + 1) and (max-width : @mq-desktop) {
    @rules();;
  }
}

// Retina screens have a 1.5 pixel ratio, not 2
.retina(@rules) {
  @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
    @rules();;
  }
}

.iphone6-landscape {
  @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
    @rules();;
  }
}

.iphone6-portrait(@rules) {
  @media only screen
  and (min-device-width : 375px)
  and (max-device-width : 667px)
  and (orientation : portrait)
  and (-webkit-min-device-pixel-ratio : 2)
  {
    @rules();;
  }
}

.iphone6Plus-landscape(@rules) {
  @media only screen
  and (min-device-width: 414px)
  and (max-device-width: 736px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 3) {
    @rules();;
  }
}

.iphone6Plus-portrait(@rules) {
  @media only screen
  and (min-device-width : 414px)
  and (max-device-width : 736px)
  and (orientation : portrait)
  and (-webkit-min-device-pixel-ratio : 3)
  {
    @rules();
  }
}