@import '../default/var';

.#{$prefix} {
    &-row {
        box-sizing: border-box;
        &:after {
            clear: both;
        }
        &--flex {
            display: flex;
            @each $item in flex-start,
            flex-end,
            center,
            space-around,
            space-between {
                &--justify__#{$item} {
                    justify-content: #{$item};
                }
                &--align__#{$item} {
                    align-items: #{$item};
                }
            }
        }
    }
    &-col {
        float: left;
        box-sizing: border-box;
        @for $i from 1 through 24 {
            &-#{$i} {
                $w: (100/24)*$i;
                width: #{$w+'%'};
            }
        }
    }
    &-offset {
        @for $i from 1 through 24 {
            &-#{$i} {
                $w: (100/24)*$i;
                margin-left: #{$w+'%'};
            }
        }
    }
    &-container {
        display: flex;
        flex: 1;
        &.is-vertical {
            flex-direction: column;
        }
    }
    &-sider {
        flex-shrink: 0;
    }
    &-content {
        flex: 1;
    }
    &-header,
    &-footer {
        flex-shrink: 0;
    }
}