// Flex box display.
@mixin flex-block($size: none) {
    box-sizing: border-box#{$important};

    // Old Syntax
    display: -webkit-box#{$important};
    display: -moz-box#{$important};

    // New Syntax
    display: -ms-flexbox#{$important};
    display: -webkit-flex#{$important};

    // Global Support
    display: flex#{$important};

    @if ($size != none) {
        @include size($size);
    }
}

// Flex display.
@mixin flex($prop: none) {
    @if ($prop != none) {
        @if ($prop == false) {
            // Old Syntax
            -webkit-box-flex: 0 0 0%#{$important};
            -moz-box-flex: 0 0 0%#{$important};

            // New Syntax
            -webkit-flex: 0 0 0%#{$important};
            -ms-flex: 0 0 0%;

            // Global Support
            flex: 0 0 0%#{$important};
        }
        @else {
            // Old Syntax
            -webkit-box-flex: $prop#{$important};
            -moz-box-flex: $prop#{$important};

            // New Syntax
            -webkit-flex: $prop#{$important};
            -ms-flex: $prop#{$important};

            // Global Support
            flex: $prop#{$important};
        }
    }
    @else {
        // Old Syntax
        -webkit-box-flex: 1#{$important};
        -moz-box-flex: 1#{$important};

        // New Syntax
        -webkit-flex: 1#{$important};
        -ms-flex: 1#{$important};

        // Global Support
        flex: 1#{$important};
    }
}

// Flex Direction
@mixin flex-direction($dir: none) {
    @if ($dir != none) {
        // Old Syntax
        -webkit-box-direction: $dir#{$important};
        -webkit-box-orient: $dir#{$important};
        -webkit-moz-direction: $dir#{$important};
        -webkit-moz-orient: $dir#{$important};

        // New Syntax
        -webkit-flex-direction: $dir#{$important};
        -ms-flex-direction: $dir#{$important};

        // Global Syntax
        flex-direction: $dir#{$important};
    }
}

// Flex Flow
@mixin flex-flow($prop: none) {
    @if ($prop != none) {
        -webkit-flex-flow: $prop#{$important};
        -ms-flex-flow: $prop#{$important};

        flex-flow: $prop#{$important};
    }
}

// Flex Basis
@mixin flex-basis($prop: none) {
    @if ($prop != none) {
        -ms-flex-preferred-size: $prop#{$important};
        -webkit-flex-basis: $prop#{$important};

        flex-basis: $prop#{$important};
    }
}

// Flex Shrink
@mixin flex-shrink($prop: none) {
    @if ($prop != none) {
        -webkit-flex-shrink: $prop#{$important};
        -ms-flex-negative: $prop#{$important};

        flex-shrink: $prop#{$important};
    }
}

// Flex Shrink
@mixin flex-grow($prop: none) {
    @if ($prop != none) {
        -webkit-box-flex: $prop#{$important};
        -moz-box-flex: $prop#{$important};

        -webkit-flex-grow: $prop#{$important};
        -ms-flex-positive: $prop#{$important};

        flex-grow: $prop#{$important};
    }
}

// Flex Order
@mixin flex-order($prop: none) {
    @if ($prop != none) {
        -webkit-box-ordinal-group: $prop#{$important};
        -moz-box-ordinal-group: $prop#{$important};

        -ms-flex-order: $prop#{$important};
        -webkit-order: $prop#{$important};

        order: #{$important};
    }
}

