/**
* Mixin to define common onyx sizes (e.g. used for icons).
*/
@mixin define-rem-sizes() {
  $sizes:
    12px 0.75rem,
    16px 1rem,
    24px 1.5rem,
    32px 2rem,
    48px 3rem,
    64px 4rem,
    96px 6rem;

  @each $name, $size in $sizes {
    @content ($name, $size);
  }
}

/**
* Mixin to define h1-h6 headline font size and line height.
*/
@mixin define-headline-sizes() {
  &--h1 {
    font-size: var(--onyx-font-size-xl);
    line-height: var(--onyx-font-line-height-xl);
    font-family: var(--onyx-font-family-h1);
  }

  &--h2 {
    font-size: var(--onyx-font-size-lg);
    line-height: var(--onyx-font-line-height-lg);
    font-family: var(--onyx-font-family-h2);
  }

  &--h3 {
    font-size: var(--onyx-font-size-md);
    line-height: var(--onyx-font-line-height-md);
    font-family: var(--onyx-font-family-h3);
  }

  &--h4,
  &--h5,
  &--h6 {
    font-size: var(--onyx-font-size-sm);
    line-height: var(--onyx-font-line-height-sm);
    font-family: var(--onyx-font-family-h4);
  }
}