/* ============================================================================
   @CORE -> MIXINS -> MEDIA QUERIES
   ========================================================================= */


/**
 * Setup media queries for minimum and maximum widths and heights, with width
 * being the default, also includes the ability to apply ranges. The mixin will
 * accept any of Scally's breakpoints defined here: Core -> Settings ->
 * Breakpoints or any integer. For `max-width` media queries the "max" flag
 * needs to be applied, and for height media queries the `$axis` parameter needs
 * to be set to "height".
 *
 * @example
   @include respond-to(lap) {
     .foo {background: red;}
   }

   @include respond-to(500) {
     .foo {background: red;}
   }

   @include respond-to(palm, max) {
     .foo {background: red;}
   }

   @include respond-to(500, $axis: height) {
     .foo {background: red;}
   }

   @include respond-range(500, 780) {
     .foo {background: red;}
   }

   @include respond-range(lap) {
     .foo {background: red;}
   }
 */


/**
 * Simple minimum and maximum width and height values.
 */

@mixin respond-to($value, $limit: "min", $axis: "width") {
  @media (#{$limit}-#{$axis}: to-em($value, 16)) {
    @content;
  }
}


/**
 * Ranges.
 */

@mixin respond-range($min-value, $max-value: 0, $axis: "width") {

  // If `min-value` is a named breakpoint and `max-value` is omitted use the
  // next named breakpoint after the `min-value` breakpoint.
  @if type-of($min-value) == "string" and $max-value == 0 {

    $breakpoint-values: map-keys($breakpoints);
    $breakpoint-index:  index($breakpoint-values, $min-value);

    @if type-of($breakpoint-index) == "number" {

      $next-breakpoint-index: $breakpoint-index + 1;

      @if $min-value == "lap" {
        $next-breakpoint-index: $breakpoint-index + 2;
      }// endif

      @if $next-breakpoint-index <= length($breakpoint-values) {
        $max-value: nth($breakpoint-values, $next-breakpoint-index);
      }
      @else {
        @warn "No max-#{$axis} value specified and no available breakpoints to use as a substitute";
      }// endif
    }
    @else {
      @warn "Breakpoint name '#{$min-value}' not recognised.";
    }
  }// endif

  @media (min-#{$axis}: to-em($min-value, 16)) and (max-#{$axis}: to-em($max-value, 16)) {
    @content;
  }
}