@import './mixin';

@d1-prefix: d1;
// Media queries breakpoints
// @screen-xs and @screen-xs-min is not used in Grid
// smallest break point is @screen-md
@screen-xs: 480px;
@screen-xs-min: @screen-xs;
// 👆 Extra small screen / phone

// 👇 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: 1440px;
@screen-xl-min: @screen-xl;

// Extra extra large screen / large desktop
@screen-xxl: 1920px;
@screen-xxl-min: @screen-xxl;

// provide a maximum
@screen-xs-max: (@screen-sm-min - 1px);
@screen-sm-max: (@screen-md-min - 1px);
@screen-md-max: (@screen-lg-min - 1px);
@screen-lg-max: (@screen-xl-min - 1px);
@screen-xl-max: (@screen-xxl-min - 1px);
// Grid system
@grid-columns: 24;

// Grid system
.@{d1-prefix}-row {
  display: flex;
  flex-flow: row wrap;
  width: 100%;

  &::before,
  &::after {
    display: flex;
  }

  // No wrap of flex
  &-no-wrap {
    flex-wrap: nowrap;
  }
}

// x轴原点
.@{d1-prefix}-row-start {
  justify-content: flex-start;
}

// x轴居中
.@{d1-prefix}-row-center {
  justify-content: center;
}

// x轴反方向
.@{d1-prefix}-row-end {
  justify-content: flex-end;
}

// x轴平分
.@{d1-prefix}-row-space-between {
  justify-content: space-between;
}

// x轴有间隔地平分
.@{d1-prefix}-row-space-around {
  justify-content: space-around;
}

// 顶部对齐
.@{d1-prefix}-row-top {
  align-items: flex-start;
}

// 居中对齐
.@{d1-prefix}-row-middle {
  align-items: center;
}

// 底部对齐
.@{d1-prefix}-row-bottom {
  align-items: flex-end;
}

.@{d1-prefix}-col {
  position: relative;
  max-width: 100%;
  // Prevent columns from collapsing when empty
  min-height: 1px;
}

.make-grid();

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

.make-grid(-xl);

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

@media (min-width: @screen-sm-min) {
  .make-grid(-xl);
  // html{
  //   font-size:  @screen-sm-min/1440*100px;
  // }
}

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

@media (min-width: @screen-md-min) {
  .make-grid(-xl);
  // html{
  //   font-size:  @screen-md-min/1440*100px;
  // }
}

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

@media (min-width: @screen-lg-min) {
  .make-grid(-xl);
  // html{
  //   font-size:  @screen-lg-min/1440*100px;
  // }
}

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

@media (min-width: @screen-xl-min) {
  .make-grid(-xl);
  // html{
  //   font-size: 100px;
  // }
}

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

@media (min-width: @screen-xxl-min) {
  .make-grid(-xxl);
  // html{
  //   font-size:  @screen-xxl-min/1440*100px;
  // }
}
