// Some mixins that help us deal with browser scaling of text more consistently.
// Essentially, fonts across eui should scale against the root html element, not
// against parent inheritance.

// Typography mixins

@function convertToRem($size) {
  @return #{$size / $euiFontSize}rem;
}

// Spit out rem and px
@mixin fontSize($size: $euiFontSize) {
  font-size: $size;
  font-size: convertToRem($size);
}

// Our base gridline is at 1/2 the font-size, ensure line-heights stay on that gridline.
// EX: A proper line-height for text is 1.5 times the font-size.
//     If our base font size (euiFontSize) is 16, our baseline is 8 (16*1.5 / 3). To ensure the
//     text stays on the baseline, we pass a multiplier to calculate a line-height in rems.
@function lineHeightFromBaseline($multiplier: 3) {
  @return convertToRem(($euiFontSize/2)*$multiplier);
}
@mixin lineHeightFromBaseline($multiplier: 3) {
  line-height: lineHeightFromBaseline($multiplier);
}

// Families
$euiFontFamily: 'Inter UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
$euiCodeFontFamily: 'Roboto Mono', Consolas, Menlo, Courier, monospace !default;

// Careful using ligatures. Code editors like ACE will often error because of width calculations
$euiFontFeatureSettings: 'calt' 1, 'kern' 1, 'liga' 1 !default;

// Font sizes -- scale is loosely based on Major Third (1.250)
$euiTextScale:      2.25, 1.75, 1.25, 1.125, 1, .875, .75 !default;

$euiFontSize:       $euiSize !default; // 5th position in scale
$euiFontSizeXS:     $euiFontSize * nth($euiTextScale, 7) !default; // 12px
$euiFontSizeS:      $euiFontSize * nth($euiTextScale, 6) !default; // 14px
$euiFontSizeM:      $euiFontSize * nth($euiTextScale, 4) !default; // 18px
$euiFontSizeL:      $euiFontSize * nth($euiTextScale, 3) !default; // 20px
$euiFontSizeXL:     $euiFontSize * nth($euiTextScale, 2) !default; // 28px
$euiFontSizeXXL:    $euiFontSize * nth($euiTextScale, 1) !default; // 36px

// Line height
$euiLineHeight:     1.5 !default;
$euiBodyLineHeight: 1 !default;

// Font weights
$euiFontWeightLight:        300 !default;
$euiFontWeightRegular:      400 !default;
$euiFontWeightMedium:       500 !default;
$euiFontWeightSemiBold:     600 !default;
$euiFontWeightBold:         700 !default;
$euiCodeFontWeightRegular:  400 !default;
$euiCodeFontWeightBold:     700 !default;

// Titles map
// Lists all the properties per EuiTitle size that then gets looped through to create the selectors.
// The map allows for tokenization and easier customization per theme, otherwise you'd have to override the selectors themselves
$euiTitles: (
  'xxxs': (
    'font-size': $euiFontSizeXS,
    'line-height': lineHeightFromBaseline(3),
    'font-weight': $euiFontWeightBold,
  ),
  'xxs': (
    'font-size': $euiFontSizeS,
    'line-height': lineHeightFromBaseline(3),
    'font-weight': $euiFontWeightBold,
  ),
  'xs': (
    'font-size': $euiFontSize,
    'line-height': lineHeightFromBaseline(3),
    'font-weight': $euiFontWeightSemiBold,
    'letter-spacing': -.02em,
  ),
  's': (
    'font-size': $euiFontSizeL,
    'line-height': lineHeightFromBaseline(4),
    'font-weight': $euiFontWeightMedium,
    'letter-spacing': -.025em,
  ),
  'm': (
    'font-size': $euiFontSizeXL,
    'line-height': lineHeightFromBaseline(5),
    'font-weight': $euiFontWeightLight,
    'letter-spacing': -.04em,
  ),
  'l': (
    'font-size': $euiFontSizeXXL,
    'line-height': lineHeightFromBaseline(6),
    'font-weight': $euiFontWeightLight,
    'letter-spacing': -.03em,
  ),
) !default;