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

.#{$prefix}layout-box {
    display: flex;

    &.#{$prefix}horizontal {
        flex-direction: row;

        &.#{$prefix}reverse {
            flex-direction: row-reverse;
        }

        &.#{$prefix}constrain-align > .#{$prefix}layout-box-item:not(.#{$prefix}heighted) {
            max-height: 100%;
        }
    }

    &.#{$prefix}vertical {
        flex-direction: column;

        &.#{$prefix}reverse {
            flex-direction: column-reverse;
        }

        &.#{$prefix}constrain-align > .#{$prefix}layout-box-item:not(.#{$prefix}widthed) {
            max-width: 100%;
        }
    }

    &.#{$prefix}align-start {
        align-items: flex-start;
    }

    &.#{$prefix}align-center {
        align-items: center;
    }

    &.#{$prefix}align-end {
        align-items: flex-end;
    }

    &.#{$prefix}align-stretch {
        align-items: stretch;
    }

    &.#{$prefix}pack-start {
        justify-content: flex-start;
    }

    &.#{$prefix}pack-center {
        justify-content: center;
    }

    &.#{$prefix}pack-end {
        justify-content: flex-end;
    }

    &.#{$prefix}pack-justify,
    &.#{$prefix}pack-space-between {
        justify-content: space-between;
    }

    &.#{$prefix}pack-space-around {
        justify-content: space-around;
    }

    &.#{$prefix}wrap {
        flex-wrap: wrap;
    }

    &.#{$prefix}wrap-reverse {
        flex-wrap: wrap-reverse;
    }
}

.#{$prefix}layout-box-item {
    flex-shrink: 0;
}

.#{$prefix}ie11 .#{$prefix}layout-box {
    &.#{$prefix}pack-center,
    &.#{$prefix}pack-end {
        justify-content: flex-start;
    }

    &.#{$prefix}pack-center:before,
    &.#{$prefix}pack-center:after,
    &.#{$prefix}pack-end:before {
        content: '';
        display: block;
        // Workaround for https://sencha.jira.com/browse/EXTJS-25260
        //
        // IE11 does not layout properly with justify-content: center/end when the items
        // are flexed with a max-size on the main axis.  We use the before/after pseudo
        // elements to push the content to the center or end via flexing.
        //
        // 0.00005 is the tiniest flex-grow value that IE11 will respect.
        // These pseudo elements must have some flex-grow property so that they will grow
        // to consume the leftover space, if any, after the flexes have been distributed
        // between the items.
        // In most cases this flex-grow value is so small that it will result in a size of
        // 0 on the pseudo elements when there is no leftover space after flexing the items.
        // The exceptions are extremely large containers (typically > 5000px at least when
        // there is only one flex:1 item), or items with very small fractional flex values.
        flex: 0.00005 1 0px;
    }
}