// Text hiding for image based text replacement.
// Higher performance than -9999px because it only renders
// the size of the actual text, not a full 9999px box.
@mixin hide-text() {
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

// Heading mixins for use within components
// These match heading utilities in utilities/typography
@mixin h1 {
  font-size: var(--h1-size, $h1-size);
  font-weight: $font-weight-bold;
}

@mixin h2 {
  font-size: var(--h2-size, $h2-size);
  font-weight: $font-weight-bold;
}

@mixin h3 {
  font-size: var(--h3-size, $h3-size);
  font-weight: $font-weight-bold;
}

@mixin h4 {
  font-size: var(--h4-size, $h4-size);
  font-weight: $font-weight-bold;
}

@mixin h5 {
  font-size: var(--h5-size, $h5-size);
  font-weight: $font-weight-bold;
}

@mixin h6 {
  font-size: var(--h6-size, $h6-size);
  font-weight: $font-weight-bold;
}

// Responsive heading mixins
// There are no responsive mixins for h4-h6 because they are small
// and don't need to be smaller on mobile.
@mixin f1-responsive {
  font-size: var(--h1-size-mobile, $h1-size-mobile);

  // 32px on desktop
  @include breakpoint(md) {
    font-size: var(--h1-size, $h1-size);
  }
}

@mixin f2-responsive {
  font-size: var(--h2-size-mobile, $h2-size-mobile);

  // 24px on desktop
  @include breakpoint(md) {
    font-size: var(--h2-size, $h2-size);
  }
}

@mixin f3-responsive {
  font-size: var(--h3-size-mobile, $h3-size-mobile);

  // 20px on desktop
  @include breakpoint(md) {
    font-size: var(--h3-size, $h3-size);
  }
}

// These use the mixins from above for responsive heading sizes.
// The following mixins can be used where it's convenient or necessary to
// couple the responsive font-size with the font-weight.
@mixin h1-responsive {
  @include f1-responsive;

  font-weight: $font-weight-bold;
}

@mixin h2-responsive {
  @include f2-responsive;

  font-weight: $font-weight-bold;
}

@mixin h3-responsive {
  @include f3-responsive;

  font-weight: $font-weight-bold;
}