////
/// @group helpers/layout
////

// =========================================================
// Wrangle sass-mq config...
// =========================================================

// Pass our breakpoint definitions through to sass-mq.
$mq-breakpoints: if(variable-exists(tbxforms-breakpoints), $tbxforms-breakpoints, ());

$mq-show-breakpoints: ();

@if variable-exists(tbxforms-show-breakpoints) and $tbxforms-show-breakpoints {
  $mq-show-breakpoints: map-keys($tbxforms-breakpoints);
}

// This is a horrible, horrible hack to prevent the 'dev mode' CSS to display
// the current breakpoint from being included multiple times.
//
// We can't use the `exports` mixin for this because import directives cannot be
// used within control directives 😠
$sass-mq-already-included: false !default;

@if $sass-mq-already-included {
  $mq-show-breakpoints: ();
}

@import "../vendor/sass-mq";

$sass-mq-already-included: true;

// =========================================================
// Helpers
// =========================================================

/// Media Query
///
/// This is a currently a wrapper for sass-mq - abstracted so that we can
/// replace it in the future if we so choose.
///
/// @param {String | Boolean} $from [false] - One of $tbxforms-breakpoints
/// @param {String | Boolean} $until [false] - One of $tbxforms-breakpoints
/// @param {String | Boolean} $and [false] - Additional media query parameters
/// @param {String} $media-type [all] - Media type: screen, print…
///
/// @ignore Undocumented mq API, for advanced use only:
/// @ignore @param {Map} $breakpoints [$tbxforms-breakpoints]
///
/// @content styling rules, wrapped into a @media query when $responsive is true
///
/// @example scss
///  .element {
///    @include tbxforms-media-query($from: mobile) {
///      color: red;
///    }
///    @include tbxforms-media-query($until: tablet) {
///      color: blue;
///    }
///    @include tbxforms-media-query(mobile, tablet) {
///      color: green;
///    }
///    @include tbxforms-media-query($from: tablet, $and: '(orientation: landscape)') {
///      color: teal;
///    }
///    @include tbxforms-media-query(950px) {
///      color: hotpink;
///    }
///    @include tbxforms-media-query(tablet, $media-type: screen) {
///      color: hotpink;
///    }
///  }
///
/// @access public

@mixin tbxforms-media-query($args...) {
  @include mq($args...) {
    @content;
  }
}