// ---------
// Utilities
// ---------

// Alias: No Select
// You can't highlight this.

no-select()
  -webkit-touch-callout: none
  user-select: none

// Alias: B
// Border, but quicker and with an intelligent default.

b()
  arguments = unquote('1px solid') unless arguments
  border: arguments

// Alias: Transition
//
// Transition with an intelligent default.
//
// ex. transition()
// ex. transition: color 1s ease
// ex. transition(color 1s ease, background 2.4s linear)

transition()
  arguments = unquote('all .3s ease') unless arguments
  transition: arguments

// Alias: Border Box
// A quicker way to specify border-box sizing.

border-box()
  box-sizing: border-box

// Alias: Opentype ligatures
//
// The vast majority of fonts contain lowercase and uppercase alphabets,
// numerals, punctuation and accents. Many professionally-designed fonts
// also contain ligatures, alternative characters, smallcaps, different kinds of
// numbers, and sometimes much more besides. This enables it.
//
// Source: http://www.newnet-soft.com/blog/csstypography
// Additional: http://blog.fontdeck.com/post/15777165734/opentype-1

open-type-ligatures()
  font-feature-settings: "liga", "dlig"

// Alias: Multi-line padding
//
// You can not apply the background and padding to a <span> or an inline element.
// The left and right padding will only apply to the very first and very last line.
// On each of the middle lines, the background will butt up immediately next to the text.
//
// The attribute box-decoration-break solves this problem but needs prefixing.
//
// Source: http://codepen.io/chriscoyier/pen/hIvFe

multi-line-padding()
  box-decoration-break: clone;

// Mixin: Rounded
//
// Unless you are working with a ridiculously large element, this will round the
// corners as much as css will allow. Even in IE.
//
// ex. rounded()

rounded()
  border-radius: 999px

// Mixin: Triangle
//
// One of my favorites. Makes a little css triangle for you. Pass it a direction
// (up, down, left, right), size (in pixels), and a color.
//
// ex. triangle()
// ex. triangle: 'down' 15px blue

