// | viewport S       | viewport M       | viewport L      | default mapping |
// |------------------|------------------|-----------------|-----------------|
// | title l    | 40  | title l    | 40  | title xxl  | 80 | default         |
// | title m    | 32  | title m    | 32  | title xl   | 60 | default         |
// | title s    | 26  | title s    | 26  | title l    | 40 |                 |
// | title s    | 26  | title s    | 26  | title m    | 32 | default         |
// | title xs   | 20  | title xs   | 20  | title s    | 26 |                 |
// | title xs   | 20  | title xs   | 20  | title xs   | 20 | default         |
// | title xxs  | 18  | title xxs  | 18  | title xxs  | 18 |                 |
// |            |     |            |     |            |    |                 |
// | body l     | 18  | body l     | 18  | body l     | 18 |                 |
// | body m     | 16  | body m     | 16  | body m     | 16 |                 |
// | body s     | 12  | body s     | 12  | body s     | 12 |                 |

// font family
$font-family-theme: Montserrat, arial, sans-serif;
$font-family-theme-semibold: Montserrat-SemiBold, arial, sans-serif;
$font-family-theme-extrabold: Montserrat-ExtraBold, arial, sans-serif;
// assets path to font
// this path is overwritten in component CSS

// font mappings - font-size / line-height / letter-spacing
$types: (
  12: (
    font-size: 12px,
    line-height: 15px,
    text-transform: none,
    font-family: $font-family-theme
  ),
  14: (
    font-size: 14px,
    line-height: 25px,
    text-transform: none,
    font-family: $font-family-theme
  ),
  16: (
    font-size: 16px,
    line-height: 25px,
    text-transform: none,
    font-family: $font-family-theme
  ),
  18: (
    font-size: 18px,
    line-height: 30px,
    text-transform: none,
    font-family: $font-family-theme
  ),
  20: (
    font-size: 20px,
    line-height: 30px,
    text-transform: none,
    font-family: $font-family-theme-extrabold
  ),
  20s: (
    font-size: 20px,
    line-height: 30px,
    text-transform: none,
    font-family: $font-family-theme-semibold
  ),
  26: (
    font-size: 26px,
    line-height: 30px,
    text-transform: uppercase,
    font-family: $font-family-theme-extrabold
  ),
  26s: (
    font-size: 26px,
    line-height: 30px,
    text-transform: none,
    font-family: $font-family-theme-semibold
  ),
  32: (
    font-size: 32px,
    line-height: 40px,
    text-transform: uppercase,
    font-family: $font-family-theme-extrabold
  ),
  32s: (
    font-size: 32px,
    line-height: 40px,
    text-transform: none,
    font-family: $font-family-theme-semibold
  ),
  40: (
    font-size: 40px,
    line-height: 45px,
    text-transform: uppercase,
    font-family: $font-family-theme-extrabold
  ),
  40s: (
    font-size: 40px,
    line-height: 45px,
    text-transform: none,
    font-family: $font-family-theme-semibold
  ),
  60: (
    font-size: 60px,
    line-height: 60px,
    text-transform: uppercase,
    font-family: $font-family-theme-extrabold
  ),
  80: (
    font-size: 80px,
    line-height: 80px,
    text-transform: uppercase,
    font-family: $font-family-theme-extrabold
  )
);

// type-sizes - links the type-size to correct font mapping
$type-sizes: (
  title--xxl: 80,
  title--xl: 60,
  title--l: 40,
  title--l-slim: 40s,
  title--m: 32,
  title--m-slim: 32s,
  title--s: 26,
  title--s-slim: 26s,
  title--xs: 20,
  title--xs-slim: 20s,
  title--xxs: 18,
  body--l: 18,
  body--m: 16,
  body--s: 14,
  body--xs: 12
);