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

/* Adds float so it behaves like the rest of the Paragraphs. */
.paragraph--type--bp-carousel {
  float: left;
}

/**
 * Widths.
 *
 * Here we style the widths for each paragraph.
 */
/* Adds Width Element -- Tiny. */
.paragraph.paragraph--width--tiny.paragraph--type--bp-carousel > .carousel-inner {
  .make-sm-column(4);
  .make-sm-column-offset(4);
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Adds Width Element -- Narrow. */
.paragraph.paragraph--width--narrow.paragraph--type--bp-carousel
  > .carousel-inner {
  .make-sm-column(6);
  .make-sm-column-offset(3);
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Adds Width Element -- Medium. */
.paragraph.paragraph--width--medium.paragraph--type--bp-carousel
  > .carousel-inner {
  .make-sm-column(8);
  .make-sm-column-offset(2);
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Adds Width Element -- Wide. */
.paragraph.paragraph--width--wide.paragraph--type--bp-carousel
  > .carousel-inner {
  .make-sm-column(10);
  .make-sm-column-offset(1);
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Adds Width Element -- Full. */
.paragraph.paragraph--width--full.paragraph--type--bp-carousel
  > .carousel-inner {
  .make-sm-column(12);
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Removes padding-left/padding-right added by columns in a carousel. */
.paragraph.paragraph--type--bp-carousel .paragraph--type--bp-columns
  > .paragraph__column,
.paragraph.paragraph--type--bp-carousel .paragraph--type--bp-columns-two-uneven
  > .paragraph__column,
.paragraph.paragraph--type--bp-carousel .paragraph--type--bp-columns-three-uneven
  > .paragraph__column {
  padding-left: 0;
  padding-right: 0;
}
