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


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

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

body {
  font-family: "Hiragino Kaku Gothic ProN", Arial, sans-serif;
  margin: 0;
}

.header {
  background-color: $default-base-color;
  color: #fff;
  text-align: center;
  padding: 1em;
  min-height: 320px;
  @include grid($flex-flow: column nowrap, $justify-content: center);

  &--hero {
    height: 100vh;
  }

  .header-title {
    font-size: 320%;
    margin-bottom: 0;
  }
  .version {
    font-size: 25%;
    font-weight: normal;
  }
  .header-description {
    margin-top: 0;
  }

  .header-nav {
    margin: 0;
    padding: 0;
    margin-top: 3em;

    li {
      font-size: 90%;
      display: inline;
      list-style: none;
      margin-right: 1.2rem;
    }
  }

  a {
    color: #fff;
  }

  .btn {
    padding: .8em;
    border: solid rgba(255, 255, 255, .4) 1px;
    border-radius: .4em;
  }
}

.container {
  margin: 0 2rem;
}

h2 {
  border-bottom: solid 1px #ccc;
}

.grid,
.grid-3-columns,
.grid-24-columns,
[class*="grid--"] {
  background: #a5c3e2;
}
[class*="grid__col"] {
  background: #0e72da;
  border: 1px solid #130e7d;
  padding: .4em;
  color: #fff;
  text-align: center;
}

.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-flow: row nowrap, $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-flow: row-reverse nowrap, $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--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);
  }
}