/*
----------------------------------------
typeset()
----------------------------------------
Sets:
- family
- size
- line-height
----------------------------------------
*/

@mixin typeset(
  $family: $theme-body-font-family,
  $scale: $theme-body-font-size,
  $line-height: $theme-body-line-height
) {
  @if type-of($family) == "list" {
    $list: $family;
    $family: if(nth($list, 1), nth($list, 1), null);
    $scale: if(nth($list, 2), nth($list, 2), null);
    $line-height: if(nth($list, 3), nth($list, 3), null);
  }
  $family: if($family == null, $theme-body-font-family, $family);
  $scale: if($scale == null, $theme-body-font-size, $scale);
  $line-height: if($line-height == null, $theme-body-line-height, $line-height);
  @include u-font($family, $scale);
  @include u-line-height($family, $line-height);
}

@mixin typeset-heading {
  @include u-margin-y(0);
  clear: both;

  * + & {
    margin-top: 1.5em; // TODO: add as var to settings?
  }

  + * {
    margin-top: 1em;
  }
}

// typeset element mixins
@mixin typeset-p {
  line-height: line-height($theme-body-font-family, $theme-body-line-height);
  margin-bottom: 0;
  margin-top: 0;
  max-width: measure($theme-text-measure);

  * + & {
    margin-top: 1em; // TODO: add as var to settings?
  }

  + * {
    margin-top: 1em;
  }
}

@mixin typeset-link {
  color: color($theme-link-color);
  text-decoration: underline;

  &:visited {
    color: color($theme-link-visited-color);
  }

  &:hover {
    color: color($theme-link-hover-color);
  }

  &:active {
    color: color($theme-link-active-color);
  }

  &:focus {
    @include focus-outline;
  }
}

@mixin display {
  @include typeset(
    "heading",
    $theme-display-font-size,
    $theme-heading-line-height
  );

  font-weight: fw("bold");
}

@mixin typeset-display {
  @include typeset-heading;
  @include display;
}

@mixin h1 {
  @include typeset("heading", $theme-h1-font-size, $theme-heading-line-height);

  font-weight: fw("bold");
}

@mixin typeset-h1 {
  @include typeset-heading;
  @include h1;
}

@mixin h2 {
  @include typeset("heading", $theme-h2-font-size, $theme-heading-line-height);

  font-weight: fw("bold");
}

@mixin typeset-h2 {
  @include typeset-heading;
  @include h2;
}

@mixin h3 {
  @include typeset("heading", $theme-h3-font-size, $theme-heading-line-height);

  font-weight: fw("bold");
}

@mixin typeset-h3 {
  @include typeset-heading;
  @include h3;
}

@mixin h4 {
  @include typeset("heading", $theme-h4-font-size, $theme-heading-line-height);

  font-weight: fw("bold");
}

@mixin typeset-h4 {
  @include typeset-heading;
  @include h4;
}

@mixin h5 {
  @include typeset("heading", $theme-h5-font-size, $theme-heading-line-height);

  font-weight: fw("bold");
}

@mixin typeset-h5 {
  @include typeset-heading;
  @include h5;
}

@mixin h6 {
  @include typeset("body", $theme-h6-font-size, $theme-heading-line-height);

  font-weight: fw("normal");
  letter-spacing: ls("ls-1");
  text-transform: uppercase;
}

@mixin typeset-h6 {
  @include typeset-heading;
  @include h6;
}