@import './variables.less';

.paragraphType(@fontFamily) {
  @thisFontSize: round(extract(@range, 1), 3);
  @push: round((@thisFontSize * @paragraphPushFactor), 3);
  @pull: round((@push * @paragraphPullFactor), 3);

  #copy {
    & p,
    ul:not(.mask-p) > li,
    ol:not(.mask-p) > li,
    .mask-p {
      font-family: @fontFamily;
      font-weight: @weight;
      font-size: ~'@{thisFontSize}px';
    }

    & p,
    .mask-p,
    .margin-p {
      margin-bottom: ~'@{push}px';
    }

    & p + p,
    p + .mask-p,
    p + .margin-p {
      margin-top: ~'-@{pull}px';
    }

    & .mask-p + p,
    .mask-p + .mask-p,
    .mask-p + .margin-p {
      margin-top: ~'-@{pull}px';
    }

    & .margin-p + p,
    .margin-p + .mask-p,
    .margin-p + .margin-p {
      margin-top: ~'-@{pull}px';
    }
  }
}

.responsiveParagraph(@breakpoint, @index) {
  @thisFontSize: round(extract(@range, 1) + (@increment * (@index)), 3);
  @push: round((@thisFontSize * @paragraphPushFactor), 3);
  @pull: round((@push * @paragraphPullFactor), 3);

  #copy {
    @media (min-width: ~'@{breakpoint}px') {
      & p,
      ul:not(.mask-p) > li,
      ol:not(.mask-p) > li,
      .mask-p {
        font-size: ~'@{thisFontSize}px';
      }

      & p,
      .mask-p,
      .margin-p {
        margin-bottom: ~'@{push}px';
      }

      & p + p,
      p + .mask-p,
      p + .margin-p {
        margin-top: ~'-@{pull}px';
      }

      & .mask-p + p,
      .mask-p + .mask-p,
      .mask-p + .margin-p {
        margin-top: ~'-@{pull}px';
      }

      & .margin-p + p,
      .margin-p + .mask-p,
      .margin-p + .margin-p {
        margin-top: ~'-@{pull}px';
      }
    }
  }
}