////////////////////////////////////////////////////////////////////////////////
/// Crop                                                                   #crop
////////////////////////////////////////////////////////////////////////////////

@use 'sass:math';
@use 'sass:map';
@use './modules/unit';


/// @see http://text-crop.eightshapes.com/?typeface-selection=google-font&typeface=Lato&custom-typeface-name=Helvetica&custom-typeface-url=&custom-typeface-weight=400&custom-typeface-style=normal&weight-and-style=100&size=36&line-height=1.2&top-crop=9&bottom-crop=8

@function offset($font-size, $line-height, $crop) {
  $crop        : unit.strip($crop);
  $font-size   : unit.strip($font-size) * 10;
  $line-height : unit.strip($line-height);
  @return math.div(math.round(math.div(math.max(($crop + ($line-height) * ($font-size / 2)), 0), $font-size) * 100), 100);
}

@mixin crop2($font-size, $line-height, $crop-top, $crop-bottom ) {
  
  line-height: $line-height;

  @if $crop-top {
    &::before {
      content: '';
      display: block;
      height: 0;
      width: 0;
      margin-top: - #{offset($font-size, $line-height, $crop-top)}em;

    }
  }

  @if $crop-bottom {
    &::after {
      content: '';
      display: block;
      height: 0;
      width: 0;
      margin-bottom: - #{offset($font-size, $line-height, $crop-bottom)}em;
    }
  }

}

@mixin crop($font-size, $line-height, $crop-top, $crop-bottom ) {

  $crop-top    : unit.strip($crop-top);
  $crop-bottom : unit.strip($crop-bottom);
  $font-size   : unit.strip($font-size) * 10;
  $line-height : unit.strip($line-height);

  $crop-line-height: 1.2;

  line-height: $line-height;


  @if $crop-top {
    $margin-top: math.div(math.round(math.div(math.max(($crop-top + ($line-height - $crop-line-height) * ($font-size / 2)), 0), $font-size) * 100), 100);
    &::before {
      content: '';
      display: block;
      height: 0;
      width: 0;
      margin-top: - #{$margin-top}em;

    }
  }

  @if $crop-bottom {
    $margin-bottom: math.div(math.round(math.div(math.max(($crop-bottom + ($line-height - $crop-line-height) * ($font-size / 2)), 0), $font-size) * 100), 100);
    &::after {
      content: '';
      display: block;
      height: 0;
      width: 0;
      margin-bottom: - #{$margin-bottom}em;
    }
  }

}


@mixin crop3($crop-font-size: 51, $crop-line-height: 1.2, $top-crop: 13, $bottom-crop: 11) {
  // Configured in Step 1
  $line-height: 1.3;
  $crop-font-size   : unit.strip($crop-font-size) * 10;


  // Apply values to calculate em-based margins that work with any font size
  $dynamic-top-crop: math.div(max(($top-crop + ($line-height - $crop-line-height) * ($crop-font-size / 2)), 0), $crop-font-size);
  $dynamic-bottom-crop: math.div(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: -#{$dynamic-top-crop}+em;
  }

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

@mixin remove {
  &::before, &::after { display:none; }
}