@require './colors.styl'
/**
 * font weight
 */
$lightFontWeight = 300
$regularFontWeight = 400
$semiBoldFontWeight = 600
$boldFontWeight = 700

$light = 300
$regular = 400
$medium = 500
$semiBold = 600
$bold = 700

/**
 * font family
 */
$roboto = 'Roboto'
$ffwdIcons = 'FFWD Icons'
$sourceCodePro = 'Source Code Pro'
$commonFontFamily = $roboto, Arial, Helvetica, sans-serif

/**
 * timing function
 */
$standardCurve = cubic-bezier(0.4, 0.0, 0.2, 1) // movement within screen
$decelerationCurve = cubic-bezier(0.0, 0.0, 0.2, 1)  // element entering screen
$accelerationCurve = cubic-bezier(0.4, 0.0, 1, 1) // element permanently leaving screen
$sharpCurve = cubic-bezier(0.4, 0.0, 0.6, 1) // element tempararily leaving screen

/**
 * box-shadow
 */
$commonBoxShadow(opacity = .4, color = $primary)
  box-shadow: 1px 1px 6px alpha(color, opacity)

$mediumBluryBoxShadow(opacity = .2)
  box-shadow: 3px 3px 15px alpha($primary, opacity)

$largeBluryBoxShadow(opacity = .1)
  box-shadow: 0 0 100px alpha($primary, opacity)

/**
 * border-radius
 */
$smallerBorderRadius()
  border-radius: 3px

$smallBorderRadiusVar = 6px
$smallBorderRadius()
  border-radius: $smallBorderRadiusVar

$mediumBorderRadius()
  border-radius: 14px

$largeBorderRadius()
  border-radius: 16px

/**
 * z-index
 */
$modalLevelZIndex = 100
$popoverLevelZIndex = 200
$tooltipLevelZIndex = 300
$globalSpinnerLevelZIndex = 1000

/**
 * NOTE: too long to remember
 * -webkit-overflow-scrolling
 */
$webkitSmoothScrolling()
  -webkit-overflow-scrolling: touch

$autoOverflowY()
  overflow-y: auto
  -webkit-overflow-scrolling: touch

$autoOverflowX()
  overflow-x: auto
  -webkit-overflow-scrolling: touch

$scrollElmBottomSpace(height = 50px)
  &::after // NOTE: make some bottom spacing with ::after
    content: ''
    display: block
    height: height

$textOverflowEllipsis()
  overflow-x: hidden
  white-space: nowrap
  text-overflow: ellipsis

$scrollbarStyle()
  &::-webkit-scrollbar
    width: 1em;

/**
 * responsive mixins
 */
$narrowerThan(max)
  @media only screen and (max-width: unit(max, px))
    {block}

$between(min, max)
  @media only screen and (min-width: unit(min + 1, px)) and (max-width: unit(max, px))
    {block}

$widerThan(min)
  @media only screen and (min-width: unit(min + 1, px))
    {block}

/**
 * retina mixins
 */
$retina(file, ext = png)
  background-image: url(file'.'ext)
  background-size: 100% auto
  background-repeat: no-repeat

  @media (min-resolution: 1.5 dppx), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5)
    background-image: url(file'@2x.'ext)

  @media (min-resolution: 3 dppx), (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3)
    background-image: url(file'@3x.'ext)

/**
 * Transition
 */
transit(property, duration = .5s, delay = 0s, curve = $standardCurve)
  return unquote(property + ' ' + duration + ' ' + curve + ' ' + delay);

transitTransform(duration = .5s, delay = 0s, curve = $standardCurve)
  return transit('transform', duration, delay, curve)

transitOpacity(duration = .5s, delay = 0s, curve = $standardCurve)
  return transit('opacity', duration, delay, curve)

/**
 * Common styles
 */
commonFontStyles()
  font-family: $commonFontFamily
  font-weight: $regular
  font-size: 16px
  color: $black