/*#############################################################################
# MIXINS
#############################################################################*/

// Media Queries
/* stylelint-disable media-query-no-invalid */
@mixin responsive($break-point) {

  @media only screen and (min-width: rem-calc($break-point)) { @content; }

}

@mixin responsive-min-max($min-break-point, $max-break-point) {

  @media only screen and (min-width: rem-calc($min-break-point)) and (max-width: rem-calc($max-break-point)) { @content; }

}

@mixin responsive-max($break-point) {

  @media only screen and (max-width: rem-calc($break-point)) { @content; }

}

@mixin responsive-height($break-point) {

  @media only screen and (min-height: rem-calc($break-point)) { @content; }

}

@mixin responsive-max-height($break-point) {

  @media only screen and (max-height: rem-calc($break-point)) { @content; }

}
/* stylelint-enable media-query-no-invalid */

// ------------------------------------------------
// Retina display support
/* Example:
div.logo {
  background: url("logo.png") no-repeat;
  @include background-retina("logo2x.png", 100px, 25px);
}
*/
/* stylelint-disable media-feature-name-no-unknown */
@mixin background-retina($image, $width, $height) {
  @media
  only screen and (-webkit-min-device-pixel-ratio: 1.3),
  only screen and (-o-min-device-pixel-ratio: 2.6 / 2),
  only screen and (min--moz-device-pixel-ratio: 1.3),
  only screen and (min-device-pixel-ratio: 1.3),
  only screen and (min-resolution: 1.3dppx) {
    background-image: url($image);
    background-size: $width $height;
  }
}
/* stylelint-enable media-feature-name-no-unknown */


/*#############################################################################
# PLACEHOLDERS
#############################################################################*/


%transition-all {
  @include transition(all 0.2s cubic-bezier(.7, 0, .175, 1) 0s);
}