@import "./style/mixin";

// Grid system
.@{prefix}-row {
    .make-row();
    display: block;
}

.@{prefix}-row-flex {
    display: flex;
    flex-flow: row wrap;

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

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

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

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

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

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

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

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

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

.@{prefix}-col {
    position: relative;
    display: block;
}

.make-grid-columns();
.make-grid();

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

.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) {
    .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);
}