@import './var.scss';
@import './mixin.scss';

// Grid system
.#{$css-prefix}-row {
    @include make-row();
    display: block;
    box-sizing: border-box;
  }
  
  .#{$css-prefix}-row-flex {
    display: flex;
    flex-flow: row wrap;
  
    &::before,
    &::after {
      display: flex;
    }
  }
  
  // x轴原点
  .#{$css-prefix}-row-flex-start {
    justify-content: flex-start;
  }
  
  // x轴居中
  .#{$css-prefix}-row-flex-center {
    justify-content: center;
  }
  
  // x轴反方向
  .#{$css-prefix}-row-flex-end {
    justify-content: flex-end;
  }
  
  // x轴平分
  .#{$css-prefix}-row-flex-space-between {
    justify-content: space-between;
  }
  
  // x轴有间隔地平分
  .#{$css-prefix}-row-flex-space-around {
    justify-content: space-around;
  }
  
  // 顶部对齐
  .#{$css-prefix}-row-flex-top {
    align-items: flex-start;
  }
  
  // 居中对齐
  .#{$css-prefix}-row-flex-middle {
    align-items: center;
  }
  
  // 底部对齐
  .#{$css-prefix}-row-flex-bottom {
    align-items: flex-end;
  }
  
  .#{$css-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');
  }