@charset 'UTF-8';

////
/// Flavor SCSS Grid-system Containers
/// @group grid-system-containers
/// @author blackmirror1980
////

@mixin container-breakpoints($gutter: $gutter-default, $breakpoints: $breakpoints-default) {
  // Containers Breakpoints
  // --------------------------------------------------
  @each $key, $breakpoint in $breakpoints {
    $min-viewport-width: get($breakpoint, 'min-viewport-width');
    $max-viewport-width: get($breakpoint, 'max-viewport-width');
    $container-width: get($breakpoint, 'container-width');

    @if is-defined($min-viewport-width) {
      $min-viewport-width: px($min-viewport-width);
    }

    @if is-defined($max-viewport-width) {
      $max-viewport-width: px($max-viewport-width);
    }

    @include media($media-type: screen, $min-width: $min-viewport-width, $max-width: $max-viewport-width) {
      @include box-size($container-width auto);
    }
  }
}

@mixin containers($gutter: $gutter-default, $breakpoints: $breakpoints-default) {
  // Containers
  // --------------------------------------------------
  %container-base {
    // container-base
    @include display(block);
    @include box-size(100% auto);
    @include padding(0 $gutter);
    @include margin(0 auto);
  }

  .container,
  .container-fluid {
    // Container widths
    //
    // Set the container width, and override it for fixed navbars in media queries.
    @extend %container-base;

    + .container,
    + .container-fluid {
      @include margin($gutter null null null);
    }
  }

  .container {
    @include container-breakpoints($gutter, $breakpoints);
  }
}

