@charset "UTF-8";

@mixin box-sizing {
  box-sizing: border-box;
  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }
}

// Grid system
// --------------------------------------------------

@mixin display-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}

@mixin flex($fg: 1, $fs: 1, $fb: auto) {
  -webkit-box-flex: $fg;
  -webkit-flex: $fg $fs $fb;
  -moz-box-flex: $fg;
  -moz-flex: $fg $fs $fb;
  -ms-flex: $fg $fs $fb;
  flex: $fg $fs $fb;
}

@mixin flex-wrap($value: nowrap) {
  // No Webkit Box fallback.
  -webkit-flex-wrap: $value;
  -moz-flex-wrap: $value;
  @if ($value == nowrap) {
    -ms-flex-wrap: none;
  } @else {
    -ms-flex-wrap: $value;
  }
  flex-wrap: $value;
}

@mixin align-items($value: stretch) {
  @if ($value == flex-start) {
    -webkit-box-align: start;
    -ms-flex-align: start;
  } @else if ($value == flex-end) {
    -webkit-box-align: end;
    -ms-flex-align: end;
  } @else {
    -webkit-box-align: $value;
    -ms-flex-align: $value;
  }

  -webkit-align-items: $value;
  -moz-align-items: $value;
  align-items: $value;
}

@mixin align-self($value: auto) {
  -webkit-align-self: $value;
  -moz-align-self: $value;

  @if ($value == flex-start) {
    -ms-flex-item-align: start;
  } @else if ($value == flex-end) {
    -ms-flex-item-align: end;
  } @else {
    -ms-flex-item-align: $value;
  }

  align-self: $value;
}

@mixin justify() {
  &#{$wcontainer-prefix}-row-justify-start {
    justify-content: flex-start;
  }
  &#{$wcontainer-prefix}-row-justify-end {
    justify-content: flex-end;
  }
  &#{$wcontainer-prefix}-row-justify-center {
    justify-content: center;
  }
  &#{$wcontainer-prefix}-row-justify-space-between {
    justify-content: space-between;
  }
  &#{$wcontainer-prefix}-row-justify-space-around {
    justify-content: space-around;
  }
}

@mixin breakpoint($point, $type: 'min') {
  @each $breakpoint in $breakpoints {
    $name: nth($breakpoint, 1);
    $minQuery: nth($breakpoint, 2);
    $maxQuery: nth($breakpoint, 3);

    @if ($name == $point) {
      @if ($type == 'min') {
        @media #{$minQuery} {
          @content;
        }
      } @else if ($type == 'max') {
        @media #{$maxQuery} {
          @content;
        }
      } @else if ($type == 'min-max') {
        $query: '';
        @if ($name == 'xl') {
          $query: $minQuery;
        } @else {
          $query: $minQuery + 'and' + $maxQuery;
        }
        @media #{$query} {
          @content;
        }
      }
    }
  }
}

// 响应式布局的行在不同断点下的左右两侧留白
@mixin breakpoint-row-space() {
  @include breakpoint(xxs) {
    padding: 0 $grid-space-xxs - ($grid-gutter * 0.5);
  }
  @include breakpoint(xs) {
    padding: 0 $grid-space-xs - ($grid-gutter * 0.5);
  }
  @include breakpoint(s) {
    padding: 0 $grid-space-s - ($grid-gutter * 0.5);
  }
  @include breakpoint(m) {
    padding: 0 $grid-space-m - ($grid-gutter * 0.5);
  }
  @include breakpoint(l) {
    padding: 0 $grid-space-l - ($grid-gutter * 0.5);
  }
  @include breakpoint(xl) {
    padding: 0 $grid-space-xl - ($grid-gutter * 0.5);
  }
}

// 响应式列宽
@mixin make-columns() {
  @for $i from 1 through $grid-columns {
    #{$wcontainer-prefix}-row #{$wcontainer-prefix}-col-#{$i} {
      $width: percentage($i / $grid-columns);
      //@include col-width-ie($width);
      max-width: $width;
      @include flex(0, 0, $width);
    }
  }

  //@each $breakpoint in $breakpoints {
  //  $name: #{nth($breakpoint, 1)};
  //  @include breakpoint($name) {
  //    @for $j from 1 through $grid-columns {
  //      #{$wcontainer-prefix}-row #{$wcontainer-prefix}-col-#{$name}-#{$j} {
  //        $width: percentage($j / $grid-columns);
  //        @include flex(0, 0, $width);
  //        max-width: $width;
  //        @include col-width-ie($width);
  //      }
  //    }
  //  }
  //}
}

// 固定列宽
@mixin make-columns-fixed() {
  @for $i from 1 through $grid-columns-fixed {
    #{$wcontainer-prefix}-row #{$wcontainer-prefix}-col-fixed-#{$i} {
      $width: $i * $grid-col-fixed-width;
      @include flex(0, 0, $width);
      min-width: $width;
      //@include col-width-ie($width);
    }
  }
}