/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------

utilities/mixins-grid.less

--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */






/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------

Container (Fixed)

--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */

.container-fixed(@gutter: @grid-gutter-width) {
  
  margin-left:  (@gutter / 2);
  margin-right: (@gutter / 2);

  &:extend(.clearfix all);

}






/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------

Row

--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */

.make-row(@gutter: @grid-gutter-width) {

  margin-left:  (@gutter / -2);
  margin-right: (@gutter / -2);

  &:extend(.clearfix all);

}






/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------

Columns

--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */



/* -----------------------------------------------------------------------------
Mini Column
----------------------------------------------------------------------------- */

.make-mini-column(@columns; @gutter: @grid-gutter-width) {

  position: relative;
  float: left;
  width: percentage((@columns / @grid-columns));
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

}

.make-mini-column-offset(@columns) {

  margin-left: percentage((@columns / @grid-columns));

}

.make-mini-column-push(@columns) {

  left: percentage((@columns / @grid-columns));

}

.make-mini-column-pull(@columns) {

  right: percentage((@columns / @grid-columns));

}



/* -----------------------------------------------------------------------------
Small Column
----------------------------------------------------------------------------- */

.make-small-column(@columns; @gutter: @grid-gutter-width) {

  position: relative;
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  @media (min-width: @screen-small-min) {

    float: left;
    width: percentage((@columns / @grid-columns));

  }

}

.make-small-column-offset(@columns) {

  @media (min-width: @screen-small-min) {

    margin-left: percentage((@columns / @grid-columns));

  }

}

.make-small-column-push(@columns) {

  @media (min-width: @screen-small-min) {

    left: percentage((@columns / @grid-columns));

  }

}

.make-small-column-pull(@columns) {

  @media (min-width: @screen-small-min) {

    right: percentage((@columns / @grid-columns));

  }

}



/* -----------------------------------------------------------------------------
Medium Column
----------------------------------------------------------------------------- */

.make-medium-column(@columns; @gutter: @grid-gutter-width) {

  position: relative;
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  @media (min-width: @screen-medium-min) {

    float: left;
    width: percentage((@columns / @grid-columns));

  }

}

.make-medium-column-offset(@columns) {

  @media (min-width: @screen-medium-min) {

    margin-left: percentage((@columns / @grid-columns));

  }

}

.make-medium-column-push(@columns) {

  @media (min-width: @screen-medium-min) {

    left: percentage((@columns / @grid-columns));

  }

}

.make-medium-column-pull(@columns) {

  @media (min-width: @screen-medium-min) {

    right: percentage((@columns / @grid-columns));

  }

}



/* -----------------------------------------------------------------------------
Large Column
----------------------------------------------------------------------------- */

.make-large-column(@columns; @gutter: @grid-gutter-width) {

  position: relative;
  min-height: 1px;
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  @media (min-width: @screen-large-min) {

    float: left;
    width: percentage((@columns / @grid-columns));

  }

}

.make-large-column-offset(@columns) {

  @media (min-width: @screen-large-min) {

    margin-left: percentage((@columns / @grid-columns));

  }

}

.make-large-column-push(@columns) {

  @media (min-width: @screen-large-min) {

    left: percentage((@columns / @grid-columns));

  }

}

.make-large-column-pull(@columns) {

  @media (min-width: @screen-large-min) {

    right: percentage((@columns / @grid-columns));

  }

}