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

// --------------------------------------------------
// reflex grid generation mixins
// --------------------------------------------------

.make-reflex-grid(@class: ~'') {
    .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);
    .resetWhitespace();
    position: relative;
    width: 100%;
    vertical-align: top;
    padding: @reflex-grid-spacing;
}

// defaults for auto cols
.setupAutoCols() {
    -ms-flex: 1 0 auto;
    -webkit-flex: 1 0 0%;
    flex: 1 0 0%;
    width: 0px;
}

.generateAutoColumns(@class: ~'', @n, @i: 1) when (@i =< @n) {
    .@{reflex-prefix}@{class}@{i}-auto {
        min-width: (@i * 100% / @n);
        .setupAutoCols();
    }
    .generateAutoColumns(@class, @n, (@i + 1));
}

// --------------------------------------------------
// 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, @breakpoint: ~'') when (@index >= 0) {
    .@{reflex-prefix}grid--order-@{index}@{breakpoint} {
        .order(@index);
    }
    // next iteration
    .loop-grid--order-helpers((@index - 1), @breakpoint);
}

// --------------------------------------------------
// 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;
    *display: inline;
    zoom: 1;
}

//
// flex
// ---

.flex(@grow: 0, @shrink: 1, @basis: auto) when (@basis = 0%) {
    -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;
}

// Recursive loop
.flex-loop-basis(@n, @i: 1) when (@i =< @n ) {
    @size: (@i * 10);

    .u-flex-basis--@{size} {
        flex-basis: ~"@{size}% !important";
    }

    .flex-loop-basis(@n, (@i + 1));
}

//
// 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;
}

.u-hidden-xxs {
    @media (max-width: @reflex-xxs-max) {
        display: none !important;
    }
}
.u-hidden-xs {
    @media (max-width: @reflex-xs) {
        display: none !important;
    }
}
.u-hidden-sm {
    @media (max-width: @reflex-sm) {
        display: none !important;
    }
}
.u-hidden-md {
    @media (max-width: @reflex-md) {
        display: none !important;
    }
}
.u-hidden-lg {
    @media (min-width: @reflex-lg) {
        display: none !important;
    }
}

