/** @define utilities */
@import "@superflycss/variables-dimension";
/**
 * Flex Container Level Utilities
 */

@media (--lg-viewport) {
  .u-lg-flex {
    display: flex !important;
  }
  .u-lg-flex-bullseye {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }  
  .u-lg-flex-inline {
    display: inline-flex !important;
  }

  .u-lg-flex-row {
    flex-direction: row !important;
  }

  .u-lg-flex-row-reverse {
    flex-direction: row-reverse !important;
  }

  .u-lg-flex-column {
    flex-direction: column !important;
  }

  .u-lg-flex-column-reverse {
    flex-direction: column-reverse !important;
  }

  .u-lg-flex-wrap {
    flex-wrap: wrap !important;
  }

  .u-lg-flex-no-wrap {
    flex-wrap: nowrap !important;
  }

  .u-lg-flex-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }

  .u-lg-flex-justify-start {
    justify-content: flex-start !important;
  }

  .u-lg-flex-justify-end {
    justify-content: flex-end !important;
  }

  .u-lg-flex-justify-center {
    justify-content: center !important;
  }

  .u-lg-flex-justify-between {
    justify-content: space-between !important;
  }

  .u-lg-flex-justify-around {
    justify-content: space-around !important;
  }

  .u-lg-flex-align-items-start {
    align-items: flex-start !important;
  }

  .u-lg-flex-align-items-end {
    align-items: flex-end !important;
  }

  .u-lg-flex-align-items-center {
    align-items: center !important;
  }

  .u-lg-flex-align-items-stretch {
    align-items: stretch !important;
  }

  .u-lg-flex-align-items-baseline {
    align-items: baseline !important;
  }

  .u-lg-flex-align-content-start {
    align-content: flex-start !important;
  }

  .u-lg-flex-align-content-end {
    align-content: flex-end !important;
  }

  .u-lg-flex-align-content-center {
    align-content: center !important;
  }

  .u-lg-flex-align-content-stretch {
    align-content: stretch !important;
  }

  .u-lg-flex-align-content-between {
    align-content: space-between !important;
  }

  .u-lg-flex-align-content-around {
    align-content: space-around !important;
  }

  .u-lg-flex-align-self-start {
    align-self: flex-start !important;
  }

  .u-lg-flex-align-self-end {
    align-self: flex-end !important;
  }

  .u-lg-flex-align-self-center {
    align-self: center !important;
  }

  .u-lg-flex-align-self-stretch {
    align-self: stretch !important;
  }

  .u-lg-flex-align-self-baseline {
    align-self: baseline !important;
  }

  .u-lg-flex-align-self-auto {
    align-self: auto !important;
  }

  .u-lg-flex-order-first {
    order: -1 !important;
  }

  .u-lg-flex-order-last {
    order: 1 !important;
  }

  .u-lg-flex-order-none {
    order: 0 !important;
  }

  @for $factor from 1 to 10 {
    .u-lg-flex-grow$(factor) {
      flex: $(factor) 1 0% !important;
    }
  }

  @for $factor from 0 to 10 {
    .u-lg-flex-shrink$(factor) {
      flex-shrink: $(factor) !important;
    }
  }

  .u-lg-flex-expand {
    margin: auto !important;
  }

  .u-lg-flex-expand-left {
    margin-left: auto !important;
  }

  .u-lg-flex-expand-right {
    margin-right: auto !important;
  }

  .u-lg-flex-expand-top {
    margin-top: auto !important;
  }

  .u-lg-flex-expand-bottom {
    margin-bottom: auto !important;
  }

  .u-lg-flex-basis-auto {
    flex-basis: auto !important;
  }

  .u-lg-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-lg-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-lg-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-lg-flex-none {
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    /* 1 */
  }
}