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

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

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

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;
}

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

.grid-unit-set-num {
  $default-grid-gutter: 40px;
  @include grid($gutter: $default-grid-gutter);

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

.grid-unit-set-px {
  $default-grid-gutter: 15px;
  @include grid($gutter: $default-grid-gutter);

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

.grid-unit-set-em {
  $default-grid-gutter: 2em;
  @include grid($gutter: $default-grid-gutter);

  .grid__col {
    @include grid-col($col: 30em, $gutter: $default-grid-gutter);
  }
}
.grid-unit-set-per {
  $default-grid-gutter: 5%;
  @include grid($gutter: $default-grid-gutter);

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



.grid-unit-set-px-per {
  $default-grid-gutter: 5%;
  @include grid($gutter: $default-grid-gutter);

  .grid__col {
    @include grid-col($col: 200px, $gutter: $default-grid-gutter);
  }
}
.grid-unit-set-px-em {
  $default-grid-gutter: 2em;
  @include grid($gutter: $default-grid-gutter);

  .grid__col {
    @include grid-col($col: 25%, $gutter: $default-grid-gutter);
  }
}
.grid-unit-set-em-per {
  $default-grid-gutter: 5%;
  @include grid($gutter: $default-grid-gutter);

  .grid__col {
    @include grid-col($col: 30em, $gutter: $default-grid-gutter);
  }
}
.grid-unit-set-em-px {
  $default-grid-gutter: 15px;
  @include grid($gutter: $default-grid-gutter);

  .grid__col {
    @include grid-col($col: 30em, $gutter: $default-grid-gutter);
  }
}
.grid-unit-set-per-px {
  $default-grid-gutter: 15px;
  @include grid($gutter: $default-grid-gutter);

  .grid__col {
    @include grid-col($col: 25%, $gutter: $default-grid-gutter);
  }
}
.grid-unit-set-per-em {
  $default-grid-gutter: 2em;
  @include grid($gutter: $default-grid-gutter);

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

$default-grid-gutter: 12px;

.grid-gutter-px {
  @include grid($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);
    }
  }
}

$default-grid-gutter: 2em;

.grid-gutter-em {
  @include grid($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);
    }
  }
}