@import "variables";
@import "mixins";

/**
 * vendor prefixed/polyfils
 */
@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flexwrap() {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

@mixin flexdirection_row() {
  -ms-flex-direction: row;
  flex-direction: row;
}


.flexi {

  @include flexbox();
  @include flexwrap();
  @include flexdirection_row();

  justify-content: flex-start;
  align-items: stretch;
  position: relative;

  &,
  & > * {
    box-sizing: border-box;
  }

  &.flex-left {
    flex-direction: row-reverse;
  }
  &.flex-up {
    flex-direction: column-reverse;
  }
  &.flex-down {
    flex-direction: column;
  }
  &.wrap-none {
    flex-wrap: nowrap;
  }
  &.wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  &.space-left {
    justify-content: flex-end;
  }
  &.space-outside {
    justify-content: center;
  }
  &.space-inside {
    justify-content: space-between;
  }
  &.space-even {
    justify-content: space-around;
  }
  &.valign-top {
    align-items: flex-start;
  }
  &.valign-bottom {
    align-items: flex-end;
  }
  &.valign-middle {
    align-items: center;
  }
  &.valign-baseline {
    align-items: baseline;
  }

  > * {
    display: $flexi-child-display-as;
    width: 100%;
    order: #{$flexi-flex-order-depth + 1};

    // setup our transition variables
    @each $flexi-order in (order) {
      transition: $flexi-order $flexi-flex-transition-speed $flexi-flex-transition-function;
    }

  }

}


// create the blok.width properties
@each $-flexi-size, $-flexi-range in $-flexi-ranges {

  // non cascading rules
  .#{$-flexi-size}-visible {
    display: none;
  }

  // cascading only
  @media (min-width: #{nth($-flexi-range, 1)}) {
    // width of column
    @for $-flexi-i from 1 through $flexi-flex-grid-size {
      .#{$-flexi-size}-#{$-flexi-i} {
        width: #{percentage(100 / $flexi-flex-grid-size * $-flexi-i / 100)};
      }
    }
  }

  // non-cascading
  @media (min-width: #{nth($-flexi-range, 1)}) and (max-width: #{nth($-flexi-range, 2)}) {
    // order of column
    @for $-flexi-i from 0 through $flexi-flex-order-depth {
      .#{$-flexi-size}-pos-#{$-flexi-i} {
        order: $-flexi-i;
      }
    }
    // hidden column
    .#{$-flexi-size}-hidden {
      display: none;
    }
    // visible columns
    .#{$-flexi-size}-visible {
      display: $flexi-child-display-as;
    }

    .#{$-flexi-size}-collapse {

    }

    .collapse-#{$-flexi-size} {
      > * {
        display: none;
      }
      > *:first-child {
        display: $flexi-child-display-as;
      }
      &.active > * {
        display: $flexi-child-display-as;
      }
    }

  }
}