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

$default-base-color: #0466e0;
$default-grid-columns: 12;
$default-grid-gutter: 2%;

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

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

    &--null {
      @include grid-col($col: null, $gutter: $default-grid-gutter);
    }

    &--auto {
      @include grid-col($col: auto, $gutter: $default-grid-gutter);
    }

    &--equal {
      @include grid-col($col: equal, $gutter: $default-grid-gutter);
    }

    &--fixed {
      @include grid-col($col: fixed, $gutter: $default-grid-gutter);
    }

    &--none {
      @include grid-col($col: none, $gutter: $default-grid-gutter);
    }

    &--initial {
      @include grid-col($col: initial, $gutter: $default-grid-gutter);
    }

    &--positive {
      @include grid-col($col: positive, $gutter: $default-grid-gutter);
    }
    &--positive-2 {
      @include grid-col($col: positive, $flex-grow: 2, $gutter: $default-grid-gutter);
    }
    &--positive-3 {
      @include grid-col($col: positive, $flex-grow: 3, $gutter: $default-grid-gutter);
    }
    &--positive-4 {
      @include grid-col($col: positive, $flex-grow: 4, $gutter: $default-grid-gutter);
    }
  }

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

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

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

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

.grid--multi-line {
  @include grid($flex-flow: row wrap, $gutter: $default-grid-gutter);

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

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


ul.grid {
  margin: 0;
  padding: 0;
  @include grid($flex-flow: row wrap, $gutter: $default-grid-gutter);

  li {
    list-style: none;
    padding: 2em;
  }
}

.grid--no-gutter {
  @include grid();

  .grid__col {
    @include grid-col();
  }

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

.grid--row {
  @include grid($flex-direction: row, $gutter: $default-grid-gutter);

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

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

  @for $i from 1 through 3 {
    > .grid__col-#{$i} {
      @include grid-col($col: $i, $gutter: $default-grid-gutter, $width: true);
    }
  }
}
.grid--column-reverse {
  @include grid($flex-direction: column-reverse, $gutter: $default-grid-gutter);

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

.grid--wrap-null {
  @include grid($flex-wrap: null, $gutter: $default-grid-gutter);

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

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

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

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

.grid--left-row {
  @include grid($gutter: $default-grid-gutter, $justify-content: flex-start);

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

  @for $i from 1 through 3 {
    > .grid__col-#{$i} {
      @include grid-col($col: $i, $gutter: $default-grid-gutter);
    }
  }
}
.grid--right-row {
  @include grid($gutter: $default-grid-gutter, $justify-content: flex-end);

  @for $i from 1 through 3 {
    > .grid__col-#{$i} {
      @include grid-col($col: $i, $gutter: $default-grid-gutter);
    }
  }
}
.grid--space-between-row {
  @include grid($gutter: $default-grid-gutter, $justify-content: space-between);

  @for $i from 1 through 3 {
    > .grid__col-#{$i} {
      @include grid-col($col: $i, $gutter: $default-grid-gutter);
    }
  }
}
.grid--space-around-row {
  @include grid($gutter: $default-grid-gutter, $justify-content: space-around);

  @for $i from 1 through 3 {
    > .grid__col-#{$i} {
      @include grid-col($col: $i, $gutter: $default-grid-gutter);
    }
  }
}
.grid--space-evenly-row {
  @include grid($gutter: $default-grid-gutter, $justify-content: space-evenly);

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

.grid--top-row {
  @include grid($gutter: $default-grid-gutter, $align-items: flex-start);

  @for $i from 1 through 3 {
    > .grid__col-#{$i} {
      @include grid-col($col: $i, $gutter: $default-grid-gutter);
    }
  }
}
.grid--middle-row {
  @include grid($gutter: $default-grid-gutter, $align-items: center);

  @for $i from 1 through 3 {
    > .grid__col-#{$i} {
      @include grid-col($col: $i, $gutter: $default-grid-gutter);
    }
  }
}
.grid--bottom-row {
  @include grid($gutter: $default-grid-gutter, $align-items: flex-end);

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

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

  @for $i from 1 through 3 {
    > .grid__col-#{$i} {
      @include grid-col($col: $i, $gutter: $default-grid-gutter);
    }
  }
  > .grid__col-2 {
    padding: 30px 0;
  }
}
.grid--centered-row {
  @include grid($gutter: $default-grid-gutter, $justify-content: center, $align-items: center);
  height: 18em;

  > .grid__col-centered {
    @include grid-col($col: 3, $gutter: $default-grid-gutter);
  }
}

$flexbox-grid-mixins-stack: unset;

.grid--items-row-alignment {
  @include grid($gutter: $default-grid-gutter);
  > .grid__col {
    @include grid-col($col: equal, $gutter: $default-grid-gutter, $align-self: null);
  }
  > .grid__col-auto {
    @include grid-col($col: equal, $gutter: $default-grid-gutter, $align-self: auto);
  }
  > .grid__col-top {
    @include grid-col($col: equal, $gutter: $default-grid-gutter, $align-self: flex-start);
  }
  > .grid__col-middle {
    @include grid-col($col: equal, $gutter: $default-grid-gutter, $align-self: center);
  }
  > .grid__col-bottom {
    @include grid-col($col: equal, $gutter: $default-grid-gutter, $align-self: flex-end);
  }
  > .grid__col-stretch {
    @include grid-col($col: equal, $gutter: $default-grid-gutter, $align-self: stretch);
  }
  > .grid__col-baseline {
    @include grid-col($col: equal, $gutter: $default-grid-gutter, $align-self: baseline);
  }
}

$flexbox-grid-mixins-stack: margin-bottom;

