@use 'sass:math';
@use './vars' as *;
@use './vars-breakpoints' as *;
@use './media-queries' as *;
@use './sizing-vars' as *;

/* ==========================================================================
   Design System
   Base styles
   ========================================================================== */

@mixin heading-1(
  $has-margin-bottom: true,
  $has-margin-top: true,
  $is-responsive: true
) {
  font-size: math.div($size-i, $base-font-size-px) + em;
  font-size-adjust: var(--font-adjust-h1);
  font-weight: 600;
  letter-spacing: inherit;
  line-height: 1.25;
  text-transform: inherit;

  @if $has-margin-bottom {
    margin-bottom: math.div(15px, $size-i) + em;
  }

  @if $has-margin-top {
    p + &,
    ul + &,
    ol + &,
    dl + &,
    figure + &,
    img + &,
    table + &,
    blockquote + & {
      margin-top: math.div(60px, $size-i) + em;
    }

    @if $is-responsive {
      // Mobile only.
      @include respond-to-max($bp-xs-max) {
        p + &,
        ul + &,
        ol + &,
        dl + &,
        figure + &,
        img + &,
        table + &,
        blockquote + & {
          margin-top: math.div(45px, $size-ii) + em;
        }
        h2 + &,
        .h2 + &,
        h3 + &,
        .h3 + &,
        h4 + &,
        .h4 + &,
        h5 + &,
        .h5 + &,
        h6 + &,
        .h6 + & {
          margin-top: math.div(30px, $size-ii) + em;
        }
      }
    }
  }

  @if $is-responsive {
    // Mobile only.
    @include respond-to-max($bp-xs-max) {
      @include heading-2(
        $has-margin-bottom,
        $has-margin-top,
        $is-responsive: false
      );
    }
  }
}

@mixin heading-2(
  $has-margin-bottom: true,
  $has-margin-top: true,
  $is-responsive: true,
  $font-weight: 600
) {
  font-size: math.div($size-ii, $base-font-size-px) + em;
  font-size-adjust: var(--font-adjust-h2);
  font-weight: $font-weight;
  letter-spacing: inherit;
  line-height: 1.25;
  text-transform: inherit;

  @if $has-margin-bottom {
    margin-bottom: math.div(15px, $size-ii) + em;
  }

  @if $has-margin-top {
    p + &,
    ul + &,
    ol + &,
    dl + &,
    figure + &,
    img + &,
    table + &,
    blockquote + & {
      margin-top: math.div(45px, $size-ii) + em;
    }

    h1 + &,
    .h1 + &,
    h3 + &,
    .h3 + &,
    h4 + &,
    .h4 + &,
    h5 + &,
    .h5 + &,
    h6 + &,
    .h6 + & {
      margin-top: math.div(30px, $size-ii) + em;
    }

    @if $is-responsive {
      // Mobile only.
      @include respond-to-max($bp-xs-max) {
        p + &,
        ul + &,
        ol + &,
        dl + &,
        figure + &,
        img + &,
        table + &,
        blockquote + & {
          margin-top: math.div(30px, $size-iii) + em;
        }
      }
    }
  }

  @if $is-responsive {
    // Mobile only.
    @include respond-to-max($bp-xs-max) {
      @include heading-3(
        $has-margin-bottom,
        $has-margin-top,
        $is-responsive: false,
        $font-weight: $font-weight
      );
    }
  }
}

