_typo_temp5.styl

$debug-allow ?= true


$palettes ?= {
  blue: #169dbf,
  white: white,
  black: black
}

// map for flexible retrieval of breakpoint info
$breakpoint-map ?= {
  '0': {
    start: 0px,
    max: 420px,
    rootsize: 12px
  },
  '1': {
    start: 480px,
    max: 560px,
    rootsize: 14px
  },
  '2': {
    start: 768px,
    max: 840px,
    rootsize: 16px
  },
  '3': {
    start: 980px,
    max: 1080px,
    rootsize: 18px
  },
  '4': {
    start: 1280px,
    max: 1440px,
    rootsize: 20px
  }
}

// =====================================================
// ------------- Megatype helper functions -------------
// =====================================================
// @author Thomas Bredin-Grey <tom@studiothick.com>
// Megatype: https://github.com/StudioThick/megatype
// =====================================================

hash-get($hash, $key)
  $result = false
  if typeof($key) != 'string'
    $key = join('', $key)
  $result = $hash[$key]
  return $result

// shorthand function to retreive breakpoint values
break-get($break, $val)
  warn('$break: ' + $break + ' $val: ' + $val)
  warn('typeof($break): ' + typeof($break) + ' typeof($val): ' + typeof($val))
  $result = false
  if typeof($break) != 'string'
    $break = join('', $break)
    warn('$break: ' + $break)
  if typeof($val) != 'string'
    $val = join('', $val)
    warn('$val: ' + $val)
  $result = $breakpoint-map[$break]
  warn('demi $result: ' + $result)
  warn('demi typeof($result): ' + typeof($result))
  $result = $result[$val]
  warn('$result: ' + $result)
  warn('typeof($result): ' + typeof($result))
  return $result

// color variable helper
palette($color)
  return $palettes[$color]

// make comma separated keys as literal
map-keys($hash)
  unquote(join(', ', keys($hash)))

// make space separated keys as units
map-keys-indent($hash)
  $temp = ()
  push($temp, convert(join(' ', keys($hash))))
  return $temp

// get keys as units length. Analogue of length(map-keys($breakpoint-map)) in sass
get-keys-length($mapKeys)
  length(split(', ', join('', $mapKeys)))

// sass map-has-key simulation with hash
map-has-key($hash, $key)
  $s_key = join('', $key)
  return !!$hash[$s_key]



// =====================================================
// ------------------ Megatype config ------------------
// =====================================================
// @author Thomas Bredin-Grey <tom@studiothick.com>
// Megatype: https://github.com/StudioThick/megatype
// =====================================================
// ===================================
// Colors
// ===================================
// colors
$site-color-names ?= map-keys($palettes)

// ===================================
// Debugging
// ===================================
// debug grid columns, grid, type baseline, & breakpoints
$debug-grid ?= true
$debug-type ?= true
$debug-breakpoints ?= true

// makes type debugging show on hover instead of all the time
$debug-hover ?= true

// debug colors
$debug-base ?= #f54848
$debug-cap ?= yellow
$debug-spacing ?= turquoise

// size of debug text
$debug-size ?= 12px

// grid opacity, for debugging max-width
$debug-opacity ?= 0.3

// limit where baseline will report warnings
$debug-tolerance = 1px

// ===================================
// Breakpoints & Grid
// ===================================
// enable responsive baseline & type scaling.
// increases root font size from each breakpoint, starting from the min size specified in $rootsizes below
$baseline-scaling ?= false

// enable formal baseline grid
// snaps all type to the baseline grid
// for best results, declare spacing and leading using unitless numbers in typeset mixin
// can be disabled per-typeset mixin by passing last paramter ($snap) as false
$baseline-snap ?= true

// baseline subdivisions specify a fraction of the grid that type can be snapped to.
// useful for small text
// can be overridden in typeset mixin with parameter $use-subdivisions: false
$baseline-subdivisions = 1

// default breakpoint. This is where the default html font size will be set,
// media queries will be generated to either side to apply rootsizes at remaining breakpoints
// eg: for mobile first set this to 0, for desktop first set this to your largest breakpoint (with this config, 4)
$default-break ?= 0

// optional: set a minimum size for all typeset typography
$min-font-size ?= false

// typographic measure for paragraphs, lists, and headings
$type-measure ?= 40rem

// link offset from baseline
$link-color ?= palette('blue')

// link offset from baseline
$link-offset ?= 2px

// link underline opacity
$link-underline-opacity ?= 0.6

// link underline hover opacity
$link-underline-hover-opacity ?= 0.8

// breakpoint count
$breakpoint-count ?= get-keys-length(map-keys($breakpoint-map))

// breakpoint names
$breaks ?= map-keys-indent($breakpoint-map)

