// --------------------------------------
//
//   #tools.mediaqueries
//   http://www.sitepoint.com/managing-responsive-breakpoints-sass/
//
// --------------------------------------


$breakpoints: ("small": "(max-width: 520px)", "medium": "(min-width: 521px)", "large": "(min-width: 920px)", "xlarge": "(min-width: 1220px)", "large-shorter": "(min-width: 920px) and ( max-height: 600px)")

// ------------------------------------------------------------------
//   @mixin media-query
//   call and create  all the breakpoints definine on the map $breakpoints
// ------------------------------------------------------------------
=media-query($name, $push: false)
  // If the key exists in the map
  @if map-has-key($breakpoints, $name)
    // Prints a media query based on the value
    @media #{map-get($breakpoints, $name)}
      @content
  @else if $push != false
    // Add the new breakpoint to the map
    $breakpoints: map-merge($breakpoints, ($name: $push)) !global
    // And re-call the mixin normally
    +media-query($name)
      @content
  @else
    // Just warn the user
    @warn "Unfortunately, no value could be retrieved from `#{$name}`. " + "Please make sure it is defined in `$breakpoints` map. " + "Or pass the media query as a second parameter to add it to the map."


// ------------------------------------------------------------------
//   @mixin respond-to
//   this mixin allow us to call several media-queries at once
//
//   USAGE
//   .searchform
//     +respond-to(screen-xs, screen-sm)
//       padding-left: 0
// ------------------------------------------------------------------
=respond-to($media...)
  @each $mediatype in $media
    +media-query($mediatype)
      @content