@use "sass:math";

@import './common/var.scss';
@import './mixins/mixins.scss';

[class*='#{$namespace}-col-'] {
  float: left;
  box-sizing: border-box;
  @include when(guttered) {
    display: block;
    min-height: 1px;
  }
}

.#{$namespace}-col-0 {
  display: none;
  // to avoid introducing !important syntax, redundant css rule is required due to selector priority.
  @include when(guttered) {
    display: none;
  }
}

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

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

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

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

@include res(xs) {
  .#{$namespace}-col-xs-0 {
    display: none;
    @include when(guttered) {
      display: none;
    }
  }
  @for $i from 0 through 24 {
    .#{$namespace}-col-xs-#{$i} {
      @if $i != 0 {
        display: block;
      }
      max-width: (math.div(1, 24) * $i * 100) * 1%;
      flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;
    }

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

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

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

@include res(sm) {
  .#{$namespace}-col-sm-0 {
    display: none;
    @include when(guttered) {
      display: none;
    }
  }
  @for $i from 0 through 24 {
    .#{$namespace}-col-sm-#{$i} {
      @if $i != 0 {
        display: block;
      }
      max-width: (math.div(1, 24) * $i * 100) * 1%;
      flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;
    }

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

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

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

@include res(md) {
  .#{$namespace}-col-md-0 {
    display: none;
    @include when(guttered) {
      display: none;
    }
  }
  @for $i from 0 through 24 {
    .#{$namespace}-col-md-#{$i} {
      @if $i != 0 {
        display: block;
      }
      max-width: (math.div(1, 24) * $i * 100) * 1%;
      flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;
    }

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

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

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

@include res(lg) {
  .#{$namespace}-col-lg-0 {
    display: none;
    @include when(guttered) {
      display: none;
    }
  }
  @for $i from 0 through 24 {
    .#{$namespace}-col-lg-#{$i} {
      @if $i != 0 {
        display: block;
      }
      max-width: (math.div(1, 24) * $i * 100) * 1%;
      flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;
    }

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

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

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

@include res(xl) {
  .#{$namespace}-col-xl-0 {
    display: none;
    @include when(guttered) {
      display: none;
    }
  }
  @for $i from 0 through 24 {
    .#{$namespace}-col-xl-#{$i} {
      @if $i != 0 {
        display: block;
      }
      max-width: (math.div(1, 24) * $i * 100) * 1%;
      flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;
    }

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

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

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