/**
 * @file
 * The less file for Bootstrap Paragraphs Columns Bundle.
 *
 * Can be quickly compiled to CSS at http://lesscss.org/less-preview/.
 */

/**
 * Bootstrap 3 Variables and Mixins Needed.
 *
 * Includes so we can compile the CSS.
 */
@screen-sm-min: 768px;
@grid-columns: 12;
@grid-gutter-width: 30px;

// Generate the small columns
.make-sm-column(@columns; @gutter: 30px) {
  position: relative;
  min-height: 1px;
  padding-left: (@gutter / 2);
  padding-right: (@gutter / 2);

  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

/* Removes Padding on Columns (Padding is on columns inside). */
.paragraph.paragraph--type--bp-columns > .paragraph__column,
.paragraph.paragraph--type--bp-columns-two-uneven > .paragraph__column,
.paragraph.paragraph--type--bp-columns-three-uneven > .paragraph__column {
  padding-left: 0;
  padding-right: 0;
}

/* Columns Modifiers inside of Columns Element  */
.paragraph.paragraph--type--bp-columns .paragraph--type--bp-columns__6col {
  .make-sm-column(2);
}

.paragraph.paragraph--type--bp-columns .paragraph--type--bp-columns__5col {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;

  @media (min-width: 768px) {
    float: left;
    width: 20%;
  }
}

.paragraph.paragraph--type--bp-columns .paragraph--type--bp-columns__4col {
  .make-sm-column(3);
}

.paragraph.paragraph--type--bp-columns .paragraph--type--bp-columns__3col {
  .make-sm-column(4);
}

.paragraph.paragraph--type--bp-columns .paragraph--type--bp-columns__2col {
  .make-sm-column(6);
}

.paragraph.paragraph--type--bp-columns .paragraph--type--bp-columns__1col {
  .make-sm-column(12);
}

/* These allow us to change the width on a single paragraph in a Multicolumn. */
.paragraph--type--bp-columns__1col .paragraph.paragraph--width--tiny
  > .paragraph__column {
  .make-sm-column(4);
  .make-sm-column-offset(4);
}

.paragraph--type--bp-columns__1col .paragraph.paragraph--width--narrow
  > .paragraph__column {
  .make-sm-column(6);
  .make-sm-column-offset(3);
}

.paragraph--type--bp-columns__1col .paragraph.paragraph--width--medium
  > .paragraph__column {
  .make-sm-column(8);
  .make-sm-column-offset(2);
}

.paragraph--type--bp-columns__1col .paragraph.paragraph--width--wide
  > .paragraph__column {
  .make-sm-column(10);
  .make-sm-column-offset(1);
}

.paragraph--type--bp-columns__1col .paragraph.paragraph--width--full
  > .paragraph__column {
  .make-sm-column(12);
}
