@use "sass:list";

// --------------------------------------------------------------------------
//  Placeholders - Flex
//  Author : Ian Reid Langevin https://www.reidlangevin.com
// --------------------------------------------------------------------------

$flex-values: (
   // row
   "row-left-top": (row, flex-start, flex-start),
   "row-left-center": (row, flex-start, center),
   "row-left-bottom": (row, flex-start, flex-end),
   "row-center-top": (row, center, flex-start),
   "row-center-center": (row, center, center),
   "row-center-bottom": (row, center, flex-end),
   "row-right-top": (row, flex-end, flex-start),
   "row-right-center": (row, flex-end, center),
   "row-right-bottom": (row, flex-end, flex-end),
   "row-space-top": (row, space-between, flex-start),
   "row-space-center": (row, space-between, center),
   "row-space-bottom": (row, space-between, flex-end),
   // column
   "column-left-top": (column, flex-start, flex-start),
   "column-left-center": (column, center, flex-start),
   "column-left-bottom": (column, flex-end, flex-start),
   "column-right-top": (column, flex-start, flex-end),
   "column-right-center": (column, center, flex-end),
   "column-right-bottom": (column, flex-end, flex-end),
   "column-center-top": (column, flex-start, center),
   "column-center-center": (column, center, center),
   "column-center-bottom": (column, flex-end, center)
);

// create the placeholder for each combinaison
@each $class, $properties in $flex-values {
   %#{$class} {
      display: flex;
      flex-direction: list.nth($properties, 1);
      justify-content: list.nth($properties, 2);
      align-items: list.nth($properties, 3);
   }
}