@import "../../style/themes/default";
@import "../../style/mixins/index";
@import "./mixin";

// Grid system
.@{ui-prefix}-row {
  .make-row();
  display: block;
  box-sizing: border-box;
  &__flex {
    display: flex;
    flex-flow: row wrap;

    &:before,
    &:after {
      display: flex;
    }
  }
}
// x
.@{ui-prefix}-row__flex_start {
  justify-content: flex-start;
}

// x
.@{ui-prefix}-row__flex_center {
  justify-content: center;
}

// x
.@{ui-prefix}-row__flex_end {
  justify-content: flex-end;
}

// x
.@{ui-prefix}-row__flex_space-between {
  justify-content: space-between;
}

// x
.@{ui-prefix}-row__flex_space-around {
  justify-content: space-around;
}

.@{ui-prefix}-row__flex_top {
  align-items: flex-start;
}

.@{ui-prefix}-row__flex_middle {
  align-items: center;
}

.@{ui-prefix}-row__flex_bottom {
  align-items: flex-end;
}

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

// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.

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

// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.

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

// Extra Large grid
//
// Columns, offsets, pushes, and pulls for the full hd device range.

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

// Extra Extra Large grid
//
// Columns, offsets, pushes, and pulls for the full hd device range.

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