/**
 * Create ratio-bound content blocks, to keep media (e.g. images, videos) in
 * their correct aspect ratios.
 *
 * http://alistapart.com/article/creating-intrinsic-ratios-for-video
 *
 * @package  generator-mh-boilerplate
 * @author   Martin Herweg <info@martinherweg.de>
 * @author   David Hellmann <davidhellmann.com@gmail.com>
 * @author   Harry Roberts <https://github.com/inuitcss/inuitcss>
 */

/*
|--------------------------------------------------------------------------
| _objects.ratio.scss
|--------------------------------------------------------------------------
*/


$app-ratios: (
  2:1,
  3:2,
  4:3,
  16:9
) !default;

/**
 * 1. Default cropping is a 1:1 ratio (i.e. a perfect square).
 */

.o-ratio {
  position: relative;
  display: block;
  overflow: hidden;

  &::before {
    display: block;
    width: 100%;

    padding-bottom: 100%; /* [1] */

    content: '';
  }

}



.o-ratio__content,
.o-ratio > iframe,
.o-ratio > embed,
.o-ratio > object {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 100%;
}




/*
|--------------------------------------------------------------------------
| Ratio Variants
|--------------------------------------------------------------------------
*/
/**
 * Generate a series of ratio classes to be used like so:
 *
 *   <div class="o-ratio  o-ratio--16:9">
 *
 */

/* stylelint-disable */


@each $antecedent, $consequent in $app-ratios {

  @if (type-of($antecedent) != number) {
    @error "`#{$antecedent}` needs to be a number."
  }

  @if (type-of($consequent) != number) {
    @error "`#{$consequent}` needs to be a number."
  }

  .o-ratio--#{$antecedent}\:#{$consequent}:before {
    padding-bottom: ($consequent/$antecedent) * 100%;
  }
}

/* stylelint-enable */