/* @author Bilal Cinarli */

/** -------------------------------------------
    Flex Mixins
    ------------------------------------------- **/
/**
 * CSS Flex
 *
 * Outputs Flex code with defined prefixes
 * http://caniuse.com/#search=flex
 * https://developer.mozilla.org/en-US/docs/Web/CSS/flex
 * Formal syntax: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
 * current spec, webkit browsers need prefixing
 */
@mixin flex($value...) {
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;

    @include prefixer(flex, $value, webkit ms);
}

/**
 * CSS Flex Basis
 *
 * Outputs Flex-Basis code with defined prefixes
 * http://caniuse.com/#search=flex
 * https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
 * Formal syntax: content | <'width'>
 * Initial Value: auto
 * current spec, webkit browsers need prefixing, however Safari is not supporting this feature
 *
 * Notes
 * When a non-auto flex-basis is specified, Internet Explorer 10-11 (but not 12+) always 
 * uses a content-box box model to calculate the size of a flex item, even if 
 * box-sizing: border-box is applied to the element.
 *
 */
@mixin flex-basis($content) {
    @include prefixer(flex-basis, $content, webkit);
}

/**
 * CSS Flex Direction
 *
 * Outputs Flex-Direction code with defined prefixes
 * http://caniuse.com/#search=flex
 * https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
 * Formal syntax: content | [row | row-reverse | column | column-reverse]
 * current spec, webkit browsers need prefixing, however Safari is not supporting this feature
 */
@mixin flex-direction($content) {
    @include prefixer(flex-direction, $content, webkit ms);
}

/**
 * CSS Flex Grow
 *
 * Outputs Flex-Grow code with defined prefixes
 * http://caniuse.com/#search=flex
 * https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
 * Formal syntax: <number>
 * Initial Value: 0
 * Negative values are invalid.
 * current spec, webkit browsers need prefixing, Internet explorer and Safari is 
 * not supporting this feature
 */
@mixin flex-grow($number) {
    @include prefixer(flex-grow, $number, webkit);
}

/**
 * CSS Flex Shrink
 *
 * Outputs Flex-Shrink code with defined prefixes
 * http://caniuse.com/#search=flex
 * https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink
 * Formal syntax: <number>
 * Initial Value: 1
 * Negative values are invalid.
 * current spec, webkit browsers need prefixing, Internet explorer and Safari is 
 * not supporting this feature
 *
 * Notes:
 * Internet Explorer 10 uses 0 instead of 1 as the initial value for the flex-shrink property. 
 * A workaround is to always set an explicit value for flex-shrink.
 */
@mixin flex-shrink($number) {
    @include prefixer(flex-shrink, $number, webkit);
}

/**
 * CSS Flex Wrap
 *
 * Outputs Flex-Wrap code with defined prefixes
 * http://caniuse.com/#search=flex
 * https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
 * Formal syntax: content | [nowrap | wrap | wrap-reverse]
 * Initial Value: nowrap
 * current spec, webkit browsers need prefixing
 */
@mixin flex-wrap($content) {
    @include prefixer(flex-wrap, $content, webkit ms);
}

/**
 * CSS Flex Align Content
 *
 * Outputs align-content code with defined prefixes
 * http://caniuse.com/#search=flex
 * https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
 * Formal syntax: content | [flex-start | flex-end | center | space-between | space-around | stretch]
 * Initial Value: strecth
 * current spec, webkit browsers need prefixing
 *
 * Notes:
 * Internet Explorer and Safari are not supporting this feature yet even with vendor prefix
 */
@mixin align-content($value) {
    @include prefixer(align-content, $value, webkit);
}

/**
 * CSS Flex Align Items
 *
 * Outputs align-items code with defined prefixes
 * http://caniuse.com/#search=flex
 * https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
 * Formal syntax: content | [flex-start | flex-end | center | baseline | stretch]
 * Initial Value: strecth
 * current spec, webkit browsers need prefixing
 */
@mixin align-items($value) {
    $box: $value;
    $ms: $value;
    @if ($value == "flex-start") {
        $box: "start";
        $ms: "start";
    }

    @if ($value == "flex-end") {
        $box: "end";
        $ms: "end";
    }

    -ms-flex-align: #{$ms};
    -webkit-box-align: #{$box};
    @include prefixer(align-items, $value, webkit);
}

/**
 * CSS Flex Align Self
 *
 * Outputs align-self code with defined prefixes
 * http://caniuse.com/#search=flex
 * https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
 * Formal syntax: content | [auto | flex-start | flex-end | center | baseline | stretch]
 * Initial Value: auto
 * current spec, webkit browsers need prefixing
 *
 * Notes:
 * Safari is not supporting this feature yet even with vendor prefix
 */
@mixin align-self($content) {
    @include prefixer(align-self, $content, webkit);
}

/*
 * CSS Justify Content
 *
 */
@mixin justify-content($value) {
    $box: $value;
    $ms: $value;
    @if ($value == "flex-start") {
        $box: "start";
        $ms: "start";
    }

    @if ($value == "flex-end") {
        $box: "end";
        $ms: "end";
    }

    @if ($value == "space-between" or $value == "space-around") {
        $box: "justify";
        $ms: "justify";
    }
    -ms-flex-pack: #{$ms};
    -webkit-box-pack: #{$box};
    @include prefixer(justify-content, $value, webkit);
}

/**
 * Order
 *
 */
@mixin _order($value) {
    @include prefixer(order, $value, webkit ms);
}