/*
 * triangle: bottom, 5x, red, true
 * border: ...
 */

triangle($direct = bottom, $size = 5px, $c = inherit, $pseudo = false)
  if $pseudo == true
    content: ''
    position: absolute
    margin: 0
    left: auto
    top: auto
    right: auto
    bottom: auto
  border: $size solid transparent
  if $direct == bottom
    border-top-color: $c
    if $pseudo == true
      left: 50%
      top: 100%
      margin-left: -($size)
  else if $direct == top
    border-bottom-color: $c
    if $pseudo == true
      left: 50%
      bottom: 100%
      margin-left: -($size)
  else if $direct == left
    border-right-color: $c
    if $pseudo == true
      right: 100%
      top: 50%
      margin-top: -($size)
  else if $direct == right
    border-left-color: $c
    if $pseudo == true
      left: 100%
      top: 50%
      margin-top: -($size)

mlink(scale=true, c='accent-2', cHover=inherit)
  transition: color 0.2s, transform 0.2s
  backface-visibility: hidden
  &:hover
    theme(color cHover)
  &:active
    theme(color c)
    if scale
      transform: scale3d(0.95, 0.95, 1)

o(c = red, o = 0.3)
  outline: 1px solid rgba(c, o)
  outline-offset: -1px

debug(level = 1)
  o(red)
  if level > 1
    & > *
      o(blue)
  if level > 2
    & > * > *
      o(green)
  if level > 3
    & > * > * > *
      o(orange)
  if level > 4
    & > * > * > * > *
      o(yellow)
/*
 * border: <color>
 * border: ...
 */
border(color, args...)
  if color is a 'color'
    border: 1px solid color args
  else
    border: arguments

clearfix()
  &:after
    content: ""
    display: table
    clear: both


sticky-footer(height, $footer = ".site-footer")
  html
    position: relative
    min-height: 100%
  body
    margin-bottom: height
  {$footer}
    position: absolute
    left: 0
    bottom: 0
    height: height
    width: 100%

/*
  new-color("red", #f00)
  .color-red {color: #fff;}
*/
new-color($c, $name)
  .color-{$name}
    color: $c

black(o)
  rgba(0, 0, 0, o)
white(o)
  rgba(255, 255, 255, o)


hide-text()
  font: 0/0 a
  text-shadow: none
  color: transparent

display()
  if arguments == inline-block
    display: inline-block
    zoom: 1
    *display: inline
    vertical-align: middle
  else
   display: arguments

stroke-text(c)
  text-shadow: 1px 1px 1px c, 1px -1px 1px c, 1px 1px 1px c, -1px -1px 1px c

checkbox-label()
  line-height: 1.2
  display: block
  padding-left: 21px
  text-indent: -23px
  @media min
    padding-left: 33px
    text-indent: -30px
    backface-visibility: hidden


easeInSine     = cubic-bezier(0.47, 0, 0.745, 0.715)
easeOutSine    = cubic-bezier(0.39, 0.575, 0.565, 1)
easeInOutSine  = cubic-bezier(0.445, 0.05, 0.55, 0.95)

easeInQuad     = cubic-bezier(0.55, 0.085, 0.68, 0.53)
easeOutQuad    = cubic-bezier(0.25, 0.46, 0.45, 0.94)
easeInOutQuad  = cubic-bezier(0.455, 0.03, 0.515, 0.955)

easeInCubic    = cubic-bezier(0.55, 0.055, 0.675, 0.19)
easeOutCubic   = cubic-bezier(0.215, 0.61, 0.355, 1)
easeInOutCubic = cubic-bezier(0.645, 0.045, 0.355, 1)

easeInQuart    = cubic-bezier(0.895, 0.03, 0.685, 0.22)
easeOutQuart   = cubic-bezier(0.165, 0.84, 0.44, 1)
easeInOutQuart = cubic-bezier(0.77, 0, 0.175, 1)

easeInQuint    = cubic-bezier(0.755, 0.05, 0.855, 0.06)
easeOutQuint   = cubic-bezier(0.23, 1, 0.32, 1)
easeInOutQuint = cubic-bezier(0.86, 0, 0.07, 1)

easeInExpo     = cubic-bezier(0.95, 0.05, 0.795, 0.035)
easeOutExpo    = cubic-bezier(0.19, 1, 0.22, 1)
easeInOutExpo  = cubic-bezier(1, 0, 0, 1)

easeInCirc     = cubic-bezier(0.6, 0.04, 0.98, 0.335)
easeOutCirc    = cubic-bezier(0.075, 0.82, 0.165, 1)
easeInOutCirc  = cubic-bezier(0.785, 0.135, 0.15, 0.86)

easeInBack     = cubic-bezier(0.6, -0.28, 0.735, 0.045)
easeOutBack    = cubic-bezier(0.175, 0.885, 0.32, 1.275)
easeInOutBack  = cubic-bezier(0.68, -0.55, 0.265, 1.55)


.clear
  &:after
    content: ""
    display: table
    clear: both

// Journal columns
.tpl-block-journal
  text-align: justify
  line-height: 0
  font-size: 1px
  text-justify: newspaper
  zoom: 1
  text-align-last: justify
  noindex:-o-prefocus, &
    text-align: left
  &:after
    width: 100%
    height: 0
    visibility: hidden
    overflow: hidden
    content: ''
    display: inline-block
  &-column
    display: inline-block
    text-align: left
    font-size: fontSize
    line-height: lineHeight
    vertical-align: top


// --------------------------------- THEMING -----------------------------------


/*theme(attr, colorName = '')*/
/**
 *   theme(color 'bg')
 */
/*theme(what, arg2 = '')*/
theme(what)
  attr = what[0]
  // if what[1] is defined
  colorName = what[1]
  //else
  //  colorName ?= arg2

  first = true

  for t in themes
    value = false
    if first
      first = false
      if colorName in themes[t]
        value = themes[t][colorName]
      else if colorName in default-colors
        value = default-colors[colorName]
      else
        value = unquote(colorName)

      if value != false
        &
          {attr}: value
    else
      c = ".tpl-theme-" + t

      if colorName in themes[t]
        value = themes[t][colorName]
      else if not (colorName in default-colors)
        value = unquote(colorName)

      if value != false
        {c} &
          {attr}: value


/*
theme-string(string, colorName)
  for t in themes
    c = ".tpl-theme-" + t
    if colorName in themes[t]
      value = themes[t][colorName]
      {c} &
        (string % value)
    else
      value = '%s' % colorName
      {c} &
        (string % value)
*/
// -------------------------------- GRADIENTS ----------------------------------

gradient-bottom(bg-color = bgColor)
  &:after
    content: ''
    position: absolute
    left: 0
    top: 100%
    height: 15px
    width: 100%
    background: linear-gradient(to top, rgba(bg-color, 0), bg-color)

gradient-right(bg-color = bgColor, gradient-width = 200px)
  &:after
    content: ''
    position: absolute
    top: 0
    right: 0
    background: linear-gradient(to right, rgba(bg-color, 0), bg-color 70%)
    height: 100%
    width: gradient-width


// ----------------------------- MISC HELPERS -----------------------------------

price-strike-through(line-position = 52%)
  &:after
    content: ''
    border-bottom-width 2px
    border-bottom-style solid
    theme(border-color 'price-strike')
    left: 0
    top: line-position
    width: 100%
    height: 0
    position: absolute

//-------------------------------------------------------------------------

dashed-underline(color, offset=2px)
  &
    text-decoration none
    position relative
  &:after
    content       ''
    position      absolute
    bottom        offset
    left          0
    width         100%
    height        1px
    border-bottom 1px dashed color