@use "sass:math";
@import "./common/var.scss";
@import "./mixins/mixins.scss";

[class*="el-col-"] {
  float: left;
  box-sizing: border-box;
}

.el-col-0 {
  display: none;
}

@for $i from 0 through 24 {
  .el-col-#{$i} {
    width: (math.div(1 , 24) * $i * 100) * 1%;
  }

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

  .el-col-pull-#{$i} {
    position: relative;
    right: (math.div(1 , 24) * $i * 100) * 1%;
  }

  .el-col-push-#{$i} {
    position: relative;
    left: (math.div(1 , 24) * $i * 100) * 1%;
  }
}

@each $align in $--align {
  .el-col-align-#{$align} {
    text-align: $align;
  }
}

@each $size in $--sizes {
  @include res(#{$size}) {
    .el-col-#{$size}-0 {
      display: none;
    }
    @for $i from 0 through 24 {
      .el-col-#{$size}-#{$i} {
        width: (math.div(1 , 24) * $i * 100) * 1%;
      }

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

      .el-col-#{$size}-pull-#{$i} {
        position: relative;
        right: (math.div(1 , 24) * $i * 100) * 1%;
      }

      .el-col-#{$size}-push-#{$i} {
        position: relative;
        left: (math.div(1 , 24) * $i * 100) * 1%;
      }
    }
  }
}