// Media Queries
// =============


// Breakpoints
// -----------
/// Establish a map of named breakpoints.
///
/// If you have [Accoutrement-Scale](http://oddbird.net/accoutrement-scale/)
/// installed, you can use the scale syntax
/// for describing size-relationships and adjustments –
/// and even reference `$sizes` as though they are `$breakpoints`.
/// Otherwise, the map should contain only valid CSS length values.
///
/// @group queries
///
/// @example scss - defining breakpoints
///   $breakpoints: (
///     'small': 30em,
///     'medium': 45em,
///   );
/// @example scss - using accoutrement-scale
///   $breakpoints: (
///     'small': 30em ('convert-units': 'browser-ems'),
///     'medium': 'small' ('times': 1.5),
///   );
$breakpoints: () !default;



// Below [mixin]
// -------------
/// Generate a max–<`width`/`height`> query,
/// for styling elements below the given viewport width.
/// To help with overlapping min/max queries,
/// we remove `1px` (or `0.01em`) from every max value
/// to avoid media-query overlap.
///
/// @group queries
///
/// @link https://zellwk.com/blog/media-query-units/ PX, EM, or REM Media Queries?
/// @link http://tzi.fr/css/prevent-double-breakpoint Prevent Double Breakpoints
///
/// @param {length | string} $max -
///   The name of a documented breakpoint/size,
///   or an arbitarty length to use in the query.
/// @param {'width' | 'height'} $prop ['width'] -
///   The property (width or height) to test against,
///   for a result of e.g. `(max-width: 30em)`.
///
/// @example scss -
///   @include below(30em) {
///     html { background: red; }
///   }
/// @example scss -
///   $breakpoints: ('red': 30em);
///
///   @include below('red') {
///     html { background: red; }
///   }
@mixin below(
  $max,
  $prop: 'width'
) {
  $value: _get-breakpoint($max);
  $value: _fix-max($value);

  @media (max-#{$prop}: #{$value}) {
    @content;
  }
}



// Above [mixin]
// -------------
/// Generate a min-<`width`/`height`> query,
/// for styling elements above the given viewport width.
///
/// @group queries
///
/// @param {length | string} $min -
///   The name of a documented breakpoint/size,
///   or an arbitarty length to use in the query.
/// @param {'width' | 'height'} $prop ['width'] -
///   The property (width or height) to test against,
///   for a result of e.g. `(min-width: 30em)`.
///
/// @example scss -
///   @include above(50em) {
///     html { background: green; }
///   }
/// @example scss -
///   $breakpoints: ('green': 50em);
///
///   @include above('green') {
///     html { background: green; }
///   }
@mixin above(
  $min,
  $prop: 'width'
) {
  $value: _get-breakpoint($min);

  @media (min-#{$prop}: #{$value}) {
    @content;
  }
}



// Between [mixin]
// ---------------
/// Generate a min-and-max-<`width`/`height`> query,
/// for styling elements between given viewport widths.
/// To help with overlapping min/max queries,
/// we remove `1px` (or `0.01em`) from every max value
/// to avoid media-query overlap.
///
/// @group queries
///
/// @link https://zellwk.com/blog/media-query-units/ PX, EM, or REM Media Queries?
/// @link http://tzi.fr/css/prevent-double-breakpoint Prevent Double Breakpoints
///
/// @param {length | string} $min -
///   The name of a documented breakpoint/size,
///   or an arbitarty length to use as a minimum in the query.
/// @param {length | string} $max -
///   The name of a documented breakpoint/size,
///   or an arbitarty length to use as a maximum in the query.
/// @param {'width' | 'height'} $prop ['width'] -
///   The property (width or height) to test against,
///   for a result of e.g. `(min-width: 30em)`.
///
/// @example scss -
///   @include between(30em, 50em) {
///     html { background: yellow; }
///   }
/// @example scss -
///   $breakpoints: (
///     'red': 30em,
///     'green': 50em,
///   );
///
///   @include between('red', 'green') {
///     html { background: yellow; }
///   }
@mixin between(
  $min,
  $max,
  $prop: 'width'
) {
  $value-min: _get-breakpoint($min);
  $value-max: _get-breakpoint($max);
  $value-max: _fix-max($value-max);

  @media (min-#{$prop}: #{$value-min}) and (max-#{$prop}: #{$value-max}) {
    @content;
  }
}