// Flex Justify Content (Horizontal)
@mixin flex-align-content($align: none) {
    @if ($align != none) {
        $x: $align;

        @if ($x != none) {
            @if ($x == space-around) {
                -webkit-box-pack: $x#{$important};
                -moz-box-pack: $x#{$important};

                -webkit-justify-content: $x#{$important};
                -ms-flex-pack: distribute#{$important};

                justify-content: $x#{$important};
            }
            @else if ($x == space-between) {
                -webkit-box-pack: $x#{$important};
                -moz-box-pack: $x#{$important};

                -webkit-justify-content: $x#{$important};
                -ms-flex-pack: justify#{$important};

                justify-content: $x#{$important};
            }
            @else if ($x == start or $x == end) {
                -webkit-box-pack: flex-#{$x}#{$important};
                -moz-box-pack: flex-#{$x}#{$important};

                -webkit-justify-content: flex-#{$x}#{$important};
                -ms-flex-pack: $x#{$important};

                justify-content: flex-#{$x}#{$important};
            }
            @else {
                -webkit-box-pack: $x#{$important};
                -moz-box-pack: $x#{$important};

                -webkit-justify-content: $x#{$important};
                -ms-flex-pack: $x#{$important};

                justify-content: $x#{$important};
            }
        }
    }
}

// Flex Align Items (Vertical)
@mixin flex-align-items($align: none) {
    @if ($align != none) {
        $y: $align;

        @if ($y != none) {
            @if ($y == start or $y == end) {
                -webkit-box-align: flex-#{$y}#{$important};
                -moz-box-align: flex-#{$y}#{$important};

                -webkit-align-items: flex-#{$y}#{$important};
                align-items: flex-#{$y}#{$important};
            }
            @else {
                -webkit-box-align: $y#{$important};
                -moz-box-align: $y#{$important};

                -webkit-align-items: $y#{$important};
                align-items: $y#{$important};
            }

            -ms-flex-align: $y#{$important};
        }
    }
}

// Flex Align Self
@mixin flex-align-self($align: none) {
    @if ($align != none) {
        $y: $align;

        @if ($y != none) {
            @if ($y == start or $y == end) {
                -webkit-align-self: flex-#{$y}#{$important};
                align-self: flex-#{$y}#{$important};
            }
            @else {
                -webkit-align-self: $y#{$important};
                align-self: $y#{$important};
            }

            -ms-flex-item-align: $y#{$important};
        }
    }
}

// Flex Wrap
@mixin flex-wrap {
    -webkit-flex-wrap: wrap#{$important};
    -ms-flex-wrap: wrap#{$important};
    flex-wrap: wrap#{$important};
}

// Flex Fill
@mixin flex-fill {
    width: 100%#{$important};
    min-height: 100%#{$important};
    margin: 0#{$important};

    @-moz-document url-prefix() {
        width: 100%#{$important};
        height: inherit#{$important};
        min-height: auto#{$important};
        margin: 0#{$important};
    }
}

// Clean Flex
@mixin no-flex {
    @include flex(false);
}

// Flex box shorthand.
@mixin flex-box($direction: none, $option: none) {
    $align: none;
    $size: none;

    @if ($option != none) {
        @if (length($option) >= 2) {
            $align: nth($option, 1) nth($option, 2);
        }
        @if (length($option) >= 3) {
            $size: nth($option, 3);
        }
        @if (length($option) == 4) {
            $size: nth($option, 3) nth($option, 4);
        }
    }

    @include flex-block($size);
    @include flex-direction($direction);

    @if ($align != none and length($align) == 2) {
        @include flex-align-content(nth($align, 1));
        @include flex-align-items(nth($align, 2));
    }
}

// Flex box as column.
@mixin flex-box-column($prop: none) {
    @if ($prop != none) {
        @include flex-box(column, $prop);
    }
}

// Flex box as column reversed.
@mixin flex-box-column-reverse($prop: none) {
    @if ($prop != none) {
        @include flex-box(column-reverse, $prop);
    }
}

// Flex box as row
@mixin flex-box-row($prop: none) {
    @if ($prop != none) {
        @include flex-box(row, $prop);
    }
}

// Flex box as row reserved.
@mixin flex-box-row-reverse($prop: none) {
    @if ($prop != none) {
        @include flex-box(row-reverse, $prop);
    }
}