@import './mixins';
@import './containers';
@import './helpers';

// Custom grid
$grid__bp-xs: 220;
$grid__bp-sm: 640;
$grid__bp-md: 768;
$grid__bp-lg: 992;
$grid__bp-xl: 1200;
$grid__bp-xxl: 1600;
$grid__cols: 12;

$map-grid-props: (
        '': 0,
        '-xs': $grid__bp-xs,
        '-sm': $grid__bp-sm,
        '-md': $grid__bp-md,
        '-lg': $grid__bp-lg,
        '-xl': $grid__bp-xl,
        '-xxl': $grid__bp-xxl
);

@mixin create-mq($breakpoint, $min-or-max) {
  @if($breakpoint == 0) {
    @content;
  } @else {
    @media screen and (#{$min-or-max}-width: $breakpoint *1px) {
      @content;
    }
  }
}

@mixin create-col-classes($modifier, $grid-cols, $breakpoint) {
  @include create-mq($breakpoint, 'min') {
    &__col#{$modifier}-offset-0 {
      margin-left: 0;
    }
    @for $i from 1 through $grid-cols {
      &__col#{$modifier}-#{$i} {
        padding: 0 12px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 (100 / ($grid-cols / $i) ) * 1%;
        flex: 0 0 (100 / ($grid-cols / $i) ) * 1%;
        max-width: (100 / ($grid-cols / $i) ) * 1%;
        margin-bottom: 10px;
      }
      &__col#{$modifier}-offset-#{$i} {
        margin-left: (100 / ($grid-cols / $i) ) * 1%;
      }
    }
  }
}

@each $modifier , $breakpoint in $map-grid-props {
  @if($modifier == '') {
    $modifier: '-xs';
  }
  @include create-mq($breakpoint - 1, 'max') {
    .hidden#{$modifier}-down {
      display: none !important;
    }
  }
  @include create-mq($breakpoint, 'min') {
    .hidden#{$modifier}-up {
      display: none !important;
    }
  }
}

.container {
  &--fluid {
    margin: 0;
    max-width: 100%;
  }
  &__row {
    @include flexbox();
    flex-wrap: wrap;
    margin-right: -12px;
    margin-left: -12px;
  }
  @each $modifier , $breakpoint in $map-grid-props {
    @include create-col-classes($modifier, $grid__cols, $breakpoint);
  }
}

.display-flex {
  display: flex;
}