/**
* Font family utility
*
* naming convention: gl-font-{family-name}
* Notes:
* - Strictly based on design system typography specs
*/
@mixin gl-font-monospace {
  font-family: $gl-monospace-font;
  font-variant-ligatures: none;
}

@mixin gl-font-regular {
  font-family: $gl-regular-font;
}

/**
* Font style utility
*
* naming convention: gl-font-style-{family-name}
*/
@mixin gl-font-style-italic {
  font-style: italic;
}

@mixin gl-font-style-normal {
  font-style: normal;
}

/**
* Heading utility
*
* naming convention: gl-heading-{level}
* Notes:
* - Includes a default margin bottom
* - Fixed sizes have limited use, check
* https://design.gitlab.com/product-foundations/type-fundamentals
*/

@mixin gl-heading-6 {
  @include gl-heading-scale-200;
  margin-bottom: $gl-mb-heading;
}

@mixin gl-heading-6-fixed {
  @include gl-heading-scale-200-fixed;
  margin-bottom: $gl-mb-heading;
}

@mixin gl-heading-5 {
  @include gl-heading-scale-300;
  margin-bottom: $gl-mb-heading;
}

@mixin gl-heading-5-fixed {
  @include gl-heading-scale-300-fixed;
  margin-bottom: $gl-mb-heading;
}

@mixin gl-heading-4 {
  @include gl-heading-scale-400;
  margin-bottom: $gl-mb-heading;
}

@mixin gl-heading-4-fixed {
  @include gl-heading-scale-400-fixed;
  margin-bottom: $gl-mb-heading;
}

@mixin gl-heading-3 {
  @include gl-heading-scale-500;
  margin-bottom: $gl-mb-heading;
}

@mixin gl-heading-3-fixed {
  @include gl-heading-scale-500-fixed;
  margin-bottom: $gl-mb-heading;
}

@mixin gl-heading-2 {
  @include gl-heading-scale-600;
  margin-bottom: $gl-mb-heading;
}

@mixin gl-heading-2-fixed {
  @include gl-heading-scale-600-fixed;
  margin-bottom: $gl-mb-heading;
}

@mixin gl-heading-1 {
  @include gl-heading-scale-700;
  margin-bottom: $gl-mb-heading;
}

@mixin gl-heading-1-fixed {
  @include gl-heading-scale-700-fixed;
  margin-bottom: $gl-mb-heading;
}

@mixin gl-heading-display {
  @include gl-heading-scale-800;
  margin-bottom: $gl-mb-heading-display;
}

/**
* Heading scale utility
*
* naming convention: gl-heading-scale-{size-variable-value}
*
* Notes:
* - For contextual heading size adjustments only, check
* https://design.gitlab.com/product-foundations/type-fundamentals
* - See variables.scss for font-size default and fixed scales.
*/

@mixin gl-heading-scale-100 {
  @include gl-heading-scale(100);
}

@mixin gl-heading-scale-100-fixed {
  @include gl-heading-scale(100, $fixed: true);
}

@mixin gl-heading-scale-200 {
  @include gl-heading-scale(200);
}

@mixin gl-heading-scale-200-fixed {
  @include gl-heading-scale(200, $fixed: true);
}

@mixin gl-heading-scale-300 {
  @include gl-heading-scale(300);
}

@mixin gl-heading-scale-300-fixed {
  @include gl-heading-scale(300, $fixed: true);
}

@mixin gl-heading-scale-400 {
  @include gl-heading-scale(400);
}

@mixin gl-heading-scale-400-fixed {
  @include gl-heading-scale(400, $fixed: true);
}

@mixin gl-heading-scale-500 {
  @include gl-heading-scale(500);
}

@mixin gl-heading-scale-500-fixed {
  @include gl-heading-scale(500, $fixed: true);
}

@mixin gl-heading-scale-600 {
  @include gl-heading-scale(600);
}

@mixin gl-heading-scale-600-fixed {
  @include gl-heading-scale(600, $fixed: true);
}

@mixin gl-heading-scale-700 {
  @include gl-heading-scale(700);
}

@mixin gl-heading-scale-700-fixed {
  @include gl-heading-scale(700, $fixed: true);
}

@mixin gl-heading-scale-800 {
  @include gl-heading-scale(800);
}

@mixin gl-heading-scale-800-fixed {
  @include gl-heading-scale(800, $fixed: true);
}

