// Flexbox display
// flex or inline-flex
.flex-display(@display: flex) {
  display: ~"-webkit-@{display}";
  display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
  display: ~"-ms-@{display}"; // IE11
  display: @display;
}

// The 'flex' shorthand
// - applies to: flex items
// <positive-number>, initial, auto, or none
.flex(@columns: initial) {
  -webkit-flex: @columns;
  -ms-flex: @columns;
  flex: @columns;
}

// Flex Flow Direction
// - applies to: flex containers
// row | row-reverse | column | column-reverse
.flex-direction(@direction: row) {
  -webkit-flex-direction: @direction;
  -ms-flex-direction: @direction;
  flex-direction: @direction;
}

// Flex Line Wrapping
// - applies to: flex containers
// nowrap | wrap | wrap-reverse
.flex-wrap(@wrap: nowrap) {
  -webkit-flex-wrap: @wrap;
  -ms-flex-wrap: @wrap;
  flex-wrap: @wrap;
}

// Flex Direction and Wrap
// - applies to: flex containers
// <flex-direction> || <flex-wrap>
.flex-flow(@flow) {
  -webkit-flex-flow: @flow;
  -ms-flex-flow: @flow;
  flex-flow: @flow;
}

// Display Order
// - applies to: flex items
// <integer>
.flex-order(@order: 0) {
  -webkit-order: @order;
  -ms-flex-order: @order;
  order: @order;
}

// Flex grow factor
// - applies to: flex items
// <number>
.flex-grow(@grow: 0) {
  -webkit-flex-grow: @grow;
  -ms-flex-positive: @grow;
  -ms-flex-grow: @grow;
  flex-grow: @grow;
}

// Flex shrink
// - applies to: flex item shrink factor
// <number>
.flex-shrink(@shrink: 1) {
  -webkit-flex-shrink: @shrink;
  -ms-flex-negative: @shrink;
  -ms-flex-shrink: @shrink;
  flex-shrink: @shrink;
}

// Flex basis
// - the initial main size of the flex item
// - applies to: flex itemsnitial main size of the flex item
// <width>
.flex-basis(@width: auto) {
  -webkit-flex-basis: @width;
  -ms-flex-preferred-size: @width;
  -ms-flex-basis: @width;
  flex-basis: @width;
}

// Axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | space-between | space-around
.justify-content(@justify: flex-start) {
  -webkit-justify-content: @justify;
  -ms-flex-pack: @justify;
  -ms-justify-content: @justify;
  justify-content: @justify;
}

// Packing Flex Lines
// - applies to: multi-line flex containers
// flex-start | flex-end | center | space-between | space-around | stretch
.align-content(@align: stretch) {
  -webkit-align-content: @align;
  -ms-align-content: @align;
  align-content: @align;
}

// Cross-axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | baseline | stretch
.align-items(@align: stretch) {
  -webkit-align-items: @align;
  -ms-align-items: @align;
  -ms-flex-align: @align;
  align-items: @align;
}

// Cross-axis Alignment
// - applies to: flex items
// auto | flex-start | flex-end | center | baseline | stretch
.align-self(@align: auto) {
  -webkit-align-self: @align;
  -ms-align-self: @align;
  -ms-flex-item-align: @align;
  align-self: @align;
}


/*! Prefix flex for IE10  in LESS
* https://gist.github.com/codler/2148ba4ff096a19f08ea
* Copyright (c) 2014 Han Lin Yap http://yap.nu; MIT license */

.display(@value) when (@value = flex) {
  display: -ms-flexbox; // IE10
}

.display(@value) when (@value = inline-flex) {
  display: -ms-inline-flexbox; // IE10
}

.display(@value) {
  display: @value;
}

.ie-flex(@value) {
  -ms-flex: @value;
}

.ie-flex-justify-content(@justifyContent) {
  .ms-flex-justify-content(@justifyContent); // IE10
}

.ie-flex-align-content(@alignContent) {
  .ms-flex-align-content(@alignContent); // IE10
}

.ie-flex-align-items(@alignItems) {
  .ms-flex-align-items(@alignItems); // IE10
}

.ie-flex-align-self(@alignSelf) {
  .ms-flex-align-self(@alignSelf); // IE10
}

.ie-flex-direction(@direction) {
  -ms-flex-direction: @direction; // IE10
}

.ie-flex-order(@order) {
  -ms-flex-order: @order; // IE10
}

.ie-flex-wrap(@wrap) {
  .ms-flex-wrap(@wrap); // IE10
}

/* These are the conditional mixins for the different syntax for IE10 Flexbox */
.ms-flex-justify-content(@justifyContent) when (@justifyContent = space-between) {
  -ms-flex-pack: justify;
}

.ms-flex-justify-content(@justifyContent) when (@justifyContent = space-around) {
  -ms-flex-pack: distribute;
}

.ms-flex-justify-content(@justifyContent) when (@justifyContent = flex-start) {
  -ms-flex-pack: start;
}

.ms-flex-justify-content(@justifyContent) when (@justifyContent = flex-end) {
  -ms-flex-pack: end;
}

.ms-flex-justify-content(@justifyContent) when (@justifyContent = center) {
  -ms-flex-pack: center;
}

.ms-flex-align-content(@alignContent) when (@alignContent = space-between) {
  -ms-flex-line-pack: justify;
}

.ms-flex-align-content(@alignContent) when (@alignContent = space-around) {
  -ms-flex-line-pack: distribute;
}

.ms-flex-align-content(@alignContent) when (@alignContent = flex-start) {
  -ms-flex-line-pack: start;
}

.ms-flex-align-content(@alignContent) when (@alignContent = flex-end) {
  -ms-flex-line-pack: end;
}

.ms-flex-align-content(@alignContent) when (@alignContent = center), (@alignContent = stretch) {
  -ms-flex-line-pack: @alignContent;
}

.ms-flex-align-items(@alignItems) when (@alignItems = flex-start) {
  -ms-flex-align: start;
}

.ms-flex-align-items(@alignItems) when (@alignItems = flex-end) {
  -ms-flex-align: end;
}

.ms-flex-align-items(@alignItems) when (@alignItems = center), (@alignItems = baseline), (@alignItems = stretch) {
  -ms-flex-align: @alignItems;
}

.ms-flex-align-self(@alignSelf) when (@alignSelf = flex-start) {
  -ms-flex-item-align: start;
}

.ms-flex-align-self(@alignSelf) when (@alignSelf = flex-end) {
  -ms-flex-item-align: end;
}

.ms-flex-align-self(@alignSelf) when (@alignSelf = auto), (@alignSelf = center), (@alignSelf = baseline), (@alignSelf = stretch) {
  -ms-flex-item-align: @alignSelf;
}

.ms-flex-wrap(@wrap) when (@wrap = nowrap) {
  -ms-flex-wrap: none;
}

.ms-flex-wrap(@wrap) when (@wrap = wrap), (@wrap = wrap-reverse) {
  -ms-flex-wrap: @wrap;
}

//border radius mixin
.static-border-radius (@radius: 50%) {
  -webkit-border-radius: @radius;
  border-radius:         @radius;
}

//box sizing mixin
.box-sizing (@string) {
  -webkit-box-sizing: @string;
  box-sizing:         @string;
}