@import "../base/breakpoint-values.scss";
@import "../base/global-variables.scss";
@import "../base/mixins.scss";

$unit-padding: $UNIT_SPACING;

// div
[class*="unit-"] {
  float: left;
  padding: $unit-padding;
}

.grid::after, .clearfix::after {
  @include clearfix();
}

// div
.grid {
  margin: -1 * $unit-padding;

  &.tight {
    margin: -0.5 * $unit-padding;

    [class*="unit-"] {
      padding: 0.5 * $unit-padding;
    }
  }

  & + * {
    clear: left;
  }
}

// div
.new-line {
  float: left;
  width: 100%;
}

@for $index from 1 through $GRID_SYSTEM {
  .unit-#{$index} { width: percentage($index / $GRID_SYSTEM); }
}

@for $index from 1 through $GRID_SYSTEM {
  .push-#{$index} { margin-left: percentage($index / $GRID_SYSTEM); }
}

@media screen and (max-width: $sm-and-below) {
  .grid.tight.no-tight-sm {
    @include tight-cancel($unit-padding);
  }

  .grid.tight-sm {
    @include tight-responsive($unit-padding);
  }

  @for $index from 1 through $GRID_SYSTEM {
    .unit-#{$index}-sm { width: percentage($index / $GRID_SYSTEM); }
  }

  @for $index from 1 through $GRID_SYSTEM {
    .push-#{$index}-sm { margin-left: percentage($index / $GRID_SYSTEM); }
  }
}

@media screen and (min-width: $md-lower) and (max-width: $md-upper) {
  .grid.tight.no-tight-md {
    @include tight-cancel($unit-padding);
  }

  .grid.tight-md {
    @include tight-responsive($unit-padding);
  }

  @for $index from 1 through $GRID_SYSTEM {
    .unit-#{$index}-md { width: percentage($index / $GRID_SYSTEM); }
  }

  @for $index from 1 through $GRID_SYSTEM {
    .push-#{$index}-md { margin-left: percentage($index / $GRID_SYSTEM); }
  }

}

@media screen and (min-width: $lg-and-above) {
  .grid.tight.no-tight-lg {
    @include tight-cancel($unit-padding);
  }

  .grid.tight-lg {
    @include tight-responsive($unit-padding);
  }

  @for $index from 1 through $GRID_SYSTEM {
    .unit-#{$index}-lg { width: percentage($index / $GRID_SYSTEM); }
  }

  @for $index from 1 through $GRID_SYSTEM {
    .push-#{$index}-lg { margin-left: percentage($index / $GRID_SYSTEM); }
  }
}
