@import "flex_item";
@import "../tokens/spacing";

$gapSpaces:(
  xs:   $space_xs,
  sm:   $space_sm,
  md:   $space_md,
  lg:   $space_lg,
  xl:   $space_xl
);

$gapTypes: (
  gap: gap,
  columnGap: column-gap,
  rowGap: row-gap
  );

[class^=pb_flex_kit] {
  display: flex;
  flex-wrap: nowrap;

  // Inline
  &[class*=_inline] {
    display: inline-flex;
  }

  // Wrap
  &[class*=_wrap] {
    flex-wrap: wrap;
  }

  // Orientation
  &[class*=_orientation_row] {
    flex-direction: row;

    &[class*=_reverse] {
      flex-direction: row-reverse;
    }
  }

  &[class*=_orientation_column] {
    flex-direction: column;

    &[class*=_reverse] {
      flex-direction: column-reverse;
    }
  }

  // Alignment: Justify Content
  &[class*=justify_content_left],
  &[class*=justify_content_top],
  &[class*=justify_content_start] {
    justify-content: flex-start;
    &[class*=_reverse] {
      justify-content: flex-end;
    }
  }

  &[class*=justify_content_right],
  &[class*=justify_content_bottom],
  &[class*=justify_content_end] {
    justify-content: flex-end;
     &[class*=_reverse] {
      justify-content: flex-start;
    }
  }

  &[class*=justify_content_center] {
    justify-content: center;
  }


  // Alignment: Align Items
  &[class*=align_items_left],
  &[class*=align_items_top],
  &[class*=align_items_start] {
    align-items: flex-start;
  }


  &[class*=align_items_right],
  &[class*=align_items_bottom],
  &[class*=align_items_end] {
    align-items: flex-end;
  }

  &[class*=align_items_center] {
    align-items: center;
  }

  &[class*=align_items_stretch] {
    align-items: stretch;
  }

  &[class*=align_items_baseline] {
    align-items: baseline;
  }

  // Spacing
  &[class*=spacing_around],
  &[class*=justify_content_around] {
    justify-content: space-around;
  }

  &[class*=spacing_between],
  &[class*=justify_content_between] {
    justify-content: space-between;
  }

  &[class*=spacing_evenly],
  &[class*=justify_content_evenly] {
    justify-content: space-evenly;
  }

  //Gap
  @each $gapType, $gapValue in $gapTypes{
    @each $sizeName, $sizeValue in $gapSpaces {
      &[class*=_#{$gapType}_#{$sizeName}]{
        #{$gapValue}: $sizeValue;
      }
    }
  }


}