// set the initial breakpoint information referenced by type mixins
// you can use these to retrieve current breakpoint info within breakpoint mixins
$current-breakpoint ?= 0
$current-rootsize ?= break-get(0, 'rootsize')

// ===================================
// Compatibility
// ===================================
// fix line-height rounding errors in webkit safari
$webkit-line-height-fix ?= true

// ===================================
// Typefaces
// ===================================
// Set cap height to set to the baseline.
// Here are some cap-height sizes to get you started:
// Georgia: 0.66, Times / Times New Roman: 0.65, Palatino: 0.52
// Lucida Grande: 0.72, Helvetica: 0.65, Helvetica Neue: 0.71, Verdana: 0.76, Tahoma: 0.76
$sans ?= {
  font-family: '"Helvetica Neue", Arial, sans-serif',
  regular: normal,
  bold: bold,
  cap-height: 0.71,
  cap-position: 0.525
}
$serif ?= {
  font-family: "Georgia, serif",
  regular: normal,
  bold: bold,
  cap-height: 0.69,
  cap-position: 0.525
}
$monospace ?= {
  font-family: "Menlo, Courier, monospace",
  regular: 400,
  cap-height: 0.68,
  cap-position: 0.5
}



// =====================================================
// ------------ MegaType Tools - Units -------------
// =====================================================
// @author Thomas Bredin-Grey <tom@studiothick.com>
// Megatype: https://github.com/StudioThick/megatype
// =====================================================

// Returns a unitless number
// no-unit($n)
//   return $n / ($n * 0 + 1)

unitless(val)
  !unit(val)

no-unit(val)
  unit(val, '')

// Converts an em value to px. Should only work in absolute em document context (root level)
em-to-px($value, $context = $current-rootsize)  // working
  if unit($value) == "em"
    $value = no-unit($value) * no-unit($current-rootsize)  // maybe $context ?
    $value = $value * 1px
  return $value

// Converts an rem value to px. Should only work in absolute em document context (root level)
rem-to-px($value, $context = $current-rootsize)  // working
  if unit($value) == "rem"
    $value = no-unit($value) * no-unit($current-rootsize)  // maybe $context ?
    $value = $value * 1px
  return $value

// Converts a px value to ems. Should only work in absolute em document context (root level), unless $context is specified
px-to-em($value, $context = $current-rootsize)  // working
  if unit($context) == "em"
    $context = em-to-px($context)
  if unit($value) == "px"
    $value = no-unit($value) / no-unit($context)
    $value = $value * 1em
  return $value

// Converts a px value to rems. Should only work in absolute em document context (root level), unless $context is specified
px-to-rem($value, $context = $current-rootsize, $report = false)  // working
  if $report == true
    //Stylus does not support @debug
    //@debug $value $context
    p($value $context)
  if unit($context) == "rem"
    $context = rem-to-px($context)
  if unit($value) == "px"
    $value = no-unit($value) / no-unit($context)
    $value = $value * 1rem
  return $value

// Converts a em value to rems. Should only work in absolute em document context (root level), unless $context is specified
em-to-rem($value)  // working
  if unit($value) == "em"
    $value = no-unit($value) * 1rem
  return $value
////

// =====================================================
// -------------- MegaType Tools - Easing --------------
// =====================================================
// @author Thomas Bredin-Grey <tom@studiothick.com>
// Megatype: https://github.com/StudioThick/megatype
// =====================================================

// Better easing variables
$linear = cubic-bezier(0.25, 0.25, 0.75, 0.75)
$ease = cubic-bezier(0.25, 0.1, 0.25, 1)
$ease-in = cubic-bezier(0.42, 0, 1, 1)
$ease-out = cubic-bezier(0, 0, 0.58, 1)
$ease-in-out = cubic-bezier(0.42, 0, 0.58, 1)

$easeInQuad = cubic-bezier(0.55, 0.085, 0.68, 0.53)
$easeInCubic = cubic-bezier(0.55, 0.055, 0.675, 0.19)
$easeInQuart = cubic-bezier(0.895, 0.03, 0.685, 0.22)
$easeInQuint = cubic-bezier(0.755, 0.05, 0.855, 0.06)
$easeInSine = cubic-bezier(0.47, 0, 0.745, 0.715)
$easeInExpo = cubic-bezier(0.95, 0.05, 0.795, 0.035)
$easeInCirc = cubic-bezier(0.6, 0.04, 0.98, 0.335)
$easeInBack = cubic-bezier(0.6, -0.28, 0.735, 0.045)

