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

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

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

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

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

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

[layout-padding] + [layout-padding], /* DEPRECATED */
[layout-margin] + [layout-margin] {
  margin-top: -($layout-gutter-width / 2);
}

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

[layout-fill],[data-layout-fill] {
  margin: 0;
  min-height: 100%;
  width: 100%;
}

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

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

  [#{$flexName}],[data-#{$flexName}] {
    flex: 1;
  }

  // (0-19) * 5 = 0-95%
  @for $i from 0 through 19 {
    [#{$flexName}="#{$i * 5}"],[data-#{$flexName}="#{$i * 5}"] {
      flex: 0 0 #{$i * 5 + '%'};
      max-width: #{$i * 5 + '%'};
    }
  }

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

}

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

@include flex-properties-for-name();
[hide]:not([show]),[data-hide]:not([data-show]) {
  display: none;
}

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

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

  @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],[data-hide-md], [data-hide] {
    &:not([show-md]),&:not([data-show-md]) {
      display: none;
    }
  }

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

  @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],[data-hide-lg], [data-hide] {
    &:not([show-lg]), &:not([data-show-lg]) {
      display: none;
    }
  }

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

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



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


// 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
// ------------------------------

// Main Axis Center
[layout-align="center"], //stretch
[layout-align="center center"],
[layout-align="center start"],
[layout-align="center end"],
[data-layout-align="center"], //stretch
[data-layout-align="center center"],
[data-layout-align="center start"],
[data-layout-align="center end"] {
  justify-content: center;
}

// Main Axis End
[layout-align="end"], //stretch
[layout-align="end center"],
[layout-align="end start"],
[layout-align="end end"],
[data-layout-align="end"], //stretch
[data-layout-align="end center"],
[data-layout-align="end start"],
[data-layout-align="end end"] {
  justify-content: flex-end;
}

// Main Axis Space Around
[layout-align="space-around"], //stretch
[layout-align="space-around center"],
[layout-align="space-around start"],
[layout-align="space-around end"]
[data-layout-align="space-around"], //stretch
[data-layout-align="space-around center"],
[data-layout-align="space-around start"],
[data-layout-align="space-around end"] {
  justify-content: space-around;
}

// Main Axis Space Between
[layout-align="space-between"], //stretch
[layout-align="space-between center"],
[layout-align="space-between start"],
[layout-align="space-between end"],
[data-layout-align="space-between"], //stretch
[data-layout-align="space-between center"],
[data-layout-align="space-between start"],
[data-layout-align="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
[layout-align="center center"],
[layout-align="start center"],
[layout-align="end center"],
[layout-align="space-between center"],
[layout-align="space-around center"],
[data-layout-align="center center"],
[data-layout-align="start center"],
[data-layout-align="end center"],
[data-layout-align="space-between center"],
[data-layout-align="space-around center"] {
  align-items: center;
}

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

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

