// @font-style($font-style-small, $font-style-large)

// $font-style-small - Desired type size for small/medium viewport.
// $font-style-large - Desired type size for large viewport. This includes default fallback
//                     for the S/M viewport.

//
// | 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 |                 |

// import variables needed for the mixins
@import '../variables/__variables.scss';

// mixin to get applicable properties for chosen type size
@mixin typeset($type) {
  $type: map-get($types, $type);

  font-size: (map-get($type, font-size));
  letter-spacing: (map-get($type, letter-spacing));
  line-height: (map-get($type, line-height));
}

// get correct font characteristics based on font
@mixin type-size($size) {
  $size: map-get($type-sizes, $size);
  @include typeset($size);
}

// mixin to get font-size
@mixin font-style($font-style-small: 'body--l', $font-style-large: null) {
  // if both arguments are added
  @if ($font-style-large != null) {
    // make sure $font-style-small & $font-style-large are not equal
    @if ($font-style-small != $font-style-large) {
      @include type-size($font-style-small);

      @include viewport--l {
        @include type-size($font-style-large);
      }
    } @else {
      @include type-size($font-style-small);
    }
  } @else {
    @include type-size($font-style-small);
    // default font style mappings
    @if ($font-style-small == 'title--l') {
      @include viewport--l {
        @include type-size('title--xxl');
      }
    } @else if ($font-style-small == 'title--m') {
      @include viewport--l {
        @include type-size('title--xl');
      }
    } @else if ($font-style-small == 'title--s') {
      @include viewport--l {
        @include type-size('title--m');
      }
    }
  }
}