/* ==========================================================================
 * CROP OBJECT
 * ========================================================================== */

/**
 * A list of cropping ratios that get generated as modifier classes.
 */
$cropRatios: (
  (2:1),
  (4:3),
  (16:9),
) !default;


/**
 * Provide a cropping container in order to display media (usually images)
 * cropped to certain ratios.
 *
 * 1. Set up a positioning context in which the image can sit.
 * 2. This is the crucial part: where the cropping happens.
 */
.o-crop {
  position: relative; /* [1] */
  display: block;
  overflow: hidden; /* [2] */
}


/**
 * Apply this class to the content (usually `img`) that needs cropping.
 *
 * 1. Image's default positioning is top-left in the cropping box.
 * 2. Make sure the media doesn't stop itself too soon.
 */
.o-crop__content {
  position: absolute;
  top: 0; /* [1] */
  left: 0; /* [1] */
  max-width: none; /* [2] */
}


/* Alignment variants
 *
 * We can position the media in different locations within the cropping area
 * ========================================================================== */

.o-crop__content--right {
  right: 0;
  left: auto;
}

.o-crop__content--bottom {
  top: auto;
  bottom: 0;
}

.o-crop__content--center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* stylelint-disable */




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

@each $crop in $cropRatios {
  @each $antecedent, $consequent in $crop {
    @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-crop--#{$antecedent}\:#{$consequent} {
      padding-bottom: ($consequent/$antecedent) * 100%;
    }
  }
}

/* stylelint-enable */