@mixin heading-3(
  $has-margin-bottom: true,
  $has-margin-top: true,
  $is-responsive: true,
  $font-weight: normal
) {
  font-size: math.div($size-iii, $base-font-size-px) + em;
  font-size-adjust: var(--font-adjust-h3);
  font-weight: $font-weight;
  letter-spacing: inherit;
  line-height: 1.25;
  text-transform: inherit;

  @if $has-margin-bottom {
    margin-bottom: math.div(15px, $size-iii) + em;
  }

  @if $has-margin-top {
    p + &,
    ul + &,
    ol + &,
    dl + &,
    figure + &,
    img + &,
    table + &,
    blockquote + &,
    h1 + &,
    .h1 + &,
    h2 + &,
    .h2 + &,
    h4 + &,
    .h4 + &,
    h5 + &,
    .h5 + &,
    h6 + &,
    .h6 + & {
      margin-top: math.div(30px, $size-iii) + em;
    }
  }

  @if $is-responsive {
    // Mobile only.
    @include respond-to-max($bp-xs-max) {
      @include heading-4(
        $has-margin-bottom,
        $has-margin-top,
        $is-responsive: false,
        $font-weight: $font-weight
      );
    }
  }
}

@mixin heading-4(
  $has-margin-bottom: true,
  $has-margin-top: true,
  $is-responsive: true,
  $font-weight: 500
) {
  font-size: math.div($size-iv, $base-font-size-px) + em;
  font-size-adjust: var(--font-adjust-h4);
  font-weight: $font-weight;
  letter-spacing: inherit;
  line-height: 1.25;
  text-transform: inherit;

  @if $has-margin-bottom {
    margin-bottom: math.div(15px, $size-iv) + em;
  }

  @if $has-margin-top {
    p + &,
    ul + &,
    ol + &,
    dl + &,
    figure + &,
    img + &,
    table + &,
    blockquote + &,
    h1 + &,
    .h1 + &,
    h2 + &,
    .h2 + &,
    h3 + &,
    .h3 + &,
    h5 + &,
    .h5 + &,
    h6 + &,
    .h6 + & {
      margin-top: math.div(30px, $size-iv) + em;
    }
  }

  @if $is-responsive {
    // Mobile only.
    @include respond-to-max($bp-xs-max) {
      margin-bottom: math.div(10px, $base-font-size-px) + em;
      font-size: 1em;
      line-height: math.div(18px, $base-font-size-px);
    }
  }
}

@mixin heading-5($has-margin-bottom: true, $has-margin-top: true) {
  font-size: math.div($size-v, $base-font-size-px) + em;
  font-size-adjust: var(--font-adjust-h5);
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.25;
  text-transform: uppercase;

  @if $has-margin-bottom {
    margin-bottom: math.div(15px, $size-v) + em;
  }

  @if $has-margin-top {
    p + &,
    ul + &,
    ol + &,
    dl + &,
    figure + &,
    img + &,
    table + &,
    blockquote + &,
    h1 + &,
    .h1 + &,
    h2 + &,
    .h2 + &,
    h3 + &,
    .h3 + &,
    h4 + &,
    .h4 + &,
    h6 + &,
    .h6 + & {
      margin-top: math.div(30px, $size-v) + em;
    }
  }
}

@mixin heading-6($has-margin-bottom: true, $has-margin-top: true) {
  font-size: math.div($size-vi, $base-font-size-px) + em;
  font-size-adjust: var(--font-adjust-h6);
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.25;
  text-transform: uppercase;

  @if $has-margin-bottom {
    margin-bottom: math.div(15px, $size-vi) + em;
  }

  @if $has-margin-top {
    p + &,
    ul + &,
    ol + &,
    dl + &,
    figure + &,
    img + &,
    table + &,
    blockquote + &,
    h1 + &,
    .h1 + &,
    h2 + &,
    .h2 + &,
    h3 + &,
    .h3 + &,
    h4 + &,
    .h4 + &,
    h5 + &,
    .h5 + & {
      margin-top: math.div(30px, $size-vi) + em;
    }
  }
}

@mixin u-lead-paragraph() {
  margin-top: 0;
  margin-bottom: 15px;

  @include heading-3(
    $has-margin-bottom: false,
    $has-margin-top: false,
    $is-responsive: true,
    $font-weight: normal
  );
}

// For when you want a heading that's bigger than a normal H1.
@mixin u-superheading() {
  margin-bottom: math.div(20px, $size-xl) + em;
  font-size: math.div($size-xl, $base-font-size-px) + em;
  font-weight: normal;
  line-height: 1.25;
}