@import 'column';

$start: start;
$center: center;
$end: end;

.grid:after {
  content: "";
  display: table;
  clear: both;
}

@mixin horizontalAlign($type) {

  @if $type == 'center' {
    .grid-horizontal--#{$type} {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: $type;
      -ms-flex-pack: $type;
      justify-content: $type;
    }
  } @else {
    .grid-horizontal--#{$type} {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: flex-#{$type};
      -ms-flex-pack: flex-#{$type};
      justify-content: flex-#{$type};
    }
  }
}

@mixin verticalAlign($type) {
  @if $type == 'center' {
    .grid-vertical--#{$type} {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      height: 100%;
      -webkit-box-align: $type;
      -ms-flex-align: $type;
      align-items: $type;
    }
  } @else {
    .grid-vertical--#{$type} {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      height: 100%;
      -webkit-box-align: flex-#{$type};
      -ms-flex-align: flex-#{$type};
      align-items: flex-#{$type};
    }
  }
}

@include horizontalAlign($start);
@include horizontalAlign($center);
@include horizontalAlign($end);
@include verticalAlign($start);
@include verticalAlign($center);
@include verticalAlign($end);