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

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

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

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