@import '../../../style/mixins/index';
@import './mixin';

// Grid system
.@{vts-prefix}-row {
  display: flex;
  flex-flow: row wrap;

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

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

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

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

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

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

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

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

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

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

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

.make-grid();

.make-grid(-xxxs);

@media (min-width: @screen-xxs-min) {
  .make-grid(-xxs);
}

@media (min-width: @screen-xs-min) {
  .make-grid(-xs);
}

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

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

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

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

@import './rtl';