@import 'main';

// Grid system
$grid-columns: 48;
$grid-gutter-width: 0;

// Small screen / tablet
$screen-sm: 576px;
$screen-sm-min: $screen-sm;

// Medium screen / desktop
$screen-md: 768px;
$screen-md-min: $screen-md;

// Large screen / wide desktop
$screen-lg: 992px;
$screen-lg-min: $screen-lg;

// Extra large screen / full hd
$screen-xl: 1200px;
$screen-xl-min: $screen-xl;

// Extra extra large screen / large desktop
$screen-xxl: 1600px;
$screen-xxl-min: $screen-xxl;

// full hd
$screen-fhd: 1920px;
$screen-fhd-min: $screen-fhd;

// mixins for grid system
@mixin make-row($gutter: $grid-gutter-width) {
  position: relative;
  margin-left: ($gutter / -2);
  margin-right: ($gutter / -2);
  height: auto;
  @include clearfix;
}

@mixin make-grid-columns() {
  $class_names: '';
  @for $i from 1 through $grid-columns {
    $class_names: '#{$class_names} .#{$okt-prefix}-col-#{$i}, .#{$okt-prefix}-col-xs-#{$i}, .#{$okt-prefix}-col-sm-#{$i}, .#{$okt-prefix}-col-md-#{$i}, .#{$okt-prefix}-col-lg-#{$i}';
    @if $i != $grid-columns {
      $class_names: '#{$class_names}, '
    }
  }

  #{$class_names} {
    position: relative;
    // Prevent columns from collapsing when empty
    min-height: 1px;
    padding-left: ($grid-gutter-width / 2);
    padding-right: ($grid-gutter-width / 2);
  }
}

@mixin float-grid-columns($class) {
  $class_names: '';
  @for $i from 1 through $grid-columns {
    $class_names: '#{$class_names} .#{$okt-prefix}-col#{$class}-#{$i}';
    @if $i != $grid-columns {
      $class_names: '#{$class_names}, '
    }
  }

  #{$class_names} {
    float: left;
    @include flex(0, 0, auto);
  }
}

// lesshint false
@mixin loop-grid-columns($count, $class) {
  @for $i from $count through 0 {
    @if $i > 0 {
      .#{$okt-prefix}-col#{$class}-#{$i} {
        display: block;
        box-sizing: border-box;
        width: percentage(($i / $grid-columns));
      }

      .#{$okt-prefix}-col#{$class}-push-#{$i} {
        left: percentage(($i / $grid-columns));
      }

      .#{$okt-prefix}-col#{$class}-pull-#{$i} {
        right: percentage(($i / $grid-columns));
      }

      .#{$okt-prefix}-col#{$class}-offset-#{$i} {
        margin-left: percentage(($i / $grid-columns));
      }

      .#{$okt-prefix}-col#{$class}-order-#{$i} {
        order: $i;
      }
    } @else if $i ==0 {
      .#{$okt-prefix}-col#{$class}-#{$i} {
        display: none;
      }

      .#{$okt-prefix}-col-push-#{$i} {
        left: auto;
      }

      .#{$okt-prefix}-col-pull-#{$i} {
        right: auto;
      }

      .#{$okt-prefix}-col#{$class}-push-#{$i} {
        left: auto;
      }

      .#{$okt-prefix}-col#{$class}-pull-#{$i} {
        right: auto;
      }

      .#{$okt-prefix}-col#{$class}-offset-#{$i} {
        margin-left: 0;
      }

      .#{$okt-prefix}-col#{$class}-order-#{$i} {
        order: 0;
      }
    }
  }

}

@mixin make-grid($class: '') {
  @include float-grid-columns($class);
  @include loop-grid-columns($grid-columns, $class);
}

/* end of mixins */

// Grid system
.#{$okt-prefix}-row {
  @include make-row();
  display: block;
  @include box-sizing();
}

.#{$okt-prefix}-row-flex {
  @include flexbox();
  @include flex-flow(row wrap);

  &:before,
  &:after {
    @include flexbox();
  }
}

// x轴原点
.#{$okt-prefix}-row-flex-start {
  @include justify-content(flex-start);
}

// x轴居中
.#{$okt-prefix}-row-flex-center {
  @include justify-content(center);
}

// x轴反方向
.#{$okt-prefix}-row-flex-end {
  @include justify-content(flex-end);
}

// x轴平分
.#{$okt-prefix}-row-flex-space-between {
  @include justify-content(space-between);
}

// x轴有间隔地平分
.#{$okt-prefix}-row-flex-space-around {
  @include justify-content(space-around);
}

// 顶部对齐
.#{$okt-prefix}-row-flex-top {
  @include align-items(flex-start);
}

// 居中对齐
.#{$okt-prefix}-row-flex-middle {
  @include align-items(center);
}

// 底部对齐
.#{$okt-prefix}-row-flex-bottom {
  @include align-items(flex-end);
}

.#{$okt-prefix}-col {
  position: relative;
  display: block;
}

@include make-grid-columns();
@include make-grid();

// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.

@include make-grid(-xs);

// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.

@media (min-width: $screen-sm-min) {
  @include make-grid(-sm);
}

// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.

@media (min-width: $screen-md-min) {
  @include make-grid(-md);
}

// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.

@media (min-width: $screen-lg-min) {
  @include make-grid(-lg);
}

// Extra Large grid
//
// Columns, offsets, pushes, and pulls for the full hd device range.

@media (min-width: $screen-xl-min) {
  @include make-grid(-xl);
}

// Extra Extra Large grid
//
// Columns, offsets, pushes, and pulls for the full hd device range.

@media (min-width: $screen-xxl-min) {
  @include make-grid(-xxl);
}


// full hd

@media (min-width: $screen-fhd-min) {
  @include make-grid(-fhd);
}