/**
 * @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();
    }
}
 
// Platform specific code 
/*
    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.
*/
.x-safari {
    .x-layout-box {
        .x-layout-box-item.x-heighted {
            display: flex;
            > .x-body, > .x-inner {
                height: auto;
            }
        }
    }
}
 
.x-firefox {
    .x-stretched {
        &.x-dock-horizontal {
            > .x-dock-body {
                width: 0;
            }
        }
 
        &.x-dock-vertical {
            > .x-dock-body {
                height: 0;
            }
        }
    }
 
    .x-container {
        .x-dock-horizontal.x-unsized {
            .x-dock-body {
                min-height: 0;
                min-width: 0;
            }
        }
    }
 
    .x-has-height > .x-dock.x-unsized.x-dock-vertical {
        > .x-dock-body {
            height: 0;
        }
    }
}