/**
 * Inspired from https://github.com/guardian/sass-mq.git
 */

/**
 * // To enable support for browsers that do not support @media queries,
 * (IE <= 8, Firefox <= 3, Opera <= 9) set $mqResponsive to false
 * Create a separate stylesheet served exclusively to these browsers,
 * meaning @media queries will be rasterized, relying on the cascade itself
 */
$mqResponsive: true;

/**
 * Name your breakpoints in a way that creates a ubiquitous language
 * across team members. It will improve communication between
 * stakeholders, designers, developers, and testers.
 */
$mqBreakpoints: (
  small: $sizeBreakpointSmall,
  medium: $sizeBreakpointMedium,
  large: $sizeBreakpointLarge
);

/**
 * Define the breakpoint from the $mqBreakpoints list that should
 * be used as the target width when outputting a static stylesheet
 * (i.e. when $mqResponsive is set to 'false').
 */
$mqStaticBreakpoint: small;

/**
 * If you want to display the currently active breakpoint in the top
 * right corner of your site during development, add the breakpoints
 * to this list, ordered by width, e.g. (mobile, tablet, desktop).
 */
$mqShowBreakpoints: (small, medium, large);


@function mqGetBreakpointWidth($name) {
  @if(map-has-key($mqBreakpoints, $name)) {
    @return map-get($mqBreakpoints, $name);
  } @else {
    @warn "Breakpoint #{$name} does not exist";
  }
}

/**
 * Media Query mixin
 * Usage:
 * .element {
 *     @include mq($from: mobile) {
 *         color: red;
 *     }
 *     @include mq($to: tablet) {
 *         color: blue;
 *     }
 *     @include mq(mobile, tablet) {
 *         color: green;
 *     }
 *     @include mq($from: tablet, $and: '(orientation: landscape)') {
 *         color: teal;
 *     }
 *     @include mq(950px) {
 *         color: hotpink;
 *     }
 * }
 */

@mixin mq($from: false, $to: false, $and: false, $height: false, $media: all) {
  
  // Initialize variables
  $minSize: 0;
  $maxSize: 0;
  $mediaQuery: "";
  $axis: if($height, "height", "width");
  // From: this breakpoint (inclusive)
  @if $from {
    @if type-of($from) == number {
      $minSize: pxToEm($from, 16);
    } @else { 
      $minSize: pxToEm(mqGetBreakpointWidth($from), 16);
    }
  }

  // To: that breakpoint (exclusive)
  @if $to {
    @if type-of($to) == number {
      $maxSize: pxToEm($to, 16) - .01em;
    } @else {
      $maxSize: pxToEm(mqGetBreakpointWidth($to), 16) - .01em;
    }
  }

  // Responsive support is disabled, rasterize the output outside @media blocks
  // The browser will rely on the cascade itself.
  @if ($mqResponsive == false) {
    $staticBreakpointWidth: mqGetBreakpointWidth($mqStaticBreakpoint);

    @if type-of($staticBreakpointWidth) == number {
      $targetWidth: pxToEm($staticBreakpointWidth, 16);
      // Output only rules that start at or span our target width
      @if ($and == false and ($minSize <= $targetWidth) and (($to == false) or ($maxSize >= $targetWidth))) {
        @content;
      }
    } @else {
      // Throw a warning if $mqStaticBreakpoint is not in the $mqBreakpoints list
      @warn "No static styles will be output: #{$staticBreakpointWidth}";
    }
  }
  // Responsive support is enabled, output rules inside @media queries
  @else {
    @if $minSize != 0 { $mediaQuery: "#{$mediaQuery} and (min-#{$axis}: #{$minSize})"; }
    @if $maxSize != 0 { $mediaQuery: "#{$mediaQuery} and (max-#{$axis}: #{$maxSize})"; }
    @if $and { $mediaQuery: "#{$mediaQuery} and #{$and}"; }

    $mediaQuery: unquote(#{$mediaQuery});

    @media #{$media + $mediaQuery} {
      @content;
    }
  }
}

/**
 * Add a breakpoint
 * Usage: $mqBreakpoints: mqAddBreakpoint(tvscreen, 1920px);
 */
@function mqAddBreakpoint($name, $breakpoint) {
  $newBreakpoint: ($name: $breakpoint);

  @return map-merge($mqBreakpoints, $newBreakpoint);
}

/**
 * Create JSON string of map of breakpoints
 */
@function mqGetBreakpointsJSON($breakpoints: $mqBreakpoints) {
  $json: "{";

  @each $name in map-keys($breakpoints) {
    $value: map-get($breakpoints, $name);

    $json: $json + '"#{$name}":"#{$value}",';
  }

  // Remove last ","
  $json: str-slice($json, 1, str-length($json) - 1);

  // Close JSON string
  $json: $json + "}";

  @return $json;
}


/**
 * Create JSON string of single breakpoint
 */
@function mqGetBreakpointJSON($name, $value) {
  @return "{\"name\":\"#{$name}\",\"value\":\"#{$value}\"}";
}