@import "variables";

// generic shift (non-prefixed)
@for $-flexi-i from 1 through $flexi-flex-grid-size {
  .shift-#{$-flexi-i}
  , .squish-#{$-flexi-i} {
    margin-left: #{percentage(100 / $flexi-flex-grid-size * $-flexi-i / 100)};
  }
  .push-#{$-flexi-i}
  , .squish-#{$-flexi-i} {
    margin-right: #{percentage(100 / $flexi-flex-grid-size * $-flexi-i / 100)};
  }
}

// responsive shifts, these will trump generics
@each $-flexi-size, $-flexi-range in $-flexi-ranges {
  @media (min-width: #{nth($-flexi-range, 1)}) and (max-width: #{nth($-flexi-range, 2)}) {
    @for $-flexi-i from 1 through $flexi-flex-grid-size {
      .#{$-flexi-size}-shift-#{$-flexi-i}
      , .#{$-flexi-size}-squish-#{$-flexi-i} {
        margin-left: #{percentage(100 / $flexi-flex-grid-size * $-flexi-i / 100)};
      }
      .#{$-flexi-size}-push-#{$-flexi-i}
      , .#{$-flexi-size}-squish-#{$-flexi-i} {
        margin-right: #{percentage(100 / $flexi-flex-grid-size * $-flexi-i / 100)};
      }
    }

    // our bp resets
    .#{$-flexi-size}-shift-0
    , .#{$-flexi-size}-squish-0 {
      margin-left: 0;
    }

    .#{$-flexi-size}-push-0
    , .#{$-flexi-size}-squish-0 {
      margin-right: 0;
    }
  }
}