/*
  --------------------------------------------
  Em conversion functions
  pixels to ems & baselines to ems
  --------------------------------------------
  Usage:
  - em(6, 26) converts 6px to ems assuming the
    font-size of the element is 26px. If the
    element's font-size is the same as the
    base font-size, you can omit the 2nd
    argument: em(6)
  - lines(0.5, 26) is a shorthand for
    em(($line-height/2), 26), so em(12, 26)
    in Sharetribe's case.
  --------------------------------------------
  Examples:
    p {
      font-size:
      line-height: lines(1);
      margin-bottom: lines(0.5);
    }
    h1 {
      font-size: em(42);
      line-height: lines(2, 42);
      margin-bottom: lines(1, 42);
    }
  --------------------------------------------
*/

$font-size: 16;
$line-height: 24;

@function em($pixels, $context-font-size: $font-size) {
  @return ($pixels / $context-font-size) * 1em;
}

@function rem($pixels, $context-font-size: $font-size) {
  @return ($pixels / $context-font-size) * 1rem;
}

@function lines($lines, $context-font-size: $font-size,  $context-line-height: $line-height) {
  @return $lines * ($context-line-height / $context-font-size) * 1em;
}

@function ems-to($ems, $new-context-font-size, $old-context-font-size: $font-size) {
  @return $ems * $old-context-font-size / $new-context-font-size
}

@function lines-to($lines, $new-context-font-size, $old-context-font-size: $font-size) {
  @return ems-to($lines, $new-context-font-size, $old-context-font-size);
}

/*
  --------------------------------------------------
  Font-family mixins
  FF Tisa: https://typekit.com/fonts/ff-tisa-web-pro
  LFT Etica: https://typekit.com/fonts/lft-etica-web
  --------------------------------------------------
*/

@mixin ff-tisa {
  font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2",georgia,serif;
}

@mixin lft-etica {
  font-family: "lft-etica-1","lft-etica-2",helvetica,sans-serif;
}

@mixin source-sans-pro {
  font-family: 'Source Sans Pro', helvetica, sans-serif;
}

/*
  ----------------------------------------------------------
  Type presets
  mostly calculated using a modular scale based on
  the golden ratio: 1:1.618
  http://modularscale.com/scale/?px1=16&px2=&ra1=1.618&ra2=0
  ----------------------------------------------------------
*/

$small-type:   13;
$normal-type:  16;
$big-type:     22;
$large-type:   26;
$larger-type:  34;
$huge-type:    42;
$mega-type:    68;
$giga-type:    110;

@mixin small-type {
  font-size: em($small-type);
  line-height: lines(0.75, $small-type); // 18px, aligns with baseline grid every 4 lines
}

@mixin normal-type {
  font-size: em($font-size, $normal-type); // 16 is the base font-size of all(?) browsers
  line-height: lines(1); // 24px
}

@mixin big-type {
  font-size: em($big-type); // roughly 16*1.382 (shorter part of golden ratio)
  line-height: lines(1, $big-type); // 24px
  font-weight: 600;
}

@mixin large-type {
  font-size: em($large-type); // roughly 16*1.618 (longer part golden ratio)
  line-height: lines(1.5, $large-type); // 36px
  font-weight: 600;
}

@mixin larger-type {
  font-size: em($larger-type); // roughly 16*1.618 (longer part golden ratio)
  line-height: lines(1.5, $larger-type); // 36px
  font-weight: 600;
}

@mixin huge-type {
  font-size: em($huge-type); // roughly 16*1.618^2 (double golden ratio)
  line-height: lines(2, $huge-type); // 48px
  font-weight: 700;
}

@mixin mega-type {
  font-size: em($mega-type); // roughly 16*1.618^3 (triple golden ratio)
  line-height: lines(3, $mega-type); // 72px
  font-weight: 700;
}

@mixin giga-type {
  font-size: em($giga-type); // just in case you need something this big!
  line-height: lines(5, $giga-type); // 120px
  font-weight: 700;
}