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

/* Three Uneven Columns Paragraph. */
.paragraph--type--bp-columns-three-uneven {
  &.paragraph--style--25-50-25 {
    .paragraph--type--bp-columns-three-uneven__3col-column1,
    .paragraph--type--bp-columns-three-uneven__3col-column3 {
      .make-sm-column(3);
    }
    .paragraph--type--bp-columns-three-uneven__3col-column2 {
      .make-sm-column(6);
    }
  }

  &.paragraph--style--50-25-25 {
    .paragraph--type--bp-columns-three-uneven__3col-column1 {
      .make-sm-column(6);
    }
    .paragraph--type--bp-columns-three-uneven__3col-column2,
    .paragraph--type--bp-columns-three-uneven__3col-column3 {
      .make-sm-column(3);
    }
  }

  &.paragraph--style--25-25-50 {
    .paragraph--type--bp-columns-three-uneven__3col-column1,
    .paragraph--type--bp-columns-three-uneven__3col-column2 {
      .make-sm-column(3);
    }
    .paragraph--type--bp-columns-three-uneven__3col-column3 {
      .make-sm-column(6);
    }
  }

  &.paragraph--style--16-66-16 {
    .paragraph--type--bp-columns-three-uneven__3col-column1,
    .paragraph--type--bp-columns-three-uneven__3col-column3 {
      .make-sm-column(2);
    }
    .paragraph--type--bp-columns-three-uneven__3col-column2 {
      .make-sm-column(8);
    }
  }

  &.paragraph--style--66-16-16 {
    .paragraph--type--bp-columns-three-uneven__3col-column1 {
      .make-sm-column(8);
    }
    .paragraph--type--bp-columns-three-uneven__3col-column2,
    .paragraph--type--bp-columns-three-uneven__3col-column3 {
      .make-sm-column(2);
    }
  }

  &.paragraph--style--16-16-66 {
    .paragraph--type--bp-columns-three-uneven__3col-column1,
    .paragraph--type--bp-columns-three-uneven__3col-column2 {
      .make-sm-column(2);
    }
    .paragraph--type--bp-columns-three-uneven__3col-column3 {
      .make-sm-column(8);
    }
  }
}
