/*!markdown

---
title: Flex Order
---

| Class       | Properties               |
| ----------- | ------------------------ |
| order-1 | order: 1 |
| order-2 | order: 2 |
| order-3 | order: 3 |
| order-4 | order: 4 |
| order-5 | order: 5 |
| order-6 | order: 6 |
| order-7 | order: 7 |
| order-8 | order: 8 |
| order-9 | order: 9 |
| order-10 | order: 10 |
| order-11 | order: 11 |
| order-12 | order: 12 |
| order-first | order: -9999 |
| order-last | order: 9999 |

*/
@mixin make-flex-order($prefix: '.') {
  @each $name,
    $value
      in (
        '1': 1,
        '2': 2,
        '3': 3,
        '4': 4,
        '5': 5,
        '6': 6,
        '7': 7,
        '8': 8,
        '9': 9,
        '10': 10,
        '11': 11,
        '12': 12,
        'first': -9999,
        'last': 9999
      )
  {
    #{$prefix + 'order-' + $name} {
      order: $value;
    }
  }
}

@include make-flex-order();
@each $deivce in map-keys($devices) {
  @include media-device($deivce) {
    @include make-flex-order('.' + selector-escape($deivce + ':'));
  }
}