/// Respond to media queries.
///
/// @group helpers_utility
///
/// @example scss - Usage
///
///   $k-media-queries: (
///     s: (
///       min-width: 640px,
///       max-width: 767px,
///     ),
///   );
///
///   .k-Header__nav {
///     @include k-media-min('s') {
///       display: none;
///     }
///   }

@mixin k-media-min($query) {
  $queries: map-get($k-media-queries, $query);
  $min-width: map-get($queries, 'min-width');

  @if $min-width == null {
    @content;
  } @else {
    @media (min-width: $min-width) {
      @content;
    }
  }
}

@mixin k-media-max($query) {
  $queries: map-get($k-media-queries, $query);
  $max-width: map-get($queries, 'max-width');

  @if $max-width == null {
    @content;
  } @else {
    @media (max-width: $max-width) {
      @content;
    }
  }
}

@mixin k-media-within($query) {
  $queries: map-get($k-media-queries, $query);
  $min-width: map-get($queries, 'min-width');
  $max-width: map-get($queries, 'max-width');

  @if $min-width == null {
    @media (max-width: $max-width) { @content; }
  } @else if $max-width == null {
    @media (min-width: $min-width) { @content; }
  } @else {
    @media (min-width: $min-width) and (max-width: $max-width) { @content; }
  }
}

// DEPRECATED: use `$k-media-queries` instead
$xs-max-width: 480px;
$sm-min-width: $xs-max-width + 1px;
$sm-max-width: 768px;
$md-min-width: $sm-max-width + 1px;
$md-max-width: 1200px;
$lg-min-width: $md-max-width + 1px;

// DEPRECATED: use `k-media-within` instead
@mixin k-media-lg {
  @media (min-width: $lg-min-width) {
    @content;
  }
}

// DEPRECATED: use `k-media-within` instead
@mixin k-media-md {
  @media (min-width: $md-min-width) and (max-width: $md-max-width) {
    @content;
  }
}

// DEPRECATED: use `k-media-within` instead
@mixin k-media-sm {
  @media (min-width: $sm-min-width) and (max-width: $sm-max-width) {
    @content;
  }
}

// DEPRECATED: use `k-media-within` instead
@mixin k-media-xs {
  @media (max-width: $xs-max-width) {
    @content;
  }
}