/**
 * Shortcuts for Flexible Box Model
 * 
 * Usage:
 * 
 * SCSS
 * @include box-layout;
 * .mycontainer { @extend .hbox }
 * .mybox { @extend .flex2 }
 *
 * Or in HTML:;
 * <div class="vbox">
 *  <div class="flex">
 *    ...
 *
 * @autor David Kaneda
 *
 */

 @mixin flexible-box-layout {
    .box {
        @include display-box;
        @include box-align(stretch);

        > * {
            display: block;
            @extend .flex-0;
        }
    }

    .hbox {
        @extend .box;
        @include display-orient(horizontal);
    }
     
    .vbox {
        @extend .box;
        @include display-orient(vertical);
    }
     
    .reverse {
        @include box-direction(reverse);
    }
     
    .flex-0 {
        @include box-flex(0);
    }
     
    .flex, .spacer, .flex-1 {
        @include box-flex(1);
    }
     
    .flex-2 {
        @include box-flex(2);
    }
     
    .start {
        @include box-pack(start);
    }

    .end {
        @include box-pack(end);
    }
     
    .center {
        @include box-pack(center);
    }
}