ph($value)
  padding-left: $value
  padding-right: $value

pv($value)
  padding-top: $value
  padding-bottom: $value

vPercent($length)
  designH = 1336px
  ($length / designH * 100)%

ratioFixedHeight($ratio = 1, $pos = 'after')
  &:{$pos}
    content: ' '
    display: block
    height: 0
    visibility: hidden
    padding-bottom: $percentage
    padding-{$pos is 'before' ? top : bottom}: percentage($ratio)
    {block}

avatar($url, $w = null)
  border-radius: 50%
  background: url($url) center/cover no-repeat
  if $w is defined and typeof($w) == 'unit'
    $width = $w
  else
    $width = @width
  $unit = unit($width)
  if $unit == '%'
    ratioFixedHeight(1)
  else
    height: $width

cover()
  width: 100%
  height: 100%

flexCenter($inline = false)
  if $inline
    display: inline-flex
  else
    display: flex
  justify-content: center
  align-items: center

hide()
  border: 0
  clip: rect(0 0 0 0)
  height: 1px
  margin: -1px
  overflow: hidden
  padding: 0
  position: absolute
  width: 1px

tooltip(above = false)
  arrowPos = above ? 'bottom' : 'top'

  z-index 999
  background $black-darker
  rounded()
  display inline-block
  padding 5px 15px
  filter drop-shadow($shadow-basic)
  text-align center

  &:before
    position absolute
    content ''
    rounded()
    display inline-block
    height 10px
    width 10px
    {arrowPos} -3px
    left 50%
    transform translateX(-50%)
    background $black-darker