/**
 * Flexlay Media Queries
 *
 * This files uses the different flexlay modules and 'assigns' them to the media queries
 * depending on Material Layout Breakpoints
 * https://material.io/guidelines/layout/responsive-ui.html
 */

@import 'variables';

@import 'modules/alignment';
@import 'modules/layout';
@import 'modules/properties';
@import 'modules/visibility';

/** Given a breakpoint name (to be used as suffix), generate the CSS for flexlay modules **/
@mixin layout($break: null) {
  @include flex-alignments($break);
  @include flex-layouts($break);
  @include flex-properties($break);
  @include flex-visibility($break);
}

/** Limits content to given breakpoint bounds **/
@mixin bounded($min: null, $max: null) {
  @if $min == null {
    @media (max-width: $max - 1) { @content; }

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

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