@use 'sass:math';

@use 'common/var' as *;
@use 'mixins/mixins' as *;
@use 'mixins/_col' as *;

// Common properties for all breakpoints
%grid-column {
  box-sizing: inherit;
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  flex: 0 0 100%; // Prevent IE overflow when resize window
  min-height: 1px; // Prevent columns from collapsing when empty
}

.#{$namespace}-col,
.#{$namespace}-col-auto {
  @extend %grid-column;
}

.#{$namespace}-col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.#{$namespace}-col-auto {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

@for $i from 1 through 12 {
  .#{$namespace}-col-#{$i} {
    @extend %grid-column;
    max-width: (math.div(1, 12) * $i * 100) * 1%;
    flex: 0 0 (math.div(1, 12) * $i * 100) * 1%;
  }

  .#{$namespace}-col-offset-#{$i} {
    margin-left: (math.div(1, 12) * $i * 100) * 1%;
  }

  .#{$namespace}-col-order-#{$i} {
    order: $i;
  }
}

.#{$namespace}-col-order-first {
  order: 0;
}

.#{$namespace}-col-order-last {
  order: 13;
}

@include col-size(xs);

@include col-size(sm);

@include col-size(md);

@include col-size(lg);

@include col-size(xl);

@include col-size(xxl);