@charset "UTF-8";

@import "../core/index-noreset.scss";
@import "./scss/mixin";
@import "./scss/variable";

/* Grid System */
/* 根据 Alibaba Base DPL(BASE DPL)设计规范实现 */
/* 栅格系统, 根据不同的屏幕尺寸情况，调整这些区块的排版，将页面划分为若干等宽的列，然后推荐通过等宽列来创建响应式的页面区块。另外，屏幕宽度较大的时候，区块倾向于水平分布，而屏幕宽度较小的时候，区块倾向于竖直堆叠。 */
/* ------------------------------- */

.#{$css-prefix}row {
    @include box-sizing;
    display: flex;

    &.#{$css-prefix}row-wrap {
        flex-wrap: wrap;
    }

    &.#{$css-prefix}row-fixed {
        @include breakpoint-row-width();
    }

    &.#{$css-prefix}row-fixed-xxs {
        width: $grid-xxs;
    }
    &.#{$css-prefix}row-fixed-xs {
        width: $grid-xs;
    }
    &.#{$css-prefix}row-fixed-s {
        width: $grid-s;
    }
    &.#{$css-prefix}row-fixed-m {
        width: $grid-m;
    }
    &.#{$css-prefix}row-fixed-l {
        width: $grid-l;
    }
    &.#{$css-prefix}row-fixed-xl {
        width: $grid-xl;
    }

    &.#{$css-prefix}row-justify-start {
        justify-content: flex-start;
    }
    &.#{$css-prefix}row-justify-end {
        justify-content: flex-end;
    }
    &.#{$css-prefix}row-justify-center {
        justify-content: center;
    }
    &.#{$css-prefix}row-justify-space-between {
        justify-content: space-between;
    }
    &.#{$css-prefix}row-justify-space-around {
        justify-content: space-around;
    }

    &.#{$css-prefix}row-align-top {
        align-items: flex-start;
    }
    &.#{$css-prefix}row-align-bottom {
        align-items: flex-end;
    }
    &.#{$css-prefix}row-align-center {
        align-items: center;
    }
    &.#{$css-prefix}row-align-baseline {
        align-items: baseline;
    }
    &.#{$css-prefix}row-align-stretch {
        align-items: stretch;
    }
}

.#{$css-prefix}col {
    flex: 1;

    &.#{$css-prefix}col-top {
        align-self: flex-start;
    }
    &.#{$css-prefix}col-bottom {
        align-self: flex-end;
    }
    &.#{$css-prefix}col-center {
        align-self: center;
    }
}

/* IE9 pack */
@media all and (min-width: 0\0) and (min-resolution: .001dpcm) {
    .#{$css-prefix}row {
        display: table;
        width: 100%;
    }

    .#{$css-prefix}col {
        display: table-cell;
        vertical-align: top;
    }
}

@include make-columns();
@include make-5columns();
@include make-columns-fixed();

@include make-offset();
@include make-offset-fixed();

@include visible-hidden-all-points();
@include visible-hidden-all-points-row();

@import "./rtl.scss";