// Objects :: Ratio

// Ratio map
$fabric-ratios: (
  '2\\:1': (
    2: 1,
  ),
  '4\\:3': (
    4: 3,
  ),
  '16\\:9': (
    16: 9,
  ),
) !default;

// Ratio content blocks
.o-ratio {
  position: relative;
  display: block;

  &:before {
    content: '';
    display: block;
    width: 100%;
    padding-bottom: 100%;
  }
}

.o-ratio__content,
.o-ratio > iframe,
.o-ratio > embed,
.o-ratio > object {
  @include absolute(top 0 left 0 right 0 bottom 0);
  @include fabric-size(100%);
}

// Ratio variants
@each $ratio-name, $ratio-value in $fabric-ratios {
  @each $antecedent, $consequent in $ratio-value {
    @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--#{$ratio-name}:before {
      padding-bottom: ($consequent/$antecedent) * 100%;
    }
  }
}

// Contain modifier
.o-ratio--img-contain {
  > .o-ratio__content {
    @include fabric-size(auto);
    margin: auto;
    max-height: 100%;
    max-width: 100%;
  }
}