// # Flexbox
// Flexbox support is full on Chrome, Firefox and Safari (with prefix) and nearly full for IE 10.
//
// - With IE10 at least one of the flex children needs to have a width or flex value otherwise the content in those children will not wrap. However, if none of children will collide, no width or flex value is needed.
//
// `flex-grow` is not supported by IE10, `justify-content` is the next best thing.
//
// Use in Sass with:
//
//[c]
//     .foo {
//          @include display(flex);
//          @include flex(1);
//     }
//[/c]
//
// or the corresponding classes directly in the HTML.
//
//[c]
//     <div class="flex flex--1">item</div>
//[/c]


@mixin display($value) {
  display: -webkit-#{$value};
  display: -ms-#{$value}box;
  display: $value;
}

@mixin flex($num) {
  -webkit-flex: $num;
  -ms-flex: $num;
  flex: $num;
  @if ($num != '0') { // http://stackoverflow.com/questions/29398259/css-flexbox-issue-in-firefox-v36-and-greater
    min-height: 0;
    min-width: 0;
  }
}

@mixin flex-wrap($value) {
  -webkit-flex-wrap: $value;
  -ms-flex-wrap: $value;
  flex-wrap: $value;
}

@mixin flex-grow($value) {
  -webkit-flex-grow: $value;
  -ms-flex-grow: $value; // Doesn't work in IE 10.
  flex-grow: $value;
}

@mixin flex-direction($value) {
  -webkit-flex-direction: $value;
  -ms-flex-direction: $value;
  flex-direction: $value;
}

@mixin justify-content($value) {
  -webkit-justify-content: $value;
  @if ($value == 'space-between') {
    -ms-flex-pack: justify;
  } @elseif ($value == 'flex-start') {
    -ms-flex-pack: start;
  } @elseif ($value == 'flex-end') {
    -ms-flex-pack: end;
  } @else {
    -ms-flex-pack: $value;
  }
  justify-content: $value;
}

@mixin align-items($value) {
  -webkit-align-items: $value;
  @if ($value == 'flex-start') {
    -ms-flex-align: start;
  } @elseif ($value == 'flex-end') {
    -ms-flex-align: end;
  } @else {
    -ms-flex-align: $value;
  }
  align-items: $value;
}

@mixin align-self($value) {
  -webkit-align-self: $value;
  @if ($value == 'flex-start') {
    -ms-flex-item-align: start;
  } @elseif ($value == 'flex-end') {
    -ms-flex-item-align: end;
  } @else {
    -ms-flex-item-align: $value;
  }
  align-self: $value;
}

// ## Flex classes

.flex {
  @include display(flex);
}

.flex--row {
  @include flex-direction(row);
}

.flex--column {
  @include flex-direction(column);
}

.flex--1 {
  @include flex(1);
}

.flex--none {
  @include flex(none);
}

// Flex align

.flex-align--start {
  @include align-items(flex-start);
}

.flex-align--center {
  @include align-items(center);
}

.flex-align--end {
  @include align-items(flex-end);
}

// Flex justified
// Note: `justfied-around: space-around;` does not work in IE 10

.flex-justified--start {
  @include justify-content(flex-start);
}

.flex-justified--center {
  @include justify-content(center);
}

.flex-justified--end {
  @include justify-content(flex-end);
}

.flex-justified--between {
  @include justify-content(space-between);
}

// Flex wrap

.flex-wrap {
  @include flex-wrap(wrap);
}

.flex-wrap--reverse {
  @include flex-wrap(wrap-reverse);
}

// Flex align-self
// Note: applies to immediate children of `display:flex;` parent.

.flex-self--start {
  @include align-self(flex-start);
}

.flex-self--center {
  @include align-self(center);
}

.flex-self--end {
  @include align-self(flex-end);
}