/* Media queries
   ========================================================================== */

/**
 * This media query mixin gives us a common way of triggering CSS changes based
 * on `min-width` breakpoints.
 *
 * Our global breakpoints are defined in our utility values:
 * https://github.com/fac/fa-css-utilities/blob/master/_utility-values.scss
 */

/* `false` will disable media queries */
$supported: true !default; //

@mixin break($point, $support: $supported) {
  @if $support == true {

    /* Output mixin content inside a media query */
    @if $point == sm {
      @media (min-width: $small-breakpoint) { @content; }
    }
    @else if $point == md {
      @media (min-width: $medium-breakpoint) { @content; }
    }
    @else if $point == lg {
      @media (min-width: $large-breakpoint) { @content; }
    }
    @else if $point == x-lg {
      @media (min-width: $x-large-breakpoint) { @content; }
    }
    @else if $point == xx-lg {
      @media (min-width: $xx-large-breakpoint) { @content; }
    }
  } @else {

    /* Output content inside the mixin, without a media query */
    @content;
  }
}