@import './variables.less';

.headingType(@fontFamily) {
  @thisFontSize: round(extract(@range, 1), 3);

  @h6: round(@thisFontSize, 3);
  @h5: round(@thisFontSize, 3);
  @h4: round((@h5 * @scaleFactor), 3);
  @h3: round((@h4 * @scaleFactor), 3);
  @h2: round((@h3 * @scaleFactor), 3);
  @h1: round((@h2 * @scaleFactor), 3);

  @mb1: round(@h1 * @postHeadingPushFactor, 3);
  @mb2: round(@h2 * @postHeadingPushFactor, 3);
  @mb3: round(@h3 * @postHeadingPushFactor, 3);
  @mb4: round(@h4 * @postHeadingPushFactor, 3);
  @mb5: round(@h5 * @postHeadingPushFactor, 3);
  @mb6: round(@h6 * @postHeadingPushFactor, 3);

  @mt1: round(@mb1 * @textPullFactor, 3);
  @mt2: round(@mb2 * @textPullFactor, 3);
  @mt3: round(@mb3 * @textPullFactor, 3);
  @mt4: round(@mb4 * @textPullFactor, 3);
  @mt5: round(@mb5 * @textPullFactor, 3);
  @mt6: round(@mb6 * @textPullFactor, 3);

  #copy {
    & h1,
    .mask-h1 {
      font-family: @fontFamily;
      font-weight: extract(@weights, 2);
      font-size: ~'@{h1}px';
      margin-top: 0px;
      margin-bottom: ~'@{mb1}px';
    }
    & h2,
    .mask-h2 {
      font-family: @fontFamily;
      font-weight: extract(@weights, 2);
      font-size: ~'@{h2}px';
      margin-top: 0px;
      margin-bottom: ~'@{mb2}px';
    }
    & h3,
    .mask-h3 {
      font-family: @fontFamily;
      font-weight: extract(@weights, 2);
      font-size: ~'@{h3}px';
      margin-top: 0px;
      margin-bottom: ~'@{mb3}px';
    }
    & h4,
    .mask-h4 {
      font-family: @fontFamily;
      font-weight: extract(@weights, 2);
      font-size: ~'@{h4}px';
      margin-top: 0px;
      margin-bottom: ~'@{mb4}px';
    }
    & h5,
    .mask-h5 {
      font-family: @fontFamily;
      font-weight: extract(@weights, 1);
      font-size: ~'@{h5}px';
      margin-top: 0px;
      margin-bottom: ~'@{mb5}px';
    }
    & h6,
    .mask-h6 {
      font-family: @fontFamily;
      font-weight: extract(@weights, 1);
      font-size: ~'@{h6}px';
      margin-top: 0px;
      margin-bottom: ~'@{mb6}px';
    }
    h1 + p,
    h1 + .mask-p,
    h1 + .margin-p {
      margin-top: ~'-@{mt1}px';
    }
    h2 + p,
    h2 + .mask-p,
    h2 + .margin-p {
      margin-top: ~'-@{mt2}px';
    }
    h3 + p,
    h3 + .mask-p,
    h3 + .margin-p {
      margin-top: ~'-@{mt3}px';
    }
    h4 + p,
    h4 + .mask-p,
    h4 + .margin-p {
      margin-top: ~'-@{mt4}px';
    }
    h5 + p,
    h5 + .mask-p,
    h5 + .margin-p {
      margin-top: ~'-@{mt5}px';
    }
    h6 + p,
    h6 + .mask-p,
    h6 + .margin-p {
      margin-top: ~'-@{mt6}px';
    }
  }
}

.responsiveHeading(@breakpoint, @index) {
  @thisFontSize: round(extract(@range, 1) + (@increment * (@index)), 3);
  @h6: round(@thisFontSize, 3);
  @h5: round(@thisFontSize, 3);
  @h4: round((@h5 * @scaleFactor), 3);
  @h3: round((@h4 * @scaleFactor), 3);
  @h2: round((@h3 * @scaleFactor), 3);
  @h1: round((@h2 * @scaleFactor), 3);

  @mb1: round(@h1 * @postHeadingPushFactor, 3);
  @mb2: round(@h2 * @postHeadingPushFactor, 3);
  @mb3: round(@h3 * @postHeadingPushFactor, 3);
  @mb4: round(@h4 * @postHeadingPushFactor, 3);
  @mb5: round(@h5 * @postHeadingPushFactor, 3);
  @mb6: round(@h6 * @postHeadingPushFactor, 3);

  @mt1: round(@mb1 * @textPullFactor, 3);
  @mt2: round(@mb2 * @textPullFactor, 3);
  @mt3: round(@mb3 * @textPullFactor, 3);
  @mt4: round(@mb4 * @textPullFactor, 3);
  @mt5: round(@mb5 * @textPullFactor, 3);
  @mt6: round(@mb6 * @textPullFactor, 3);

  #copy {
    @media (min-width: ~'@{breakpoint}px') {
      h1,
      .mask-h1 {
        font-size: ~'@{h1}px';
        margin-top: 0px;
        margin-bottom: ~'@{mb1}px';
      }
      h2,
      .mask-h2 {
        font-size: ~'@{h2}px';
        margin-top: 0px;
        margin-bottom: ~'@{mb2}px';
      }
      h3,
      .mask-h3 {
        font-size: ~'@{h3}px';
        margin-top: 0px;
        margin-bottom: ~'@{mb3}px';
      }
      h4,
      .mask-h4 {
        font-size: ~'@{h4}px';
        margin-top: 0px;
        margin-bottom: ~'@{mb4}px';
      }
      h5,
      .mask-h5 {
        font-size: ~'@{h5}px';
        margin-top: 0px;
        margin-bottom: ~'@{mb5}px';
      }
      h6,
      .mask-h6 {
        font-size: ~'@{h6}px';
        margin-top: 0px;
        margin-bottom: ~'@{mb6}px';
      }
      h1 + p,
      h1 + .mask-p,
      h1 + .margin-p {
        margin-top: ~'-@{mt1}px';
      }
      h2 + p,
      h2 + .mask-p,
      h2 + .margin-p {
        margin-top: ~'-@{mt2}px';
      }
      h3 + p,
      h3 + .mask-p,
      h3 + .margin-p {
        margin-top: ~'-@{mt3}px';
      }
      h4 + p,
      h4 + .mask-p,
      h4 + .margin-p {
        margin-top: ~'-@{mt4}px';
      }
      h5 + p,
      h5 + .mask-p,
      h5 + .margin-p {
        margin-top: ~'-@{mt5}px';
      }
      h6 + p,
      h6 + .mask-p,
      h6 + .margin-p {
        margin-top: ~'-@{mt6}px';
      }
    }
  }
}