/**
 * Flexlay Child Alignment
 * https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
 * https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
 * https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
 */

@import '../variables';

/** Given a breakpoint name, generate alignment selectors applicable to parent elements */
@mixin flex-alignments($break: null) {
  $suffix: if($break, '-#{$break}', '');
  $prop: '#{$lib-prefix}layout-align#{$suffix}';

  // Main axis alignment

  $main: (
    start: flex-start,
    center: center,
    end: flex-end,
    space-around: space-around,
    space-between: space-between
  );

  @each $name, $value in $main {
    [#{$prop}^="#{$name}"] { justify-content: $value; }
  }

  // Cross axis alignment

  $cross: (
    start: flex-start,
    center: center,
    end: flex-end,
    stretch: stretch,
  );

  @each $name, $value in $cross {
    [#{$prop}$=" #{$name}"] {
      align-items: $value;
      align-content: $value;

      @if ($name == center) { // IE overflow fix
        max-width: 100%;
        box-sizing: border-box;
      }
    }
  }
}