/** @define utilities */

@import "superfly-css-variables-dimension";

/**
 * Flex Container Level Utilities
 */

@media (--md-viewport) {
    .u-md-flex {
        display: flex !important;
    }
    .u-md-inline-flex {
        display: inline-flex !important;
    }
    .u-md-flex-row {
        flex-direction: row !important;
    }
    .u-md-flex-row-reverse {
        flex-direction: row-reverse !important;
    }
    .u-md-flex-column {
        flex-direction: column !important;
    }
    .u-md-flex-column-reverse {
        flex-direction: column-reverse !important;
    }
    .u-md-flex-wrap {
        flex-wrap: wrap !important;
    }
    .u-md-flex-no-wrap {
        flex-wrap: nowrap !important;
    }
    .u-md-flex-wrap-reverse {
        flex-wrap: wrap-reverse !important;
    }
    .u-md-flex-justify-start {
        justify-content: flex-start !important;
    }
    .u-md-flex-justify-end {
        justify-content: flex-end !important;
    }
    .u-md-flex-justify-center {
        justify-content: center !important;
    }
    .u-md-flex-justify-between {
        justify-content: space-between !important;
    }
    .u-md-flex-justify-around {
        justify-content: space-around !important;
    }
    .u-md-flex-align-items-start {
        align-items: flex-start !important;
    }
    .u-md-flex-align-items-end {
        align-items: flex-end !important;
    }
    .u-md-flex-align-items-center {
        align-items: center !important;
    }
    .u-md-flex-align-items-stretch {
        align-items: stretch !important;
    }
    .u-md-flex-align-items-baseline {
        align-items: baseline !important;
    }
    .u-md-flex-align-content-start {
        align-content: flex-start !important;
    }
    .u-md-flex-align-content-end {
        align-content: flex-end !important;
    }
    .u-md-flex-align-content-center {
        align-content: center !important;
    }
    .u-md-flex-align-content-stretch {
        align-content: stretch !important;
    }
    .u-md-flexAlignContentBetween {
        align-content: space-between !important;
    }
    .u-md-flexAlignContentAround {
        align-content: space-around !important;
    }
    /* Applies to flex items
   ========================================================================== */
    /**
 * Override default alignment of single item when specified by `align-items`
 */
    .u-md-flex-align-self-start {
        align-self: flex-start !important;
    }
    .u-md-flex-align-self-end {
        align-self: flex-end !important;
    }
    .u-md-flex-align-self-center {
        align-self: center !important;
    }
    .u-md-flex-align-self-stretch {
        align-self: stretch !important;
    }
    .u-md-flex-align-self-baseline {
        align-self: baseline !important;
    }
    .u-md-flex-align-self-auto {
        align-self: auto !important;
    }
    .u-md-flex-order-first {
        order: -1 !important;
    }
    .u-md-flex-order-last {
        order: 1 !important;
    }
    .u-md-flex-order-none {
        order: 0 !important;
    }
    /**
 * Specify the flex grow factor, which determines how much the flex item will
 * grow relative to the rest of the flex items in the flex container.
 *
 * Supports 1-5 proportions
 *
 * 1. Provide all values to avoid IE10 bug with shorthand flex
 *    - http://git.io/vllC7
 *
 *    Use `0%` to avoid bug in IE10/11 with unitless flex basis. Using this
 *    instead of `auto` as this matches what the default would be with `flex`
 *    shorthand - http://git.io/vllWx
 */
    .u-md-flex-grow1 {
        flex: 1 1 0% !important;
        /* 1 */
    }
    .u-md-flex-grow2 {
        flex: 2 1 0% !important;
    }
    .u-md-flex-grow3 {
        flex: 3 1 0% !important;
    }
    .u-md-flex-grow4 {
        flex: 4 1 0% !important;
    }
    .u-md-flex-grow5 {
        flex: 5 1 0% !important;
    }
    /**
 * Specify the flex shrink factor, which determines how much the flex item will
 * shrink relative to the rest of the flex items in the flex container.
 */
    .u-md-flex-shrink0 {
        flex-shrink: 0 !important;
    }
    .u-md-flex-shrink1 {
        flex-shrink: 1 !important;
    }
    .u-md-flex-shrink2 {
        flex-shrink: 2 !important;
    }
    .u-md-flex-shrink3 {
        flex-shrink: 3 !important;
    }
    .u-md-flex-shrink4 {
        flex-shrink: 4 !important;
    }
    .u-md-flex-shrink5 {
        flex-shrink: 5 !important;
    }
    /**
 * Aligning with `auto` margins
 * http://www.w3.org/TR/css-flexbox-1/#auto-margins
 */
    .u-md-flex-expand {
        margin: auto !important;
    }
    .u-md-flex-expand-left {
        margin-left: auto !important;
    }
    .u-md-flex-expand-right {
        margin-right: auto !important;
    }
    .u-md-flex-expand-top {
        margin-top: auto !important;
    }
    .u-md-flex-expand-bottom {
        margin-bottom: auto !important;
    }
    /**
 * Basis
 */
    .u-md-flex-basis-auto {
        flex-basis: auto !important;
    }
    .u-md-flex-basis0 {
        flex-basis: 0 !important;
    }
    /*
 * Shorthand
 *
 * Declares all values instead of keywords like 'initial' to work around IE10
 * https://www.w3.org/TR/css-flexbox-1/#flex-common
 *
 * 1. Fixes issue in IE 10 where flex-basis is ignored - https://git.io/vllMt
 *    This ensures it overrides flex-basis set in other utilities.
 */
    /*
 * Sizes the item based on the width/height properties
 */
    .u-md-flex-initial {
        flex: 0 1 auto !important;
        flex-basis: auto !important;
        /* 1 */
    }
    /*
 * Sizes the item based on the width/height properties, but makes them fully
 * flexible, so that they absorb any free space along the main axis.
 */
    .u-md-flex-auto {
        flex: 1 1 auto !important;
        flex-basis: auto !important;
        /* 1 */
    }
    /*
 * Sizes the item according to the width/height properties, but makes the flex
 * item fully inflexible. Similar to initial, except that flex items are
 * not allowed to shrink, even in overflow situations.
 */
    .u-md-flex-none {
        flex: 0 0 auto !important;
        flex-basis: auto !important;
        /* 1 */
    }
}