triangle($direction = 'up', $size = 10px, $color = #000)
  width: 0
  height: 0
  if $direction == 'up'
    border-left: $size solid transparent
    border-right: $size solid transparent
    border-bottom: $size solid $color
  else if $direction == 'down'
    border-left: $size solid transparent
    border-right: $size solid transparent
    border-top: $size solid $color
  else if $direction == 'left'
    border-top: $size solid transparent
    border-bottom: $size solid transparent
    border-right: $size solid $color
  else if $direction == 'right'
    border-top: $size solid transparent
    border-bottom: $size solid transparent
    border-left: $size solid $color

// Mixin: Debug
//
// Debugging tool - adds a border to the current element, its children,
// grandchildren, etc so you can see what's up – great for precise layout
// tweaks.  It will also add flags if you made mistakes like put in inline
// styles, forgot an alt on an image, left the alt blank, etc. Not to be used
// in production, obviously.
//
// via dbox: http://codepen.io/dbox/pen/GJZzYo?editors=110

debug()
  border 1px solid MediumPurple
  > *
    border 1px solid DarkKhaki
  > * > *
    border 1px solid MediumTurquoise
  > * > * > *
    border 1px solid LightSlateGray
  > * > * > * > *
    border 1px solid LightBlue
  > * > * > * > * > *
    border 1px solid MediumSlateBlue
  > * > * > * > * > * > *
    border 1px solid DeepSkyBlue
  > * > * > * > * > * > * > *
    border 1px solid DarkSeaGreen

  img
    border: 1px solid #f00
    -webkit-filter: hue-rotate(330deg) contrast(.75) saturate(6)
    filter: hue-rotate(330deg) contrast(.75) saturate(6)

  img[alt]
    border: 1px solid LimeGreen
    -webkit-filter: none
    filter: none

  img[alt=""]
    border: 1px solid gold
    -webkit-filter: contrast(1) saturate(2)
    filter: contrast(1) saturate(2)

  a
    background: rgba(#f00, .1)
    border: 1px solid #f00

  a[title]
    background: none
    border-color: LimeGreen

  style
    border: block

  [style], style, [class=""], [id=""], a[href="#"]
    background: rgba(yellow, .2)
    border: 1px solid gold

// Block Mixin: Quantity Queries
//
// Set rules for a selector based on a specific sibling count.
// via: https://github.com/pascalduez/postcss-quantity-queries
//
// ex. +quantity-at-least(6)
// ex. +quantity-at-most(12, div)
// ex. +quantity-between(0, 8, span)
// ex. +quantity-exactly(5)

quantity-at-least($count = 4, $selector = li)
  & > {$selector}:nth-last-child(n+{$count})
  & > {$selector}:nth-last-child(n+{$count}) ~ {$selector}
    {block}

quantity-at-most($count = 4, $selector = li)
  & > {$selector}:nth-last-child(-n+{$count}):first-child
  & > {$selector}:nth-last-child(-n+{$count}):first-child ~ {$selector}
    {block}

quantity-between($start = 0, $end = 10, $selector = li)
  & > {$selector}:nth-last-child(n+{$start}):nth-last-child(-n+{$end}):first-child
  & > {$selector}:nth-last-child(n+{$start}):nth-last-child(-n+{$end}):first-child ~ {$selector}
    {block}

quantity-exactly($count = 4, $selector = li)
  & > {$selector}:nth-last-child({$count}):first-child
  & > {$selector}:nth-last-child({$count}):first-child ~ {$selector}
    {block}

// Function: Rem Calculator
//
// Calculates and returns the rem value based on px input. Default base font
// size is 16px, but can be changed with base-font-size.
//
// ex       : rem(30px) or rem(30)
// returns  : 1.875rem

rem($value)
  $base-font-size ?= 16px
  $type = unit($value)
  if $type == px
    return unit($value / $base-font-size, 'rem')
  else
    return unit($value, $type)

// Custom animation timing functions, ported from bourbon
// https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_timing-functions.scss

// ease-in
$ease-in-quad =      cubic-bezier(0.550,  0.085, 0.680, 0.530)
$ease-in-cubic =     cubic-bezier(0.550,  0.055, 0.675, 0.190)
$ease-in-quart =     cubic-bezier(0.895,  0.030, 0.685, 0.220)
$ease-in-quint =     cubic-bezier(0.755,  0.050, 0.855, 0.060)
$ease-in-sine =      cubic-bezier(0.470,  0.000, 0.745, 0.715)
$ease-in-expo =      cubic-bezier(0.950,  0.050, 0.795, 0.035)
$ease-in-circ =      cubic-bezier(0.600,  0.040, 0.980, 0.335)
$ease-in-back =      cubic-bezier(0.600, -0.280, 0.735, 0.045)
$ease-in-swift =     cubic-bezier(0.900,  0.000, 0.450, 1.000)

// ease-out
$ease-out-quad =     cubic-bezier(0.250,  0.460, 0.450, 0.940)
$ease-out-cubic =    cubic-bezier(0.215,  0.610, 0.355, 1.000)
$ease-out-quart =    cubic-bezier(0.165,  0.840, 0.440, 1.000)
$ease-out-quint =    cubic-bezier(0.230,  1.000, 0.320, 1.000)
$ease-out-sine =     cubic-bezier(0.390,  0.575, 0.565, 1.000)
$ease-out-expo =     cubic-bezier(0.190,  1.000, 0.220, 1.000)
$ease-out-circ =     cubic-bezier(0.075,  0.820, 0.165, 1.000)
$ease-out-back =     cubic-bezier(0.175,  0.885, 0.320, 1.275)
$ease-out-swift =    cubic-bezier(0.550,  0.000, 0.100, 1.000)

// ease-in-out
$ease-in-out-quad =  cubic-bezier(0.455,  0.030, 0.515, 0.955)
$ease-in-out-cubic = cubic-bezier(0.645,  0.045, 0.355, 1.000)
$ease-in-out-quart = cubic-bezier(0.770,  0.000, 0.175, 1.000)
$ease-in-out-quint = cubic-bezier(0.860,  0.000, 0.070, 1.000)
$ease-in-out-sine =  cubic-bezier(0.445,  0.050, 0.550, 0.950)
$ease-in-out-expo =  cubic-bezier(1.000,  0.000, 0.000, 1.000)
$ease-in-out-circ =  cubic-bezier(0.785,  0.135, 0.150, 0.860)
$ease-in-out-back =  cubic-bezier(0.680, -0.550, 0.265, 1.550)
$ease-in-out-swift = cubic-bezier(0.900,  0.000, 0.100, 1.000)