@import '../../sass/flexbox-grid-mixins';

$default-base-color: #0466e0;

$default-grid-columns: 12;
$default-grid-gutter: 2%;

$default-breakpoints: (
  lg: 1200px,
  md: 980px,
  sm: 768px,
  xs: 480px
);


$flexbox-grid-mixins-grid-type: skeleton;

.grid {
  @include grid($gutter: $default-grid-gutter);

  @for $i from 1 through $default-grid-columns {
    > .grid__col-#{$i} {
      @include grid-col($col: $i, $gutter: $default-grid-gutter);
    }
  }
}

@each $key in sm, xs {
  @media screen and (max-width: #{map-get($default-breakpoints, $key)}) {
    .grid--responsive {
      @include grid($flex-flow: column nowrap, $gutter: $default-grid-gutter);

      > [class*="grid__col"] {
        @include grid-col($col: initial, $gutter: $default-grid-gutter);
      }
    }
  }
}

$flexbox-grid-mixins-grid-type: margin-offset;

.grid--margin-offset {
  @include grid($gutter: $default-grid-gutter);

  @for $i from 1 through $default-grid-columns {
    > .grid__col-#{$i} {
      @include grid-col($col: $i, $gutter: $default-grid-gutter);
    }
  }
}

@each $key in sm, xs {
  @media screen and (max-width: #{map-get($default-breakpoints, $key)}) {
    .grid--margin-offset--responsive {
      @include grid($flex-flow: column nowrap, $gutter: $default-grid-gutter);

      > [class*="grid__col"] {
        @include grid-col($col: initial, $gutter: $default-grid-gutter);
        margin-right: 0;
      }
    }
  }
}