@import '../style/functions.scss';
@import '../style/theme.scss';
@import '../style/mixins.scss';

$grid-prefix-cls: 'dk-grid';

.#{$grid-prefix-cls} {
  margin-right: auto;
  margin-left: auto;

  &-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-right: $grid-outer-margin;
    padding-left: $grid-outer-margin;
  }

  &-row {
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    margin-right: $grid-gutter-compensation;
    margin-left: $grid-gutter-compensation;
  }

  &-row-reverse {
    flex-direction: row-reverse;
  }

  &-col-reverse {
    flex-direction: column-reverse;
  }
}

@include grid-make-col($grid-prefix-cls, xs);

@each $name, $breakpoint in $grid-breakpoints {
  @media only screen and (min-width: $breakpoint) {
    @include grid-make-col($grid-prefix-cls, $name);
  }
}