.nut-col {
  float: left;
  box-sizing: border-box;
  word-break: break-all;
  margin-bottom: $col-default-margin-bottom;

  &.nut-col-gutter {
    &:last-child {
      padding-right: 0 !important;
    }

    &:first-child {
      padding-left: 0 !important;
    }
  }
}

[dir='rtl'] .nut-col,
.nut-rtl .nut-col {
  float: right;

  &.nut-col-gutter {
    &:last-child {
      padding-right: 0 !important;
      padding-left: 0 !important;
    }

    &:first-child {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
}

@for $i from 1 through 24 {
  .nut-col-offset-#{$i} {
    margin-left: calc((100 / 24) * #{$i} * 1%);
  }

  [dir='rtl'] .nut-col-offset-#{$i},
  .nut-rtl .nut-col-offset-#{$i} {
    margin-left: 0;
    margin-right: calc((100 / 24) * #{$i} * 1%);
  }

  .nut-col-#{$i} {
    width: calc((100 / 24) * #{$i} * 1%);
  }
}