/**
* DEPRECATED
* TODO: migrate all of these away
* Font size utility
*
* naming convention: gl-font-{type-scale-size}
* Notes:
* - Strictly based on design system type scale. See
* $gl-type-scale for further references.
*/
@mixin gl-font-xs {
  font-size: $gl-font-size-xs;
}

@mixin gl-font-sm {
  font-size: $gl-font-size-sm;
}

@mixin gl-font-base {
  font-size: $gl-font-size;
}

@mixin gl-font-lg {
  font-size: $gl-font-size-lg;
}

@mixin gl-font-size-h-display {
  font-size: $gl-font-size-h-display;
}

@mixin gl-font-size-h1 {
  font-size: $gl-font-size-h1;
}

@mixin gl-font-size-h2 {
  font-size: $gl-font-size-h2;
}

@mixin gl-font-size-h-display-xl {
  font-size: $gl-font-size-h-display-xl;
}

@mixin gl-font-size-h1-xl {
  font-size: $gl-font-size-h1-xl;
}

@mixin gl-font-size-h2-xl {
  font-size: $gl-font-size-h2-xl;
}

@mixin gl-font-icon-size {
  font-size: $default-icon-size;
}

@mixin gl-font-size-markdown-sm {
  font-size: $gl-font-size-markdown-sm;
}

@mixin gl-font-size-markdown {
  font-size: $gl-font-size-markdown;
}

@mixin gl-font-size-markdown-h1 {
  font-size: $gl-font-size-markdown-h1;
}

@mixin gl-font-size-markdown-h2 {
  font-size: $gl-font-size-markdown-h2;
}

@mixin gl-font-size-markdown-h3 {
  font-size: $gl-font-size-markdown-h3;
}

@mixin gl-font-size-compact-markdown-h1 {
  font-size: $gl-font-size-compact-markdown-h1;
}

@mixin gl-reset-font-size {
  font-size: inherit;
}

/**
* Font-weight utilities.
*
* naming convention: gl-font-weight-[bold|normal|number]
*/

@mixin gl-font-weight-100 {
  font-weight: 100;
}

@mixin gl-font-weight-300 {
  font-weight: 300;
}

@mixin gl-font-weight-normal {
  font-weight: $gl-font-weight-normal;
}

@mixin gl-font-weight-semibold {
  font-weight: $gl-font-weight-semibold;
}

@mixin gl-font-weight-bold {
  font-weight: $gl-font-weight-bold;
}

@mixin gl-sm-font-weight-bold {
  @include gl-media-breakpoint-up(sm) {
    @include gl-font-weight-bold;
  }
}

/**
* Line height utilities.
*
* naming convention:
* - gl-line-height-ratio-{ratio-multiplied-by-1000}
* - gl-line-height-{line-height-in-pixels}
* notes:
* - Strictly based in gl-line-height-{n} variables
*/

// TODO: Remove after migration
@mixin gl-line-height-0 {
  line-height: 0;
}

// TODO: Remove after migration
@mixin gl-line-height-1 {
  line-height: 1;
}

@mixin gl-line-height-ratio-0000 {
  line-height: 0;
}

@mixin gl-line-height-ratio-1000 {
  line-height: 1;
}

@mixin gl-line-height-ratio-1125 {
  line-height: 1.125;
}

@mixin gl-line-height-ratio-1250 {
  line-height: 1.25;
}

@mixin gl-line-height-normal {
  line-height: $gl-line-height-16;
}

@mixin gl-line-height-12 {
  line-height: $gl-line-height-12;
}

@mixin gl-line-height-20 {
  line-height: $gl-line-height-20;
}

@mixin gl-line-height-24 {
  line-height: $gl-line-height-24;
}

@mixin gl-line-height-28 {
  line-height: $gl-line-height-28;
}

@mixin gl-line-height-32 {
  line-height: $gl-line-height-32;
}

@mixin gl-line-height-36 {
  line-height: $gl-line-height-36;
}

@mixin gl-line-height-42 {
  line-height: $gl-line-height-42;
}

@mixin gl-line-height-52 {
  line-height: $gl-line-height-52;
}

@mixin gl-reset-line-height {
  line-height: inherit;
}

/**
* Letter spacing utilities.
*
* naming convention: gl-letter-spacing-{letter-spacing}{unit}
*/
@mixin gl-letter-spacing-06em {
  letter-spacing: 0.06em;
}

@mixin gl-letter-spacing-n01em {
  letter-spacing: -0.01em;
}