$type-scale: (
  headline-1: (
    font-size: $font-size-headline-1,
    line-height: 1,
    font-weight: 300,
    tracking: -1.5
  ),
  headline-2: (
    font-size: $font-size-headline-2,
    line-height: 1,
    font-weight: 300,
    tracking: -0.5
  ),
  headline-3: (
    font-size: $font-size-headline-3,
    line-height: 1.041666667,
    font-weight: 400,
    tracking: normal
  ),
  headline-4: (
    font-size: $font-size-headline-4,
    line-height: 1.176470588,
    font-weight: 500,
    tracking: .25
  ),
  headline-5: (
    font-size: $font-size-headline-5,
    line-height: 1.333333333,
    font-weight: 500,
    tracking: normal
  ),
  headline-6: (
    font-size: $font-size-headline-6,
    line-height: 1.6,
    font-weight: 500,
    tracking: .25
  ),
  subtitle-1: (
    font-size: $font-size-subtitle-1,
    line-height: 1.75,
    font-weight: 400,
    tracking: .15
  ),
  subtitle-2: (
    font-size: $font-size-subtitle-2,
    line-height: 1.571428571,
    font-weight: 500,
    tracking: .1
  ),
  body-1: (
    font-size: $font-size-body-1,
    line-height: 1.5,
    font-weight: 400,
    tracking: .5
  ),
  body-2: (
    font-size: $font-size-body-2,
    line-height: 1.428571429,
    font-weight: 400,
    tracking: .25
  ),
  caption: (
    font-size: $font-size-caption,
    line-height: 1.666666667,
    font-weight: 400,
    tracking: .4
  )
);

%font-base {
  font-family: $font-family;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
};

@mixin letter-spacing($tracking, $size) {
  letter-spacing: $tracking / ($size * 16) * 1em;
}

@mixin type-size($type) {
  $size: map-deep-get($type-scale, $type, "font-size");
  $tracking: map-deep-get($type-scale, $type, "tracking");
  
  font-size: $size;
  letter-spacing: normal;
  // TODO: calculate letter-spacing from tracking
}

@mixin type-props($type) {
  $size: map-deep-get($type-scale, $type, "font-size");
  $lineHeight: map-deep-get($type-scale, $type, "line-height");

  @extend %font-base;
  @include type-size($type);
  line-height: calc(#{$size} * #{$lineHeight});  
  font-weight: map-deep-get($type-scale, $type, "font-weight");
}

.headline-1 { 
  @include type-props("headline-1");
  color: $color-text-headline;
}

.headline-2 {
  @include type-props("headline-2");
  color: $color-text-headline;
}

.headline-3 {
  @include type-props("headline-3");
  color: $color-text-headline;
}

.headline-4 {
  @include type-props("headline-4");
  color: $color-text-headline;
}

.headline-5 {
  @include type-props("headline-5");
  color: $color-text-headline;
}

.headline-6 {
  @include type-props("headline-6");
  color: $color-text-headline;
}

.subtitle-1 {
  @include type-props("subtitle-1");
}

.subtitle-2 {
  @include type-props("subtitle-2");
}

.body-1 {
  @include type-props("body-1");
}

.body-2 {
  @include type-props("body-2");
}

.caption {
  @include type-props("caption");
  color: $color-text-caption;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.font-color-secondary {
  color: $color-text-dark-secondary;
}

.font-color-secondary-light {
  color: $color-text-light-secondary;
}

.font-color-hint {
  color: $color-text-dark-hint;
}

.font-color-hint-light {
  color: $color-text-light-hint;
}

.font-size-small {
  @include type-size("caption");
}

.font-size-medium {
  @include type-size("body-2");
}

.font-size-normal {
  @include type-size("body-1");
}

.font-size-large {
  @include type-size("headline-4");
}

.font-size-xlarge {
  @include type-size("headline-3");
}

.font-weight-bold {
  font-weight: 700;
}

.font-weight-normal {
  font-weight: 400;
}

.font-weight-light {
  font-weight: 300;
}

.text-truncate {
  @include text-truncate;
}

.text-preline {
  white-space: pre-line;
}

.text-prewrap {
  white-space: pre-wrap;
}