/**
 * @class Ext.layout.Box
 */

.x-layout-box {
    @include st-box();

    &.x-horizontal {
        @include st-box-orient(horizontal, important);

        > .x-layout-box-item.x-flexed {
            min-width: 0;
        }
    }

    &.x-vertical {
        @include st-box-orient(vertical, important);

        > .x-layout-box-item.x-flexed {
            min-height: 0;
        }
    }

    &.x-align-start {
        @include st-box-align(start);
    }

    &.x-align-center {
        @include st-box-align(center);
    }

    &.x-align-end {
        @include st-box-align(end);
    }

    &.x-align-stretch {
        @include st-box-align(stretch);
    }

    &.x-pack-start {
        @include st-box-pack(start);
    }

    &.x-pack-center {
        @include st-box-pack(center);
    }

    &.x-pack-end {
        @include st-box-pack(end);
    }

    &.x-pack-justify {
        @include st-box-pack(justify);
    }
}

.x-layout-box-item {
    flex-shrink: 0;
}

.x-layout-box-item.x-sized {
    > .x-inner, > .x-body, > .x-dock-outer {
        @include absolute-fit();
    }
}


/*
    http://stackoverflow.com/questions/20959600/height-100-on-flexbox-column-child

    Chrome handles height calculations differently then Safari, this is needed to properly
    allow children of flexed/stretched items to expand to the proper heights.

    We also set all x-layout-box-item to display: flex/-webkit-box-flex.
    without this iOS hbox and vbox layouts will not properly stretch

    We generalized this selector so that chrome as Chrome with using flex-basis:auto
    will act like safari and require height:auto to fill heighted elements

    The x-scroller element cannot be auto-heighted because it must not expand past the
    bounds of the container
*/
.x-layout-box {
    .x-layout-box-item {
        @include st-box();
        &.x-heighted {
            > .x-body:not(.x-scroller), > .x-inner {
                min-height: 100%;
                height: auto;
            }
        }
    }

    // vbox/flexed and hbox-stretched items need some help as well - the height/width of
    // 100% on the body element is not effective, since the parent element has no explicit
    // height, instead it causes the height of the body/inner to shrink to 0.
    // Setting height to auto fixes this.
    .x-layout-vbox-item.x-flexed,
    .x-layout-hbox-item.x-stretched {
        > .x-body:not(.x-scroller), > .x-inner {
            height: auto;
        }
    }
}

.x-safari8m {
    // Old -webkit prefixed flexbox does not support flex-basis.  To prevent the content
    // size from affecting the flex outcome it needs a width or height of 0
    .x-layout-hbox-item.x-flexed {
        width: 0;
    }

    .x-layout-vbox-item.x-flexed {
        height: 0;
    }
}