@use 'sass:math';

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

@mixin col-size($size) {
  @include res($size) {
    .#{$namespace}-col-#{$size} {
      flex-basis: 0;
      flex-grow: 1;
      max-width: 100%;
    }

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

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

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

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

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

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