$easeOutQuad = cubic-bezier(0.25, 0.46, 0.45, 0.94)
$easeOutCubic = cubic-bezier(0.215, 0.61, 0.355, 1)
$easeOutQuart = cubic-bezier(0.165, 0.84, 0.44, 1)
$easeOutQuint = cubic-bezier(0.23, 1, 0.32, 1)
$easeOutSine = cubic-bezier(0.39, 0.575, 0.565, 1)
$easeOutExpo = cubic-bezier(0.19, 1, 0.22, 1)
$easeOutCirc = cubic-bezier(0.075, 0.82, 0.165, 1)
$easeOutBack = cubic-bezier(0.175, 0.885, 0.32, 1.275)

$easeInOutQuad = cubic-bezier(0.455, 0.03, 0.515, 0.955)
$easeInOutCubic = cubic-bezier(0.645, 0.045, 0.355, 1)
$easeInOutQuart = cubic-bezier(0.77, 0, 0.175, 1)
$easeInOutQuint = cubic-bezier(0.86, 0, 0.07, 1)
$easeInOutSine = cubic-bezier(0.445, 0.05, 0.55, 0.95)
$easeInOutExpo = cubic-bezier(1, 0, 0, 1)
$easeInOutCirc = cubic-bezier(0.785, 0.135, 0.15, 0.86)
$easeInOutBack = cubic-bezier(0.68, -0.55, 0.265, 1.55)


  

// =====================================================
// ------------ Megatype media query mixins ------------
// =====================================================
// @author Thomas Bredin-Grey <tom@studiothick.com>
// Megatype: https://github.com/StudioThick/megatype
// =====================================================


// Media queries. Accepts px or em
// Defaults to min-width, but both min->max and max-width are available too.
// Parts based on https://gist.github.com/timknight/03e6335b8816aa534cf7
media($min = 0, $max = 0)
  // Type of break variable
  $min-val = type-of($min)
  $min-unit = unit($min)
  $max-val = ''
  $max-unit = ''

  // Make sure breakpoints aren't the same, or provided as the first breakpoint key (0)
  if $min != $max or $min == 0
    if $max != 0
      $max-val = type-of($max)
      $max-unit = unit($max)

    if $min-unit == 'px'
      $min = no-unit($min) / 16 * 1em

    if $max-unit == 'px'
      $max = no-unit($max) / 16 * 1em

    $query ?= 'all'

    // If it is a number then we can proceed  // 'number' is called 'unit' in stylus!!!
    if $min-val == 'unit' or $max-val == 'unit'
      // first, lets kick any breakpoint variables back to the breakpoint-layout mixin, which can handle these
      if unitless($min) and unitless($max)
        if map-has-key($breakpoint-map, $min)
          // make current breakpoint context available in global scope
          $current-breakpoint = $min
          $current-rootsize = break-get($min, 'rootsize')  // TODO: ? not now stylus has globals

          if $current-breakpoint == 0 and $max == 0
            {block}
          else
            $minw = break-get($min, 'start')
            $maxw = null

            if map-has-key($breakpoint-map, $max)
              $maxw = break-get($max, 'start') - 1px
            else
              warn($max + ' is not a valid breakpoint number')

            if $min != 0 and $max != 0
              +media($minw, $maxw)
                {block}
            else if $min != 0
              +media($minw)
                {block}
            else if $max != 0
              +media(0, $maxw)
                {block}

          // reset current breakpoint context
          $current-breakpoint = 0  // TODO: ? not now stylus has globals
          $current-rootsize = break-get(0, 'rootsize')  // TODO: ? not now stylus has globals
        else
          warn($min + ' is not a valid breakpoint number')

      else
        if $min-unit == 'px' or $min-unit == 'em' 
            // If using other numbers output value in ems either for min, min & max or max width breakpoints.
            if $max-unit == 'px' or $max-unit == 'em'
                $query = '(min-width: ' + $min + ') and (max-width: ' + $max + ')'
            else
                $query = '(min-width: ' + $min + ')'
        else if $max-unit == 'px' or $max-unit == 'em' 
          $query = '(max-width: ' + $max + ')'
        else
          error($min + ' and ' + $max + ' are not valid for use in media query mixin - must use px or ems')
        
        if $query != 'all' 
          @media $query
            {block}
        else 
          error($min + ' and ' + $max + ' did not resolve to a valid media query, styles not output')

    else
      error($min + ' and ' + $max + ' values do not form a valid media query')  
  else
    warn('Provided ' + $min + ' and ' + $max + ' breakpoints are the same and will not produce any styles, so this query has not been output')


// WARNING: depreciated, may not work in future versions
// fallback included for backwards compatible support
breakpoint-layout($min = 0, $max = 0)
  warn('breakpoint-layout mixin depreciated in 1.0.11 and may not work in future versions. Use media mixin instead')

  +media($min, $max)
    {block}


