// Responsive attributes
// ------------------------------

// hide means hide everywhere
/* Sizes:
  0    <= size <= 600  Phone
  600  <= size <= 960  Tablet
  960  <= size <= 1200 Tablet-Landscape
  1200 <= size         PC
*/

[layout] {
  box-sizing: border-box;
  display: flex;
}

[layout=column] {
  flex-direction: column;
}

[layout=row] {
  flex-direction: row;
}

[layout-padding],
[layout-padding] > [flex] {
  padding: $layout-gutter-width / 2;
}
[layout-margin],
[layout-margin] > [flex] {
  margin: $layout-gutter-width / 2;
}

[layout-wrap] {
  flex-wrap: wrap;
}

[layout-fill] {
  margin: 0;
  min-height: 100%;
  width: 100%;
}
@-moz-document url-prefix() { 
  [layout-fill] {
    margin: 0;
    width: 100%;
    min-height: auto;
    height: inherit;
  }
}

@mixin layout-for-name($name) {
  [layout-#{$name}] {
    box-sizing: border-box;
    display: flex;
  }
  [layout-#{$name}=column] {
    flex-direction: column;
  }
  [layout-#{$name}=row] {
    flex-direction: row;
  }
}

@mixin flex-properties-for-name($name: null) {
  $flexName: 'flex';
  @if $name != null {
    $flexName: 'flex-#{$name}';
  }

  [#{$flexName}] {
    flex: 1;
  }


  // (0-20) * 5 = 0-100%
  @for $i from 0 through 20 {
    [#{$flexName}="#{$i * 5}"] {
      flex: 0 0 #{$i * 5 + '%'};
    }
    [layout="row"] > [#{$flexName}="#{$i * 5}"] {
      max-width: #{$i * 5 + '%'};
    }
    [layout="column"] > [#{$flexName}="#{$i * 5}"] {
      max-height: #{$i * 5 + '%'};
    }
  }

  [layout="row"] {
    > [#{$flexName}="33"], > [#{$flexName}="34"] {
      flex: 0 0 33.33%;
      max-width: 33.33%;
    }
    > [#{$flexName}="66"], > [#{$flexName}="67"] {
      flex: 0 0 66.66%;
      max-width: 66.66%;
    }
  }
  [layout="column"] {
    > [#{$flexName}="33"], > [#{$flexName}="34"] {
      flex: 0 0 33.33%;
      max-height: 33.33%;
    }
    > [#{$flexName}="66"], > [#{$flexName}="67"] {
      flex: 0 0 66.66%;
      max-height: 66.66%;
    }
  }
}

// Alignment attributes for layout containers' children
// Arrange on the Main Axis
// center, start, end, space-between, space-around
// flex-start is the default for justify-content
// ------------------------------

@mixin layout-align-for-name($suffix: null) {
  $name: 'layout-align';
  @if $suffix != null {
    $name: 'layout-align-#{$suffix}';
  }

  // Main Axis Center
  [#{$name}="center"], //stretch
  [#{$name}="center center"],
  [#{$name}="center start"],
  [#{$name}="center end"] {
    justify-content: center;
  }

  // Main Axis End
  [#{$name}="end"], //stretch
  [#{$name}="end center"],
  [#{$name}="end start"],
  [#{$name}="end end"] {
    justify-content: flex-end;
  }

  // Main Axis Space Around
  [#{$name}="space-around"], //stretch
  [#{$name}="space-around center"],
  [#{$name}="space-around start"],
  [#{$name}="space-around end"] {
    justify-content: space-around;
  }

  // Main Axis Space Between
  [#{$name}="space-between"], //stretch
  [#{$name}="space-between center"],
  [#{$name}="space-between start"],
  [#{$name}="space-between end"] {
    justify-content: space-between;
  }


  // Arrange on the Cross Axis
  // center, start, end
  // stretch is the default for align-items
  // ------------------------------

  // Cross Axis Center
  [#{$name}="center center"],
  [#{$name}="start center"],
  [#{$name}="end center"],
  [#{$name}="space-between center"],
  [#{$name}="space-around center"] {
    align-items: center;
  }

  // Cross Axis Start
  [#{$name}="center start"],
  [#{$name}="start start"],
  [#{$name}="end start"],
  [#{$name}="space-between start"],
  [#{$name}="space-around start"] {
    align-items: flex-start;
  }

  // Cross Axis End
  [#{$name}="center end"],
  [#{$name}="start end"],
  [#{$name}="end end"],
  [#{$name}="space-between end"],
  [#{$name}="space-around end"] {
    align-items: flex-end;
  }

}

// Flex attributes for layout children
// ------------------------------

@include flex-properties-for-name();
@include layout-align-for-name();

[hide]:not([show]) {
  display: none;
}

@media (max-width: $layout-breakpoint-sm) {
  [hide-sm], [hide] {
    &:not([show-sm]) {
      display: none;
    }
  }

  @include layout-align-for-name(sm);
  @include layout-for-name(sm);
  @include flex-properties-for-name(sm);
}
@media (min-width: $layout-breakpoint-sm) {
  [hide-gt-sm], [hide] {
    &:not([show-gt-sm]):not([show-md]):not([show-gt-md]):not([show-lg]):not([show-gt-lg]) {
      display: none;
    }
  }

  @include layout-align-for-name(gt-sm);
  @include layout-for-name(gt-sm);
  @include flex-properties-for-name(gt-sm);
}

@media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md) {
  [hide-md], [hide] {
    &:not([show-md]) {
      display: none;
    }
  }

  @include layout-align-for-name(md);
  @include layout-for-name(md);
  @include flex-properties-for-name(md);
}
@media (min-width: $layout-breakpoint-md) {
  [hide-gt-md], [hide] {
    &:not([show-gt-md]):not([show-lg]):not([show-gt-lg]) {
      display: none;
    }
  }

  @include layout-align-for-name(gt-md);
  @include layout-for-name(gt-md);
  @include flex-properties-for-name(gt-md);
}

@media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg) {
  [hide-lg], [hide] {
    &:not([show-lg]) {
      display: none;
    }
  }

  @include layout-align-for-name(lg);
  @include layout-for-name(lg);
  @include flex-properties-for-name(lg);
}
@media (min-width: $layout-breakpoint-lg) {
  [hide-gt-lg], [hide] {
    &:not([show-gt-lg]) {
      display: none;
    }
  }

  @include layout-align-for-name(gt-lg);
  @include layout-for-name(gt-lg);
  @include flex-properties-for-name(gt-lg);
}



// Order attributes for layout children
// ------------------------------
[flex-order="0"] { order: 0; }
[flex-order="1"] { order: 1; }
[flex-order="2"] { order: 2; }
[flex-order="3"] { order: 3; }
[flex-order="4"] { order: 4; }
[flex-order="5"] { order: 5; }
[flex-order="6"] { order: 6; }
[flex-order="7"] { order: 7; }
[flex-order="8"] { order: 8; }
[flex-order="9"] { order: 9; }