////
//// @author  David Annez
//// @group   Grid
////

/// Adds a negative left and right margin of `$gutter-width / 2` to normalise the outer padding of columns
///
/// @param {String} $breakpoint [$default-grid-breakpoint]
///   The breakpoint where you want the margin to be set

@mixin us-row($breakpoint: $default-grid-breakpoint) {
  @extend %clearfix;
  @if $breakpoint == "mobile" {
    margin-right: -$gutter-width / 2;
    margin-left: -$gutter-width / 2;
  } @else {
    @include respond-to($breakpoint, true) {
      margin-right: -$gutter-width / 2;
      margin-left: -$gutter-width / 2;
    }
  }
}

/// The grid column builder for uSwitch - floats, sets a % width and adds left and right padding for column gutters
///
/// @param {Number (unitless)} $cols
///   The number of columns to make the selected element

@mixin us-col($cols) {
  float: left;
  padding-left: $gutter-width / 2;
  padding-right: $gutter-width / 2;
  width: col-width($cols);
}

/// Grid class and extend generator for ease of class/no-class use
///
/// @access private
///
/// @param {String} $selector
///   The CSS selector to use for building the the grid placeholders and classes
///
/// @param {Number (unitless)} $cols
///   The number of columns for the `$selector`
///
/// @param {Bool} $html-classes [$html-grid-classes]
///   If set to false will only output placeholder classes for selective CSS generation

@mixin _grid-class($selector, $cols, $html-classes: $html-grid-classes) {
  @if $html-classes {
    .#{$selector}-#{$cols},
    %#{$selector}-#{$cols} {
      @include us-col($cols);
    }
  } @else {
    %#{$selector}-#{$cols} {
      @include us-col($cols);
    }
  }
}

%us-grid-row {
  @include us-row;
}

%container {
  @extend %clearfix;
  position: relative;
  padding: 0 $gutter-width / 2;
  margin-right: auto;
  margin-left: auto;

  @include respond-to(tablet) {
    max-width: $tablet-container-width;
  }

  @include respond-to(desktop, true) {
    max-width: $desktop-container-width;
  }

  @include respond-to(large-desktop) {
    max-width: $large-container-width;
  }
}

@import "ustyle/components/grid-classes";