// Default type settings
// =============================================================================

/**
 * Default typography settings, to be included as soon as possible in the HTML
 * 1. Make type rendering look crisper
 * 2. Set relative line spacing to 1.5 (16px * 1.5 = 24px)
 *
 * @param {String} $font-family ($f-serif-text) - Default global font
 *
 * @requires {variable} $f-serif-text
 *
 * @group typography
 */
@mixin guss-typography-defaults($font-family: $f-regular-text) {
  @at-root {
    html {
      font-family: $font-family;
      -moz-osx-font-smoothing: grayscale; /* 1 */
      -webkit-font-smoothing: antialiased; /* 1 */
    }
    body {
      line-height: 1.5; /* 2 */
    }
  }
}

// Shorthands for font declarations
// =============================================================================

/**
 * Font-size and line-height shorthand
 *
 * @param {Number} $size
 * @param {Number} $line-height ($size)
 *
 * @example
 *  @include font-size(18, 24);
 *
 * @requires {function} convert-to-px
 *
 * @group typography
 */
@mixin font-size($size, $line-height: $size) {
  font-size: convert-to-px($size);
  line-height: convert-to-px($line-height);
}

/**
 * Font styling shorthand
 * Note: prefer the usage of the font-scale mixins to stick to the font scale
 *
 * @param {String} $family
 * @param {String} $weight
 * @param {Number} $size
 * @param {Number} $line-height ($size)
 *
 * @example
 *  @include font(arial, bold, 18, 24);
 *
 * @requires {mixin} font-size
 *
 * @group typography
 */
@mixin font($family, $weight, $size, $line-height: $size) {
  font-family: $family;
  font-weight: $weight;
  @include font-size($size, $line-height);
}

// Font scale
// =============================================================================

// Prefixes:
// f- stands for Font: use to set a font-family only
// fs- for Font Scale

@mixin f-textBold {
  font-family: $f-bold-text;
}

@mixin fs-bold($level, $size-only: false) {
  @include font-size(
    get-font-size(textBold, $level),
    get-line-height(textBold, $level)
  );

  @if $size-only == false {
    @include f-textBold;
  }
}

@mixin f-textSemiBold {
  font-family: $f-semi-bold-text;
}

@mixin fs-semi-bold($level, $size-only: false) {
  @include font-size(
    get-font-size(textSemiBold, $level),
    get-line-height(textSemiBold, $level)
  );

  @if $size-only == false {
    @include f-textSemiBold;
  }
}

@mixin f-textMedium {
  font-family: $f-semi-bold-text;
}

@mixin fs-medium($level, $size-only: false) {
  @include font-size(
    get-font-size(textMedium, $level),
    get-line-height(textMedium, $level)
  );

  @if $size-only == false {
    @include f-textMedium;
  }
}

@mixin f-textRegular {
  font-family: $f-regular-text;
}

@mixin fs-regular($level, $size-only: false) {
  @include font-size(
    get-font-size(textRegular, $level),
    get-line-height(textRegular, $level)
  );

  @if $size-only == false {
    @include f-textRegular;
  }
}

@mixin f-textLight {
  font-family: $f-light-text;
}

@mixin fs-light($level, $size-only: false) {
  @include font-size(
    get-font-size(textLight, $level),
    get-line-height(textLight, $level)
  );

  @if $size-only == false {
    @include f-textLight;
  }
}