/**
 * @file
 * The base less file for Bootstrap Paragraphs.
 *
 * 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));
  }
}

/**
 * Paragraph Section CSS.
 *
 * Table of Contents:
 *   Base Paragraph Styling
 *   Widths
 *   Nesting
 *
 * The following classes are available if the different Paragraph types need
 * their own individual styling.
 *
 * .paragraph.paragraph--type--bp-accordion
 * .paragraph.paragraph--type--bp-blank
 * .paragraph.paragraph--type--bp-carousel
 * .paragraph.paragraph--type--bp-columns
 * .paragraph.paragraph--type--bp-columns-three-uneven
 * .paragraph.paragraph--type--bp-columns-two-uneven
 * .paragraph.paragraph--type--bp-contact
 * .paragraph.paragraph--type--bp-image
 * .paragraph.paragraph--type--bp-modal
 * .paragraph.paragraph--type--bp-simple
 * .paragraph.paragraph--type--bp-tabs
 * .paragraph.paragraph--type--bp-view
 */

/**
 * Base Paragraph Styling.
 *
 * Here we style the .paragraph as a Bootstrap .row and .paragraph__column as a
 * full width column.  We also add padding to the bottom.
 */
.paragraph {
  &:before,
  &:after {
    content: " ";
    display: table;
    table-layout: fixed;
  }

  &:after {
    clear: both;
  }

  display: table;
  margin-left: 0;
  margin-right: 0;
  table-layout: fixed;
  width: 100%;
}

.paragraph > .paragraph__column {
  .make-sm-column(12);
  padding-bottom: 30px;
}

/* Remove bottom padding on nested paragraphs. */
.paragraph--type--bp-carousel .paragraph:last-of-type > .paragraph__column,
.paragraph--type--bp-columns .paragraph:last-of-type > .paragraph__column,
.paragraph--type--bp-columns-three-uneven .paragraph:last-of-type
  > .paragraph__column,
.paragraph--type--bp-columns-two-uneven .paragraph:last-of-type
  > .paragraph__column,
.paragraph--type--bp-tabs .paragraph:last-of-type > .paragraph__column {
  padding-bottom: 0;
}

/**
 * Widths.
 *
 * Here we style the widths for each paragraph.
 */
/* Adds Width Element -- Tiny. */
.paragraph.paragraph--width--tiny > .paragraph__column {
  .make-sm-column(4);
  .make-sm-column-offset(4);
}

/* Adds Width Element -- Narrow. */
.paragraph.paragraph--width--narrow > .paragraph__column {
  .make-sm-column(6);
  .make-sm-column-offset(3);
}

/* Adds Width Element -- Medium. */
.paragraph.paragraph--width--medium > .paragraph__column {
  .make-sm-column(8);
  .make-sm-column-offset(2);
}

/* Adds Width Element -- Wide. */
.paragraph.paragraph--width--wide > .paragraph__column {
  .make-sm-column(10);
  .make-sm-column-offset(1);
}

/* Adds Width Element -- Full. */
.paragraph.paragraph--width--full > .paragraph__column {
  .make-sm-column(12);
}

/**
 * Nesting Paragraphs.
 *
 * Here are some helpers for temove margin/padding when nesting bundles.
 */
/* Resets Base Paragraph Styling for Nested Paragraphs. */
.paragraph .paragraph,
.paragraph .paragraph .paragraph {
  margin-left: 0;
  margin-right: 0;
}

.paragraph > .paragraph__column .paragraph > .paragraph__column,
.paragraph
  > .paragraph__column .paragraph
  > .paragraph__column .paragraph
  > .paragraph__column {
  float: none;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
  width: auto;
}
