/**
* Flexlay Flex Property
*
* https://developer.mozilla.org/en-US/docs/Web/CSS/flex
*/

@import '../variables';

/** Given a breakpoint name, generate selectors for CSS flex property */
@mixin flex-properties($break: null) {
  $suffix: if($break, '-#{$break}', '');
  $prop-nosuf:'#{$lib-prefix}flex';
  $prop: '#{$lib-prefix}flex#{$suffix}';
  $layout: '#{$lib-prefix}layout#{$suffix}';

  [#{$prop}]           { flex: 1;         box-sizing: border-box; }  // === flex: 1 1 0%;

  [#{$prop-nosuf}-grow#{$suffix}]      { flex: 1 1 100%;  box-sizing: border-box; }
  [#{$prop-nosuf}-initial#{$suffix}]   { flex: 0 1 auto;  box-sizing: border-box; }
  [#{$prop-nosuf}-auto#{$suffix}]      { flex: 1 1 auto;  box-sizing: border-box; }
  [#{$prop-nosuf}-none#{$suffix}]      { flex: 0 0 auto;  box-sizing: border-box; }
  [#{$prop-nosuf}-noshrink#{$suffix}]  { flex: 1 0 auto;  box-sizing: border-box; }
  [#{$prop-nosuf}-nogrow#{$suffix}]    { flex: 0 1 auto;  box-sizing: border-box; }

  // Generate values
  $values: ();
  @for $i from 0 through 20 { $values: append($values, $i * 5); }
  $values: join($values, 33 66);

  // Generate rules
  @each $val in $values {
    $percent: if($val == 0, '0', '#{$val}%');

    // Default
    [#{$prop}="#{$val}"] {
      flex: 1 1 #{$percent};
      max-width: #{$percent};
      max-height: 100%;
      box-sizing: border-box;
    }

    // Row Layouts
    [fl-layout="row"] > [#{$prop}="#{$val}"],
    [#{$layout}="row"] > [#{$prop}="#{$val}"] {
      flex: 1 1 #{$percent};
      max-width: #{$percent};
      max-height: 100%;
      box-sizing: border-box;
    }

    // Column Layouts
    [fl-layout="column"] > [#{$prop}="#{$val}"],
    [#{$layout}="column"] > [#{$prop}="#{$val}"] {
      flex: 1 1 #{$percent};
      max-width: 100%;
      max-height: #{$percent};
      box-sizing: border-box;
    }
  }
}