@import "../mixins/grid";

$grid-breakpoints: xs sm md lg xl;
$grid-container-sizes: (xs: 100%, sm: 570px, md: 750px, lg: 990px, xl: 1170px);

$grid-gutter: 15px !default;
$grid-columns-count: 12;

$grid-container: #{'.c-grid-container'};
$grid-row: #{'.c-grid-row'};
$grid-column: #{'.c-grid-col'};

// === STYLES
#{$grid-container} {
  width: 100%;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: $grid-gutter;
  padding-left: $grid-gutter;

  &.is-fluid {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: $grid-gutter;
    padding-left: $grid-gutter;
  }
}

// Row
#{$grid-row} {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-right: -$grid-gutter;
  margin-left: -$grid-gutter;

  &.is-items {
    &-start {
      align-items: start;
    }

    &-end {
      align-items: flex-end;
    }

    &-center {
      align-items: center;
    }

    &-stretch {
      align-items: stretch;
    }

    &-baseline {
      align-items: baseline;
    }
  }

  &.is-justify {
    &-start {
      justify-content: flex-start;
    }

    &-end {
      justify-content: flex-end;
    }

    &-center {
      justify-content: center;
    }

    &-between {
      justify-content: space-between;
    }

    &-around {
      justify-content: space-around;
    }
  }
}

// Columns
#{$grid-column} {
  flex: 1 1 0;
  width: 100%;
  padding-right: $grid-gutter;
  padding-left: $grid-gutter;

  &.is-auto {
    @include make-auto-column;
  }
}

// Media
@each $breakpoint, $container-size in $grid-container-sizes {

  @include media($breakpoint) {

    #{$grid-container} {
      width: $container-size;
    }

    #{$grid-column}.is-#{$breakpoint} {
      @include make-columns($grid-columns-count);

      &-auto {
        @include make-auto-column;
      }

    }

  }

}