// For item alignment with a flex container

@mixin flexAlignItems {
  $alignmentTypes: (
    'align',
    'justify',
  );
  $alignmentTargets: (
    'items',
    'content',
  );
  $elementAlignment: (
    'start',
    'end',
    'center',
  );
  @each $alignmentType in $alignmentTypes {
    @each $alignmentTarget in $alignmentTargets {
      .u-#{$alignmentType}-#{$alignmentTarget} {
        @each $alignment in $elementAlignment {
          &-#{$alignment} {
            &#{&} {
              display: flex;
              #{$alignmentType}-#{$alignmentTarget}: #{if(($alignment == 'start' or $alignment == 'end'), flex-#{$alignment}, $alignment)};
            }
          }
        }
      }
    }
  }
}