// Flexbox utilities
// Mixin take size in parameter
// @see _breakpoints.scss
// Every class are generated with breakpoints prefix
@mixin mic-flexbox-utilities($size: '') {
  // Flex
  $flex-properties: (
    'flex-1': '1 1 0%',
    'flex-auto': '1 1 auto',
    'flex-initial': '0 1 auto',
    'flex-none': '0'
  );
  @each $class, $property in $flex-properties {
    .#{$size + $class} {
      flex: #{$property};
      box-sizing: border-box;
    }
  }

  // Flex Direction
  // Classes: flex-row, flex-row-reverse, flex-row-reverse, flex-col, flex-col-reverse
  // Responsive: xs-flex-row, sm-flex-col...
  $flex-direction-properties: (
    'flex-row': 'row',
    'flex-row-reverse': 'row-reverse',
    'flex-col': 'column',
    'flex-col-reverse': 'column-reverse'
  );
  @each $class, $property in $flex-direction-properties {
    .#{$size + $class} {
      -webkit-flex-direction: #{$property};
      -moz-flex-direction: #{$property};
      -ms-flex-direction: #{$property};
      flex-direction: #{$property};
    }
  }

  // Flex fill
  .#{$size + 'fill'} {
    height: 100%;
    min-height: 100%;
    min-width: 100%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
  }

  // Flex Wrap
  $flex-wrap-properties: (
    'flex-wrap': 'wrap',
    'flex-nowrap': 'nowrap',
    'flex-wrap-reverse': 'wrap-reverse'
  );
  @each $class, $property in $flex-wrap-properties {
    .#{$size + $class} {
      -webkit-flex-wrap: #{$property};
      -moz-flex-wrap: #{$property};
      -ms-flex-wrap: #{$property};
      flex-wrap: #{$property};
    }
  }

  // Flex Order
  // I thought 10 was plenty.
  $flex-order-properties: (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 9999, -9999);
  @each $property in $flex-order-properties {
    .#{$size + 'order-' + $property} {
      -webkit-order: #{$property};
      -moz-order: #{$property};
      -ms-order: #{$property};
      order: #{$property};
    }
  }

  // Flex Grow
  // I thought 10 was plenty.
  $flex-grow-properties: (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
  @each $property in $flex-grow-properties {
    .#{ $size + 'grow-' + $property} {
      -webkit-flex-grow: #{$property};
      -moz-flex-grow: #{$property};
      -ms-flex-grow: #{$property};
      flex-grow: #{$property};
    }
  }

  // Flex Shrink
  // I thought 10 was plenty.
  $flex-shrink-properties: (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
  @each $property in $flex-shrink-properties {
    .#{$size + 'shrink-' + $property} {
      -webkit-flex-shrink: #{$property};
      -moz-flex-shrink: #{$property};
      -ms-flex-shrink: #{$property};
      flex-shrink: #{$property};
    }
  }

  $flex-basis-properties: (
    '0': '0px',
    '0-5': '0.125rem',
    '1': '0.25rem',
    '1-5': '0.375rem',
    '2': '0.5rem',
    '2-5': '0.625rem',
    '3': '0.75rem',
    '3-5': '0.875rem',
    '4': '1rem',
    '5': '1.25rem',
    '6': '1.5rem',
    '7': '1.75rem',
    '8': '2rem',
    '9': '2.25rem',
    '10': '2.5rem',
    '11': '2.75rem',
    '12': '3rem',
    '14': '3.5rem',
    '16': '4rem',
    '20': '5rem',
    '24': '6rem',
    '28': '7rem',
    '32': '8rem',
    '36': '9rem',
    '40': '10rem',
    '44': '11rem',
    '48': '12rem',
    '52': '13rem',
    '56': '13rem',
    '60': '15rem',
    '64': '16rem',
    '72': '18rem',
    '80': '20rem',
    '96': '24rem',
    'auto': 'auto',
    '1on2': '50%',
    '1on3': '33.333333%',
    '2on3': '66.666667%',
    '1on4': '25%',
    '2on4': '50%',
    '3on4': '75%',
    '1on5': '20%',
    '2on5': '40%',
    '3on5': '60%',
    '4on5': '80%',
    '1on6': '16.666667%',
    '2on6': '33.333333%',
    '3on6': '50%',
    '4on6': '66.666667%',
    '5on6': '83.333333%',
    '1on12': '8.333333%',
    '2on12': '16.666667%',
    '3on12': '25%',
    '4on12': '33.333333%',
    '5on12': '41.666667%',
    '6on12': '50%',
    '7on12': '58.333333%',
    '8on12': '66.666667%',
    '9on12': '75%',
    '10on12': '83.333333%',
    '11on12': '91.666667%',
    'screen': '100vw',
    'full': '100%'
  );
  @each $class, $property in $flex-basis-properties {
    .#{$size + 'basis-' + $class} {
      flex-basis: #{$property};
    }
  }
}
