@import 'breakpoints';
@import 'flex';

// Default variables
$grid-columns: 12 !default;
$grid-fluid: false !default;
$grid-gutter-widths: (
  down sm: 40px,
  up md: 30px,
) !default;

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

// Mixins
@mixin center() {
  margin-left: auto;
  margin-right: auto;
}

@mixin gutter($gutter: $grid-gutter-widths) {
  @if $gutter {
    @each $breakpoint-query, $gutter-width in $gutter {
      @include media-breakpoint-variant($breakpoint-query) {
        padding-left: ($gutter-width / 2);
        padding-right: ($gutter-width / 2);
      }
    }
  }
  @else {
    padding-left: 0;
    padding-right: 0;
  }
}

@mixin container($fluid: $grid-fluid, $gutter: $grid-gutter-widths, $max-widths: $container-max-widths) {
  @include flex($wrap: wrap);
  @include center();
  @include gutter($gutter);

  width: 100%;

  @if not $fluid {
    @each $breakpoint, $container-max-width in $max-widths {
      @include media-breakpoint-up($breakpoint) {
        max-width: $container-max-width;
      }
    }
  }
}

@mixin col($size: $grid-columns, $columns: $grid-columns, $gutter: $grid-gutter-widths, $offset: 0, $align: auto) {
  $ratios: ($size / $columns);
  $cycle: floor($columns / $size);

  @include inline-flex($wrap: wrap);
  @include gutter($gutter);

  align-self: $align;
  min-width: 0; // FF adjustment for responsive images
  width: percentage($ratios);

  @if $offset > 0 {
    margin-left: percentage($offset / $columns);
  }
  @else {
    margin-left: 0;
  }
}