.grid--left-column {
  @include grid($flex-direction: column, $gutter: $default-grid-gutter, $align-items: flex-start);

  @for $i from 1 through 3 {
    > .grid__col-#{$i} {
      @include grid-col($col: $i, $gutter: $default-grid-gutter, $width: true);
    }
  }
}
.grid--center-column {
  @include grid($flex-direction: column, $gutter: $default-grid-gutter, $align-items: center);

  @for $i from 1 through 3 {
    > .grid__col-#{$i} {
      @include grid-col($col: $i, $gutter: $default-grid-gutter, $width: true);
    }
  }
}
.grid--right-column {
  @include grid($flex-direction: column, $gutter: $default-grid-gutter, $align-items: flex-end);

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

.grid--centered-column {
  @include grid($flex-direction: column, $gutter: $default-grid-gutter, $justify-content: center, $align-items: center);
  height: 18em;

  > .grid__col-centered {
    @include grid-col($col: 3, $gutter: $default-grid-gutter, $width: true);
  }
}

$flexbox-grid-mixins-stack: unset;

.grid--items-column-alignment {
  @include grid($flex-direction: column, $gutter: $default-grid-gutter);
  > .grid__col {
    @include grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: null, $width: true);
  }
  > .grid__col-auto {
    @include grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: auto, $width: true);
  }
  > .grid__col-top {
    @include grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: flex-start, $width: true);
  }
  > .grid__col-middle {
    @include grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: center, $width: true);
  }
  > .grid__col-bottom {
    @include grid-col($col: 2, $gutter: $default-grid-gutter, $align-self: flex-end, $width: true);
  }
}

$flexbox-grid-mixins-stack: margin-bottom;

.grid--order-row {
  @include grid($gutter: $default-grid-gutter);
  > .grid__col-1 {
    @include grid-col($col: 2, $gutter: $default-grid-gutter, $order: 1);
  }
  > .grid__col-2 {
    @include grid-col($col: 2, $gutter: $default-grid-gutter, $order: 1);
  }
  > .grid__col-3 {
    @include grid-col($col: 2, $gutter: $default-grid-gutter);
  }
  > .grid__col-4 {
    @include grid-col($col: 2, $gutter: $default-grid-gutter, $order: -1);
  }
  > .grid__col-5 {
    @include grid-col($col: 2, $gutter: $default-grid-gutter, $order: -1);
  }
}

.grid--order-column {
  @include grid($flex-direction: column, $gutter: $default-grid-gutter);
  > .grid__col-1 {
    @include grid-col($col: 2, $gutter: $default-grid-gutter, $order: 1, $width: true);
  }
  > .grid__col-2 {
    @include grid-col($col: 2, $gutter: $default-grid-gutter, $order: 1, $width: true);
  }
  > .grid__col-3 {
    @include grid-col($col: 2, $gutter: $default-grid-gutter, $width: true);
  }
  > .grid__col-4 {
    @include grid-col($col: 2, $gutter: $default-grid-gutter, $order: -1, $width: true);
  }
  > .grid__col-5 {
    @include grid-col($col: 2, $gutter: $default-grid-gutter, $order: -1, $width: true);
  }
}

$flexbox-grid-mixins-stack: unset;

.grid--multi-line-top {
  @include grid($flex-flow: row wrap, $gutter: $default-grid-gutter, $align-content: flex-start) {
    height: 18em;
  }

  @for $i from 1 through 6 {
    > .grid__col-#{$i} {
      @include grid-col($col: $i, $gutter: $default-grid-gutter);
    }
  }
}
.grid--multi-line-middle {
  @include grid($flex-flow: row wrap, $gutter: $default-grid-gutter, $align-content: center) {
    height: 18em;
  }

  @for $i from 1 through 6 {
    > .grid__col-#{$i} {
      @include grid-col($col: $i, $gutter: $default-grid-gutter);
    }
  }
}
.grid--multi-line-bottom {
  @include grid($flex-flow: row wrap, $gutter: $default-grid-gutter, $align-content: flex-end) {
    height: 18em;
  }

  @for $i from 1 through 6 {
    > .grid__col-#{$i} {
      @include grid-col($col: $i, $gutter: $default-grid-gutter);
    }
  }
}
.grid--multi-line-space-between {
  @include grid($flex-flow: row wrap, $gutter: $default-grid-gutter, $align-content: space-between) {
    height: 18em;
  }

  @for $i from 1 through 6 {
    > .grid__col-#{$i} {
      @include grid-col($col: $i, $gutter: $default-grid-gutter);
    }
  }
}
.grid--multi-line-space-around {
  @include grid($flex-flow: row wrap, $gutter: $default-grid-gutter, $align-content: space-around) {
    height: 18em;
  }

  @for $i from 1 through 6 {
    > .grid__col-#{$i} {
      @include grid-col($col: $i, $gutter: $default-grid-gutter);
    }
  }
}
.grid--multi-line-stretch {
  @include grid($flex-flow: row wrap, $gutter: $default-grid-gutter, $align-content: stretch) {
    height: 18em;
  }

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

$flexbox-grid-mixins-stack: margin-bottom;

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

  > .grid__col-3 {
    @include grid-col($col: 3, $gutter: $default-grid-gutter);
  }
  > .grid__col-100 {
    @include grid-col($col: auto, $gutter: $default-grid-gutter, $max-width: 100px);
  }
  > .grid__col-200 {
    @include grid-col($col: auto, $gutter: $default-grid-gutter, $max-width: 200px, $min-width: 100px);
  }
}

.grid--condense {
  @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, $condense: true);
    }
  }
}