$flex-direction: (
  'flex-col': column,
  'flex-row': row,
  'flex-row-reverse': row-reverse,
  'flex-col-reverse': column-reverse
);

$justify-content: (
  'center': center,
  'start': flex-start,
  'end': flex-end,
  'between': space-between,
  'around': space-around,
  'stretch': stretch
);

$align-items: (
  'start': flex-start,
  'end': flex-end,
  'center': center,
  'baseline': baseline,
  'stretch': stretch
);

$align-content: (
  'start': flex-start,
  'end': flex-end,
  'center': center,
  'between': space-between,
  'around': space-around,
  'stretch': stretch,
);

$align-self: (
  'start': flex-start,
  'end': flex-end,
  'center': center,
  'baseline': baseline,
  'stretch': stretch,
  'auto': auto,
  'normal': normal,
  'first-baseline': first baseline,
  'last-baseline': last baseline
);

$flex-wrap: (
  'wrap': wrap,
  'nowrap': nowrap,
  'wrap-reverse': wrap-reverse
);

$flex-grow: (
  '0': 0,
  '1': 1,
  '2': 2,
  '3': 3
);

$flex-shrink: (
  '0': 0,
  '1': 1,
  '2': 2,
  '3': 3
);

$flex-basis: (
  'auto': auto,
  '0': 0,
  '10': 10%,
  '20': 20%,
  '30': 30%,
  '40': 40%
);

$order: (
  'first': -1,
  '0': 0,
  '1': 1,
  '2': 2,
  '3': 3,
  '4': 4,
  '5': 5,
  '6': 6,
  '7': 7,
  'last': 999
);

$gap-sizes: (
  '0': 0,
  'px': 1px,
  '0\\.5': 0.125rem, // 2px
  '1': 0.25rem, // 4px
  '1\\.5': 0.375rem, // 6px
  '2': 0.5rem, // 8px
  '2\\.5': 0.625rem, // 10px
  '3': 0.75rem, // 12px
  '3\\.5': 0.875rem, // 14px
  '4': 1rem, // 16px
  '5': 1.25rem, // 20px
  '6': 1.5rem, // 24px
  '7': 1.75rem, // 28px
  '8': 2rem, // 32px
  '9': 2.25rem, // 36px
  '10': 2.5rem, // 40px
  '11': 2.75rem, // 44px
  '12': 3rem, // 48px
  '14': 3.5rem, // 56px
  '16': 4rem, // 64px
  '20': 5rem, // 80px
  '24': 6rem, // 96px
  '28': 7rem, // 112px
  '32': 8rem, // 128px
  '36': 9rem, // 144px
  '40': 10rem, // 160px
  '44': 11rem, // 176px
  '48': 12rem, // 192px
  '52': 13rem, // 208px
  '56': 14rem, // 224px
  '60': 15rem, // 240px
  '64': 16rem, // 256px
  '72': 18rem, // 288px
  '80': 20rem, // 320px
  '96': 24rem // 384px
);

$flex-properties: (
  'direction': ('name': '', 'map': $flex-direction, 'property': 'flex-direction'),
  'justify': ('name': 'justify-', 'map': $justify-content, 'property': 'justify-content'),
  'items': ('name': 'items-', 'map': $align-items, 'property': 'align-items'),
  'content': ('name': 'content-', 'map': $align-content, 'property': 'align-content'),
  'flex': ('name': 'flex-', 'map': $flex-wrap, 'property': 'flex-wrap'),
  'self': ('name': 'self-', 'map': $align-self, 'property': 'align-self'),
  'grow': ('name': 'grow-', 'map': $flex-grow, 'property': 'flex-grow'),
  'shrink': ('name': 'shrink-', 'map': $flex-shrink, 'property': 'flex-shrink'),
  'basis': ('name': 'basis-', 'map': $flex-basis, 'property': 'flex-basis'),
  'order': ('name': 'order-', 'map': $order, 'property': 'order'),
  'gap': ('name': 'gap-', 'map': $gap-sizes, 'property': 'gap'),
  'gap-y': ('name': 'gap-y-', 'map': $gap-sizes, 'property': 'row-gap'),
  'gap-x': ('name': 'gap-x-', 'map': $gap-sizes, 'property': 'column-gap'),
);
