// Flex layout mixins
// We do not even pretend to support IE10 flexbox. There were a few *.ie10.scss
// files which had IE10 flexbox but it is really unreliable. It was usually
// easier to let IE10 fall back to IE9 none-flexy rendering.

// Vendor prefixes still required for Safari. All other modern browsers seem OK.
// sass-lint:disable no-vendor-prefixes no-duplicate-properties

// Set a flex display mode with its associated gubbins.
// @param {display} $display [flex] the flex display to use, either flex or
//     inline-flex
// @param {flex-direction} $direction [row] The flex-direction.
// @param {flex-wrap} $wrap [nowrap] The flex wrap model to apply.
// @param {justify-content} $justify [flex-start] The item justification model
//     to apply.
// @param {align-items} $align-items [stretch] The item alignment model to
//      apply.
// @param {align-content} $align-content [stretch] The item content alignment
//     model to set.
@mixin flex($display: flex, $direction: row, $wrap: nowrap, $justify: flex-start, $align-items: stretch, $align-content: stretch) {
  display: block; // See issue #561
  display: -webkit-flex;
  display: $display;
  @if ($direction != row) {
    -webkit-flex-direction: $direction;
    flex-direction: $direction;
  }
  @if ($wrap != nowrap) {
    -webkit-flex-wrap: $wrap;
    flex-wrap: $wrap;
  }
  @if ($justify != flex-start) {
    -webkit-justify-content: $justify;
    justify-content: $justify;
  }
  @if ($align-items != stretch) {
    -webkit-align-items: $align-items;
    align-items: $align-items;
  }
  @if ($align-content != stretch) {
    -webkit-align-content: $align-content;
    align-content: $align-content;
  }
}

// Apply the align-items rule to an element. This assumes a flex display is
// already set.
// @param {align-items} $where [flex-start] The align-items model to set.
@mixin flex-align-items($where: flex-start) {
  -webkit-align-items: $where;
  align-items: $where;
}

// Apply the align-self rule to an element. This assumes a flex display is
// already set on the element's parent.
// @param {align-self} $align The align-items model to set.
@mixin flex-align-self($align) {
  -webkit-align-self: $align;
  align-self: $align;
}

// Apply the flex-grow rule to an element. This assumes a flex display is
// already set on the element's parent.
// @param {int} $int [0] The flex-grow value to set.
@mixin flex-grow($int: 0) {
  -webkit-flex-grow: $int;
  flex-grow: $int;
}

// Apply the justify-content rule to an element. This assumes a flex display is
// already set.
// @param {justify-content} $where [flex-start] The justify-content model to
// set.
@mixin flex-justify-content($where: flex-start) {
  -webkit-justify-content: $where;
  justify-content: $where;
}

// Apply the flex-shrink rule to an element. This assumes a flex display is
// already set on the element's parent.
// @param {int} $int [1] The flex-shrink value to set.
@mixin flex-shrink($int: 1) {
  -webkit-flex-shrink: $int;
  flex-shrink: $int;
}

// Apply the flex-direction rule to an element. This assumes a flex display is
// already set.
// @param {flex-direction} $direction The direction to set.
@mixin flex-direction($direction) {
  -webkit-flex-direction: $direction;
  flex-direction: $direction;
}

// Apply  _only_the flex display rule to an element.
@mixin flex-display {
  display: block; // See issue #561
  display: -webkit-flex;
  display: flex;
}

// Apply a flex-wrap rule. This assumes a flex display is already set.
// @param {flex-wrap} $wrap [nowrap] The wrap type to set.
@mixin flex-wrap($wrap: nowrap) {
  -webkit-flex-wrap: $wrap;
  flex-wrap: $wrap;
}
// sass-lint:enable no-vendor-prefixes no-duplicate-properties
