// --------------------------------------------------
// reflex mixins
// --------------------------------------------------

// --------------------------------------------------
// reflex grid generation mixins
// --------------------------------------------------
//@width: 100% -


//.make-reflex-grid(@class: ~'') {
//	//&:extend(.col);
//    .loop-reflex-columns(@reflex-columns, @class, width);
//}
//
//.calc-reflex-columns(@index, @class, @type) when (@type = width) and (@index > 0) {
//    .@{reflex-prefix}@{class}@{index} {
//        width: percentage((@index / @reflex-columns));
//        *width: percentage((@index / @reflex-columns)) - 0.1;
//
//        //for ie6 support you can uncomment this line but it will increase css filesize dramatically
//        //.setupCols();
//    }
//}
//
//.loop-reflex-columns(@index, @class, @type) when (@index >= 0) {
//    .calc-reflex-columns(@index, @class, @type);
//    // next iteration
//    .loop-reflex-columns((@index - 1), @class, @type);
//}

// defaults for all cols
.setupCols() {
    .display-flex();
    .flex-direction(column);
    .resetTextAlign();
   .resetWhitespace();
    position: relative;
    width: 100%;
    vertical-align: top;
    padding: @reflex-grid-spacing;

	//&:first-child{
	//	padding-left: 0;
	//	margin-left: 0;
	//}
	//
	//&:last-child{
	//	padding-right: 0;
	//	margin-right: 0;
	//}
}

// defaults for auto cols
.setupAutoCols() {
    .flex(1, 0, 0px); // a unit on last value is required by IE10-11
    width: auto !important;
    max-width: 100%;
}

// --------------------------------------------------
// inline-block specific mixins
// --------------------------------------------------

.setupWhitespace() {
    //letter-spacing: -0.31em !important;
    //*letter-spacing: normal !important;
    //word-spacing: -0.43em !important;
}

.resetWhitespace() {
    letter-spacing: normal;
    word-spacing: normal;
    white-space: normal;
}

.resetTextAlign() {
    //
    // We want to reset any text-align properties set by the grid
    // (required for the inline-block fallback)
    // but we don't want to override any text-align properties
    // set on the individual grid__col-x element
    // or on any of it's child elements
    //
    // The "initial" property is not widely supported so a default of "left" and "start" is provided
    // http://caniuse.com/#search=initial
    //
    // 1) set to left by default (works everywhere)
    // 2) set to start (respects right to left text)
    // 3) set to initial
    //
    text-align: left;
    text-align: start;
    text-align: initial;
    -moz-text-align-last: left;
    -moz-text-align-last: start;
    -moz-text-align-last: initial;
    text-align-last: left;
    text-align-last: start;
    text-align-last: initial;
}

// --------------------------------------------------
// order class generation mixins
// --------------------------------------------------

.order(@order: 0) {
    -ms-flex-order: @order;
    -webkit-order: @order;
    order: @order;
}

.make-grid--order-helpers() {
    .loop-grid--order-helpers(@reflex-columns);
}

.loop-grid--order-helpers(@index) when (@index >= 0) {
    .@{reflex-prefix}grid--order-@{index} {
        .order(@index);
    }
    // next iteration
    .loop-grid--order-helpers((@index - 1));
}

// --------------------------------------------------
// reflex modifier mixins
// --------------------------------------------------

//
// display
// ---

.display-flex-only() {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.display-flex() {
    display: inline-block;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    zoom: 1;
}

//
// flex
// ---

.flex(@grow: 0, @shrink: 1, @basis: auto) when (@basis = 0px) {
    -ms-flex: @grow @shrink auto; //ie10 needs auto
    -webkit-flex: @grow @shrink @basis;
    flex: @grow @shrink @basis;
}

.flex(@grow: 0, @shrink: 1, @basis: auto) {
    -ms-flex: @grow @shrink @basis;
    -webkit-flex: @grow @shrink @basis;
    flex: @grow @shrink @basis;
}

.flex-grow(@grow:1) {
    -ms-flex-positive: @grow;
    -webkit-flex-grow: @grow;
    flex-grow: @grow;
}

.flex-shrink(@shrink:1) {
    -ms-flex-negative: @shrink;
    -webkit-flex-shrink: @shrink;
    flex-shrink: @shrink;
}

.flex-basis(@basis:auto) {
    -ms-flex-preferred-size: @basis;
    -webkit-flex-basis: @basis;
    flex-basis: @basis;
}

.flex-flow(@direction: row, @wrap: nowrap) {
    -ms-flex-wrap: @wrap;
    -ms-flex-direction: @direction;
    -webkit-flex-flow: @direction @wrap;
    flex-flow: @direction @wrap;
}

.flex-wrap(@wrap: wrap) {
    -ms-flex-wrap: @wrap;
    -webkit-flex-wrap: @wrap;
    flex-wrap: @wrap;
}

.flex-direction(@direction: row) {
    -ms-flex-direction: @direction;
    -webkit-flex-direction: @direction;
    flex-direction: @direction;
}

//
// align
// ---

.align-items(@align: stretch) {
    .ms-align-items(@align);
    -webkit-align-items: @align;
    align-items: @align;
}

.align-self(@align: stretch) {
    .ms-align-self(@align);
    -webkit-align-self: @align;
    align-self: @align;
}

.align-content(@align: stretch) {
    .ms-align-content(@align);
    -webkit-align-content: @align;
    align-content: @align;
}

//
// ie10 syntax for align
// ---

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

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

.ms-align-items(@align) {
    -ms-flex-align: @align;
}

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

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

.ms-align-self(@align) {
    -ms-flex-item-align: @align;
}

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

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

.ms-align-content(@align) {
    -ms-flex-line-pack: @align;
}

//
// justify-content
//
// Uses "text-align" for the fallback inline-block grid
// "text-align" is globally supported and works on all rows except the last
// "text-align-last", where supported, handles the last line (and, happily, grids with only one row)
// ---

.justify-content-start() {
    text-align: left;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

.justify-content-end() {
    text-align: right;
    -moz-text-align-last: right;
    text-align-last: right;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.justify-content-center() {
    text-align: center;
    -moz-text-align-last: center;
    text-align-last: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.justify-content-space-between() {
    text-align: justify;
    -moz-text-align-last: justify;
    text-align-last: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.justify-content-space-around() {
    text-align: justify;
    -moz-text-align-last: justify;
    text-align-last: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}

// --------------------------------------------------
// other mixins
// --------------------------------------------------

.box-sizing(@boxmodel) {
    -webkit-box-sizing: @boxmodel;
    -moz-box-sizing: @boxmodel;
    box-sizing: @boxmodel;
}
