Text Crop

@mixin text-crop(
  $line-height: 1.3,
  $top-adjustment: 0px,
  $bottom-adjustment: 0px
) {
  // Configured in Step 1
  $top-crop: 2;
  $bottom-crop: 3;
  $crop-font-size: 12;
  $crop-line-height: 1.2;

  // Apply values to calculate em-based margins that work with any font size
  $dynamic-top-crop: max(
      ($top-crop + ($line-height - $crop-line-height) * ($crop-font-size / 2)),
      0
    ) / $crop-font-size;
  $dynamic-bottom-crop: max(
      (
        $bottom-crop + ($line-height - $crop-line-height) *
          ($crop-font-size / 2)
      ),
      0
    ) / $crop-font-size;

  // Mixin output
  line-height: $line-height;

  &::before,
  &::after {
    content: "";
    display: block;
    height: 0;
    width: 0;
  }

  &::before {
    margin-bottom: calc(-#{$dynamic-top-crop}em + #{$top-adjustment});
  }

  &::after {
    margin-top: calc(-#{$dynamic-bottom-crop}em + #{$bottom-adjustment});
  }
}