// apply min-width media query to one or more breakpoints
min-width($apply-breaks = 0)
  for $break in $apply-breaks
    +media($break)
      {block}


// apply max-width media query to one or more breakpoints
max-width($apply-breaks = 1)
  for $break in $apply-breaks
    +media(0, $break)
      {block}


// apply a style at all breakpoints, taking into account any change in baseline at different breakpoints
all-breakpoints()
  for $break in $breaks
    +media($break)
      {block}




// =====================================================
// --------------- Megatype debug mixins ---------------
// =====================================================
// @author Thomas Bredin-Grey <tom@studiothick.com>
// Megatype: https://github.com/StudioThick/megatype
// =====================================================

// debug breakpoints
debug-breakpoints()
  if $debug-breakpoints == true and $debug-allow == true
    html
      &::before
        display: block
        box-sizing: border-box
        animation-fill-mode: both
        min-height: 3em
        line-height: 1.6
        text-align: center
        background-color: $debug-base
        //Function transparentize is not supported in Stylus
        //background-color: transparentize($debug-base, 0.15)
        background-color: transparentify($debug-base, #fff, 0.15)
        color: #fff
        font-size: $debug-size
        z-index: 99999
        padding: 0.75em 2em
        text-shadow: 0 -1px 0 darken($debug-base, 25%)
        animation: debug-in 0.75s $easeOutCubic
        position: fixed
        bottom: 0
        left: 0
        right: 0
        font-feature-settings: "kern" 1, "onum" 0, "lnum" 1, "liga" 1
        font-family: font-family-of($monospace)
        -webkit-font-smoothing: subpixel-antialiased

        +all-breakpoints()
          content: ('breakpoint: ' + $current-breakpoint ' --- start: ' + break-get($current-breakpoint, start) + ' --- max-width: ' + break-get($current-breakpoint, max))


// debug grid
debug-grid()
  if $debug-grid == true and $debug-allow == true
    body
      position: relative
      height: auto !important  // makes sure grid will span down screen as scrolling
      z-index: 0

      &::before
        +all-breakpoints()
          // vertical grid starts at 0
          // for horizontal grid, starts at center, is more complex to draw
          background: linear-gradient(to bottom, transparentify(darken($debug-base, 5%), #fff, 0.4) 1px, transparent 1px, transparent $current-rootsize), linear-gradient(to right, transparent 0px, transparent $current-rootsize / 2 - 1px, transparentify(darken($debug-base, 5%), #fff, 0.9) $current-rootsize / 2 - 1px, transparentify(darken($debug-base, 5%), #fff, 0.9) $current-rootsize / 2, transparent $current-rootsize / 2, transparent $current-rootsize)
          background-repeat: repeat
          background-position: center top
          background-size: $current-rootsize $current-rootsize
          position: absolute
          top: 0
          left: 0
          right: 0
          bottom: 0
          z-index: 99998
          content: ''
          pointer-events: none

      > *
        opacity: 0.75


// debug site root size
debug-rootsize($sizes)
  if $debug-allow == true and $debug-type == true
    &::after
      content: ('rootsize: ' + $sizes[0] + ' (' + $sizes[0] / 16px * 100% + ')')
      display: inline-block
      position: fixed
      top: 0
      left: 0
      width: auto
      background-color: $debug-base
      //Function transparentize is not supported in Stylus
      //background-color: transparentize($debug-base, 0.15)
      background-color: transparentify($debug-base, #fff, 0.15)
      color: white
      animation: debug-in 0.75s $easeOutCubic
      margin-left: 0
      padding: 0 1em
      line-height: 3em
      border-bottom-right-radius: 0.5em
      font-size: $debug-size
      font-family: font-family-of($monospace)
      -webkit-font-smoothing: subpixel-antialiased
      z-index: 1000

      +all-breakpoints()
        content: ('rootsize: ' + break-get($current-breakpoint, 'rootsize') + ' (' + break-get($current-breakpoint, 'rootsize') / 16px * 100% + ')')

// debug typeset typography
debug-type($type-top, $type-bottom, $type-space, $color-space, $color-type, $offset-shift)
  if $debug-allow == true and $debug-type == true
    &::before
    &::after
      content: ''
      display: block
      position: absolute
      width: 100%
      left: 0
      box-sizing: border-box
      pointer-events: none

    &::before
      top: px-to-rem(-1 * $type-top + 1px)
      bottom: px-to-rem(-1 * $type-bottom + $type-top)
      //Function transparentize is not supported in Stylus
      //background: transparentize($color-space, 0.7)
      background-color: transparentify($color-space, #fff, 0.7)
      outline: 1px solid transparentify(darken(mix($color-type, $color-space), 10%), #fff, 0)

    &::after
      top: px-to-rem($type-space + $offset-shift)
      bottom: px-to-rem($type-space - $offset-shift)
      //Function transparentize is not supported in Stylus
      //background: transparentize($color-type, 0.7)
      background-color: transparentify($color-type, #fff, 0.7)

    if $debug-hover == false
      &:hover
        &::before
          //Function transparentize is not supported in Stylus
          //background: transparentize($color-space, 0.5)
          background-color: transparentify($color-type, #fff, 0.5)

        &::after
          //Function transparentize is not supported in Stylus
          //background: transparentize($color-type, 0.5)
          background-color: transparentify($color-type, #fff, 0.5)

if $debug-grid == true and $debug-allow == true
  // debug grid - lets grid show through images
  img
    opacity: 0.75

if $debug-allow == true
  if $debug-breakpoints == true or $debug-type == true

    // fade in
    @keyframes debug-in
      0%   { opacity: 0; }
      100% { opacity: 1; }



// =====================================================
// -------------- Megatype Susy container --------------
// =====================================================
// @author Thomas Bredin-Grey <tom@studiothick.com>
// Megatype: https://github.com/StudioThick/megatype
// =====================================================
// sets containers for all breakpoints. It is important to use this to avoid incorrect breakpoint values due to type scaling
set-container()
  +all-breakpoints()
    // apply max width and show debugging
    if !!break-get($current-breakpoint, 'max')  // != none
      max-width: break-get($current-breakpoint, 'max')

      if $debug-breakpoints == true and $debug-allow == true
        //Function transparentize is not supported in Stylus
        //background-color: transparentize($debug-base, 1 - $debug-opacity)
        background-color: transparentify($debug-base, #fff, 1 - $debug-opacity)
        background-clip: border-box


// =====================================================
// ------------ Megatype typography mixins -------------
// =====================================================
// @author Thomas Bredin-Grey <tom@studiothick.com>
// Megatype: https://github.com/StudioThick/megatype
// =====================================================

// type shorthand helpers
// get font family
font-family-of($type)
  //Function map-get is not supported in Stylus
  //unquote(map-get($type, font-family))
  return unquote($type['font-family'])

font-family-fallback-of($type)
  //Function map-get is not supported in Stylus
  //unquote(map-get($type, font-family-fallback))
  return unquote($type['font-family-fallback'])

// get bold weight
bold-of($type)
  //Function map-get is not supported in Stylus
  //map-get($type, bold)
  return $type['bold']

// get regular weight
regular-of($type)
  //Function map-get is not supported in Stylus
  //map-get($type, regular)
  return $type['regular']

// get cap-height
cap-height-of($type)
  //Function map-get is not supported in Stylus
  //map-get($type, cap-height)
  return $type['cap-height']

// get cap-height weight
italic-of($type)
  //Function map-get is not supported in Stylus
  //map-get($type, italic)
  return $type['italic']


// Root font-size in %, outputted in correct breakpoints.
rootsize()
  // we will want to update this value before calculating rootsize, just in case it's updated by the user
  $sizes = ()
  for $break in $breaks
    //Function map-get is not supported in Stylus
    //$sizes = join($sizes, map-get(map-get($breakpoint-map, $break), rootsize))
    $tempBp = join('', $break)
    push($sizes, $breakpoint-map[$tempBp]['rootsize'])
  html
    $default-break-key = $default-break
    font-size: no-unit($sizes[$default-break] / 16px) * 100%
  
    $min-size = ($sizes[$default-break] * $sizes[0] / $sizes[1])
    $max-size = $sizes[$default-break]
    $min-width = (break-get($breaks[1], 'start') / 2)
    $max-width = break-get($breaks[1], 'start')
  
    if $baseline-scaling == true
      if $default-break == 0
        $min-width-bp-em = px-to-em(break-get($breaks[0], 'start') / 2)
  
        @media screen and (min-width: $min-width-bp-em)
          $tempFzPart1 = (unit($max-size, '') - unit($min-size, ''))
          $tempFzPart2 = (unit($max-width, '') - unit($min-width, ''))
          $tempFz = convert('calc(' +  $min-size + ' + ' + $tempFzPart1 + ' * (100vw - ' +  $min-width + ') / ' + $tempFzPart2 + ')')
          font-size: $tempFz
          // minSize: $min-size
          // maxSize: $max-size
          // minWidth: $min-width
          // maxWidth: $max-width
      else
        warn("baseline scaling is currently only supported by mobile-first setups: please set $default-break: 0; to use this feature")
    
    if $default-break < $breakpoint-count - 1
      for $i in ($default-break + 1)..($breakpoint-count - 1)
        $i_up = $i + 1
        $i_down = $i - 1
      
        +min-width($i)
          $min-size = $sizes[$i]
          // minSize: $min-size
          $min-width = break-get($breaks[$i], 'start')
          font-size: no-unit($min-size / 16px) * 100%
          
          if $baseline-scaling == true
            if $default-break == 0
              if $i < $breakpoint-count - 1
                // minSizeSmall: $min-size
                $max-size = $sizes[$i_up]
                $max-width = break-get($breaks[$i_up], 'start')
                
                $tempFzPart1 = (unit($max-size, '') - unit($min-size, ''))
                $tempFzPart2 = (unit($max-width, '') - unit($min-width, ''))
                $tempFz = convert('calc(' +  $min-size + ' + ' + $tempFzPart1 + ' * (100vw - ' +  $min-width + ') / ' + $tempFzPart2 + ')')
                font-size: $tempFz
              else
                // largest breakpoint. Keep the scaling consitent with the previous breakpoint
                // minSizeBig: $min-size
                $size-diff = ($sizes[$i] - $sizes[$i_down])
                $width-diff = (break-get($breaks[$i], 'start') - break-get($breaks[$i_down], 'start'))
                $max-size = ($sizes[$i] + $size-diff)
                $max-width = (break-get($breaks[$i], 'start') + $width-diff)
                
                $tempFzPart1 = (unit($max-size, '') - unit($min-size, ''))
                $tempFzPart2 = (unit($max-width, '') - unit($min-width, ''))
                $tempFz = convert('calc(' +  $min-size + ' + ' + $tempFzPart1 + ' * (100vw - ' +  $min-width + ') / ' + $tempFzPart2 + ')')
                font-size: $tempFz
      
              // i: $i
              // typof_i: typeof($i)
              // minSizeFin: 'error'
              // maxSizeFin: $max-size
              // minWidthFin: $min-width
              // maxWidthFin: $max-width
  
            else
              warn('baseline scaling is currently only supported by mobile-first setups: please set $default-break: 0; to use this feature')
    
    if $default-break > 0
      for $i in ($default-break)..(1)
        $i_up = $i + 1
        $i_down = $i - 1
     
        +max-width($i)
          $min-size = $sizes[$i_down]
          $min-width = break-get($breaks[$i_down], 'start')
          font-size: no-unit($min-size / 16px) * 100%
      
          if $baseline-scaling == true
            warn('baseline scaling is currently only supported by mobile-first setups: please set $default-break: 0; to use this feature')

  html
    debug-rootsize($sizes)
  

#TEST
  ARRIVA: 10
  

typeset($font, $fontsize, $lineheight, $leader = 0px, $trailer = 0px, $snap = $baseline-snap, $use-subdivisions = $baseline-subdivisions)
  //Function index is not supported in Stylus
  //$context = index($breaks, $current-breakpoint)
  $context = index($breaks, $current-breakpoint)
  
  breaks: $breaks
  curBp: $current-breakpoint
  context: $context
  
  // Lets write some tests first
  // This way we can disallow unintended values and catch unexpected errors
  // throw error if all values aren't numbers
  if type-of($fontsize) != 'unit'
    error($fontsize + ' is not a valid format for the typeset mixin: $fontsize must be a unit')
  if type-of($lineheight) != 'unit'
    error($lineheight + ' is not a valid format for the typeset mixin: $lineheight must be a unit')
  if type-of($leader) != 'unit'
    error($leader + ' is not a valid format for the typeset mixin: $leader must be a unit')
  if type-of($trailer) != 'unit'
    error($trailer + ' is not a valid format for the typeset mixin: $trailer must be a unit')

  // throw error if $font is not a map
  if type-of($font) != 'object'
    error($font + ' is not a valid config for the typeset mixin: $font must be a valid typeface object(hash)')
  else if map-has-key($font, 'cap-height') == false
    // throw error if $font has no cap-height
    error(keys($font) + 'map contains no cap-height key: $font must be a valid typeface object(hash)')  // { TODO: вместо inspect() найти аналог в stylus }

  // throw error if incorrect format provided
  if unitless($fontsize) == false and unit($fontsize) != 'px' and unit($fontsize) != 'rem' or type-of($fontsize) != 'unit'
    error($fontsize + ' is not a valid format for the typeset mixin: $fontsize must be provided as unitless, px, or rem')
  if unitless($lineheight) == false and unit($lineheight) != 'px' and unit($lineheight) != 'rem'
    error($lineheight + 'is not a valid format for the typeset mixin: $lineheight must be provided as unitless, px, or rem')
  if unitless($leader) == false and unit($leader) != 'px' and unit($leader) != 'rem'
    error($leader + 'is not a valid format for the typeset mixin: $leader must be provided as unitless, px, or rem')
  if unitless($trailer) == false and unit($trailer) != 'px' and unit($trailer) != 'rem'
    error($trailer + 'is not a valid format for the typeset mixin: $trailer must be provided as unitless, px, or rem')

  // check min-font-size, if provided
  if $min-font-size != false
    if unitless($min-font-size) == false and unit($min-font-size) != 'px' and unit($min-font-size) != 'rem'
      error($min-font-size + 'is not a valid format for the typeset mixin: $min-font-size must be provided as unitless, px, or rem')

  // With our tests for valid input out of the way, we are free to proceed
  // Start by converting all unitless values to rem, and then to pixels
  // If unitless values provided, convert to rem (remember; 1rem = 1 baseline unit)
  if unitless($fontsize)
    $fontsize = $fontsize * 1rem
  if unitless($lineheight)
    $lineheight = $lineheight * 1rem

  // only convert leader and trailer if snap is off
  if unitless($leader)
    $leader = $leader * 1rem
  if unitless($trailer)
    $trailer = $trailer * 1rem

  if $min-font-size != false
    if unitless($min-font-size)
      $min-font-size = $min-font-size * 1rem
    //  Converting min font size to pixels
    if unit($min-font-size) == 'rem'
      $min-font-size = rem-to-px($min-font-size)
  if unit($fontsize) == 'rem'
    $fontsize = rem-to-px($fontsize)
  if unit($lineheight) == 'rem'
    $lineheight = rem-to-px($lineheight)
  if unit($leader) == 'rem'
    $leader = rem-to-px($leader)
  if unit($trailer) == 'rem'
    $trailer = rem-to-px($trailer)

  // With universal rem values, it's now easy to convert to px
  // We will work in px for most of the rest of this mixin, and convert back to rem at the end
  // if min-font-size has been provided, let's first do a quick cheack against that, and modify our fontsize if required
  // this can be helpful for accessibility reasons
  if $min-font-size != false
    if $fontsize < $min-font-size
      $fontsize = $min-font-size

  // We also need to store our cap-height
  $cap-height = $font['cap-height']
  // Store cap position
  $cap-position = $font['cap-position']

  // check cap position is non-null, otherwise assign default of 0.5
  if typeof($cap-position) == 'null'
    $cap-position = 0.5
  // work out what proportion to shift our type by
  $cap-offset = (0.5 - $cap-position) * -1
  // Let's set our font-size in rems
  $fs-rem = px-to-rem($fontsize)
  // warn about a known chrome bug
  if $fs-rem <= 0.5rem
    warn($fontsize + 'calculates to smaller than 0.5rem, may not render baseline correctly in some browsers (known bug in Chrome as of v46)')
  // set the size
  font-size: $fs-rem
  // store a unitless size value for calulating offsets later
  $fs-calc = no-unit($fontsize)
  // Next, set our linehight as a unitless value
  // if baseline snap is on, we'll round these values to 1 baseline unit (1rem)
  // $snap == true 
  if $snap == true
    // set default for subdivisions if not set, or explicitly turned off
    if type-of($use-subdivisions) != 'unit'
      $use-subdivisions = 1
    if $use-subdivisions > 1 and $current-rootsize % $use-subdivisions > 0
      warn('You have specified a baseline subdivision (' + $use-subdivisions + ') for break ' + $current-breakpoint + ' (rootsize ' + $current-rootsize + ') that will not resolve to whole pixel line-heights (' + $current-rootsize + ' / ' + $use-subdivisions + ' = ' + $current-rootsize / $use-subdivisions + '). This will cause severe rounding errors in browsers that will push your type off the grid; it is recommended you review your settings.')
    // starting with lineheight, convert to rem and round the value, then convert back to px
    $lineheight = rem-to-px(round(px-to-rem($lineheight * $use-subdivisions))) / $use-subdivisions

  // compute an integer and set the line height
  $lh-integer = no-unit($lineheight / $fontsize)
  line-height: $lh-integer


  leader: $leader
  lineheight: $lineheight
  curRootSize: $current-rootsize
  ask: 10px % 3px;
  useSubdivisions: $use-subdivisions
  modCrsUsd:  $current-rootsize % $use-subdivisions > -1
  usdMore1: $use-subdivisions > 1
  test222: $use-subdivisions > 1 and $current-rootsize % $use-subdivisions > 0
  lhInteger: $lh-integer

 
  // we have to correct for a bug with the way webkit safari renders unitless line height :(
  // It computes line height to the correct value but often when rendered to the screen it rounds 1px incorrectly.
  // See: https://bugs.webkit.org/show_bug.cgi?id=155286
  if $webkit-line-height-fix == true
    @media screen and (-webkit-min-device-pixel-ratio: 0)
      line-height: px-to-rem($lineheight)

  // store a unitless value for calulating offsets later
  $lh-calc = no-unit($lineheight)

  // Set our leader and trailer values.
  // first we need to shift our type to sit on the baseline. For this we'll use relative positioning and top
  // we'll avoid collapsing margins by using padding above, and margin below
  $type-proportion = $fs-calc * $cap-height  // height in px of type itself (this is the space taken up between the real baseline and cap height)
  $type-space = 1px * ($lh-calc - $type-proportion) / 2  // extra space below baseline, and above cap height

  // calculate cap-shift. This is the space in pixels that a typeface needs to move to be centered in it's line-height
  $cap-shift = $fontsize * $cap-offset - 0.75px

  // initialising a few helper variables for calculating our offset
  $modulo = 0
  $shift = 0


  typeProportion: $type-proportion
  typeSpace: $type-space
  curRootSize: $current-rootsize
  lhcalc: $lh-calc

  
   // if baseline snap is on, we'll need to shift our type to sit perfectly on the baseline grid
  if $snap == true
    // set a shift in order to match baseline onto grid
    // calculate remainder of top value that doesn't sit on grid. we need to correct for this
    $tempExpression = ($leader + $lineheight - 2 * $type-space)
    $modulo = $tempExpression % $current-rootsize
    if $modulo < $current-rootsize / 2
      $shift = -($modulo)
    else
      $shift = $current-rootsize - $modulo
    // @debug $current-breakpoint $leader $modulo $current-rootsize / 2 $modulo < $current-rootsize / 2 $shift;
  
  leader: $leader
  lineHeight: $lineheight
  typeSpace: $type-space
  tempExpression: $tempExpression
  curRootSize: $current-rootsize
  modulo: $modulo


  // $type-top: $leader;
  $type-top = $leader - $type-space + $shift - $cap-shift
  $type-bottom = $trailer - $type-space + $type-top + $cap-shift
  
  if $snap == true
    $type-bottom = rem-to-px(round(px-to-rem($type-bottom)))

  position: relative

  if $type-top == 0px
    // exactly 0, don't use units
    top: 0
  else
    // otherwise, use top
    top: px-to-rem($type-top)

  if $type-bottom == 0px
    // exactly 0, don't use units
    margin-bottom: 0
  else
    // otherwise, use margin
    margin-bottom: px-to-rem($type-bottom)

  // Test to validate resulting baseline.
  // should warn user if baseline math outputs something unexpected
  // tolerance is 1px by default, can be set in config, see $debug-tolerance variable
  // TODO: Fix this when used with $use-subdivisions
  // @if $snap == true  {
  //     $snap-check: rem-to-px(($fs-rem * $lh-integer + px-to-rem($type-bottom))) % ($current-rootsize / $use-subdivisions);
  //     @if $snap-check > $debug-tolerance or $snap-check < -$debug-tolerance {
  //         @warn "baseline grid appears to be calculated off by #{$snap-check} at breakpoint #{$current-breakpoint} ($debug-tolerance: #{$debug-tolerance})"
  //     }
  // }

  theShift: $shift
  capShift: $cap-shift
  
  // apply debugging
  if $debug-hover == true
    &:hover
      debug-type($type-top, $type-bottom, $type-space, $debug-cap, $debug-spacing, $cap-shift)
  else
    debug-type($type-top, $type-bottom, $type-space, $debug-cap, $debug-spacing, $cap-shift)

  $offset = 10
  $calcedVal = convert('0 calc(43% + 0.44em + ' + $offset + ')')
  xXXXX: $calcedVal


// resets type, negates type rhythm
reset-type()
  top: auto
  margin-bottom: 0

  if $debug-allow == true and $debug-type == true
    &::before
    &::after
      display: none
      content: none



// initialise megatype
megatype()
  // For typesetting, we need to reset margins and padding on type elements
  h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, label, legend, caption, figcaption
    margin: 0
    padding: 0

  rootsize()
  debug-breakpoints()
  debug-grid()


megatype()

// We can set our type using pixels, rems or baseline units

// Heading level 1.
h1
  // Set font-family
  font-family: font-family-of($sans)
  // Set type settings
  typeset($font: $sans, $fontsize: 38px, $lineheight: 38px, $leader: 2, $trailer: 2rem)

// Heading level 2.
h2
  font-family: font-family-of($sans)
  typeset($sans, 26px, 28px, 2, 1)


// Paragraph.
p
  font-family: font-family-of($sans)
  typeset($sans, 16px, 2rem, 0, 2)