$support-for-original-webkit-gradients: false
$legacy-support-for-ie: false
$hide-text-direction: right
$default-border-radius: 4px

=retina
  @media only screen and (#{-webkit-min-device-pixel-ratio}: #{1.5}), only screen and (#{min-device-pixel-ratio}: #{1.5})
    @content

=webkit
  @media screen and (-webkit-min-device-pixel-ratio: 0)
    @content


// TRICKY GRADIENTS
=gradient-vertical($start-color: #555, $end-color: #333)
  @if alpha($start-color) == 1 and alpha($end-color) == 1
    background-color: $end-color
    +background-image(linear-gradient($start-color, rgba($end-color,0)))
  @else
    +background-image(linear-gradient($start-color, $end-color))
  background-repeat: repeat-x
  filter: progid:DXImageTransform.Microsoft.gradient(start-colorstr='#{ie-hex-str($start-color)}', end-colorstr='#{ie-hex-str($end-color)}', GradientType=0)
=gradient-horizontal($start-color: #555, $end-color: #333)
  @if alpha($start-color) == 1 and alpha($end-color) == 1
    background-color: $end-color
    +background-image(linear-gradient(left,$start-color, rgba($end-color,0)))
  @else
    +background-image(linear-gradient(left,$start-color, $end-color))
  background-repeat: repeat-x
  filter: progid:DXImageTransform.Microsoft.gradient(start-colorstr='#{ie-hex-str($start-color)}', end-colorstr='#{ie-hex-str($end-color)}', GradientType=1)

=gradient-striped($color, $stripe-color: rgba(white,.15), $angle: -45deg)
  background-color: $color
  background-image: -webkit-linear-gradient($angle, $stripe-color 25%, transparent 25%, transparent 50%, $stripe-color 50%, $stripe-color 75%, transparent 75%, transparent)
  background-image: -moz-linear-gradient($angle, $stripe-color 25%, transparent 25%, transparent 50%, $stripe-color 50%, $stripe-color 75%, transparent 75%, transparent)
  background-image: -ms-linear-gradient($angle, $stripe-color 25%, transparent 25%, transparent 50%, $stripe-color 50%, $stripe-color 75%, transparent 75%, transparent)
  background-image: -o-linear-gradient($angle, $stripe-color 25%, transparent 25%, transparent 50%, $stripe-color 50%, $stripe-color 75%, transparent 75%, transparent)
  background-image: linear-gradient($angle, $stripe-color 25%, $stripe-color 25%, $stripe-color 50%, $stripe-color 50%, $stripe-color 75%, rgba(white,0) 75%, rgba(white,0))

=text-shadow-invert($color: $text-invert, $alpha: 0.5, $x: 0, $y: 1px, $blur: 0)
  @if $color == white
    text-shadow: rgba(white,$alpha) $x $y $blur
  @else if $color == black
    text-shadow: rgba(black,$alpha) $x $y $blur
  @else
    text-shadow: $color $x $y $blur

=none-select
  +experimental(user-select, none, -moz, -webkit, not -o, -ms, not -khtml, official)

// -----------------
// Mixins used as Extends. Since its just easier to type +mixin instead of @extend class
// -----------------

// Thin out white fonts on dark backgrounds in webkit

%font-smooth
  -webkit-font-smoothing: antialiased

=font-smooth
  @extend %font-smooth

// Popover arrows
// -------------------------
// For tipsies and popovers
=arrow-top($arrow-width: 5px, $arrow-color: $black)
  bottom: 0
  left: 50%
  margin-left: -$arrow-width
  border-left: $arrow-width solid transparent
  border-right: $arrow-width solid transparent
  border-top: $arrow-width solid $arrow-color

=arrow-left($arrow-width: 5px, $arrow-color: $black)
  top: 50%
  right: 0
  margin-top: -$arrow-width
  border-top: $arrow-width solid transparent
  border-bottom: $arrow-width solid transparent
  border-left: $arrow-width solid $arrow-color

=arrow-bot($arrow-width: 5px, $arrow-color: $black)
  top: 0
  left: 50%
  margin-left: -$arrow-width
  border-left: $arrow-width solid transparent
  border-right: $arrow-width solid transparent
  border-bottom: $arrow-width solid $arrow-color

=arrow-right($arrow-width: 5px, $arrow-color: $black)
  top: 50%
  left: 0
  margin-top: -$arrow-width
  border-top: $arrow-width solid transparent
  border-bottom: $arrow-width solid transparent
  border-right: $arrow-width solid $arrow-color


// OVERWRITES TO OUTSIDE LIBRARIES

// Clearfix
=clearfix
  *zoom: 1
  &:before,
  &:after
    display: table
    content: ""
  &:after
    clear: both

.clearfix
  +clearfix

// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
// If you want your base font-size to be a different size and not have it effect grid size too,
// set the value of $em-base to $base-font-size ($em-base: $base-font-size;)
$em-base: 16px !default

// Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px)
@function em($pxWidth)
  @return $pxWidth / $em-base * 1em

=truncate($width)
  text-overflow: ellipsis
  overflow: hidden
  white-space: nowrap
  display: block
  width: $width
