$direction: 'left' !default;

// Button reset
// Uses !important a few times to quickly reset
// styles from a:link, a:hover, a:visited etc.
@mixin button-reset($bg-top: #fff, $bg-bottom: #eee, $border: #ccc, $text: inherit, $hover-bg-bottom: #e9e9e9, $hover-bg-top: #f9f9f9, $hover-border: #ccc, $hover-text: inherit){
  display: inline-block;
  margin: 0;
  padding: 0.75em 1em;
  width: auto;
  height: auto;
  vertical-align: top;
  text-align: center;

  font-size: 1em;
  line-height: 1em;
  font-weight: bold;
  font-family: inherit;
  text-decoration: none !important;
  color: $text !important;

  cursor: pointer;
  background: $bg-bottom;
  @include linear-gradient($bg-top, $bg-bottom);

  border: 1px solid $border;
  @include border-radius(4px);

  &:hover,
  &:focus {
    background: $hover-bg-bottom;
    @include linear-gradient($hover-bg-top, $hover-bg-bottom);
    text-decoration: none !important;
    border-color: $hover-border;
    color: $hover-text !important;
  }

  &:disabled {
    background: $bg-bottom;
    border-color: $border;
    color: desaturate(darken($bg-bottom, 50%), 50%) !important;
    cursor: default;
  }
}

// list reset
@mixin list-reset-soft {
  list-style-type:none;
  padding: 0;
  margin: 0;
  li{
    list-style-type:none;
    padding: 0;
    margin: 0;
    border: 0;
  }
}

// LTR / RTL
$left: left;
@if $direction == right {
  $left: right;
}

$right: right;
@if $direction == right {
  $right: left;
}

@function flip($ltr, $rtl) {
    @if $direction == left {
        @return $ltr;
    } @else {
        @return $rtl;
    }
}

// Compass-like mixins

@mixin box-sizing($bs) {
  $bs: unquote($bs);
  @include experimental(box-sizing, $bs, -moz, -webkit, not -o, not -ms, official);
}

@mixin border-radius($radius: 5px) {
  @include experimental(border-radius, $radius, -moz, -webkit, not -o, not -ms, official);
}

@mixin box-shadow($shadows...) {
  @include experimental(box-shadow, $shadows, -moz, -webkit, not -o, not -ms, official);
}

@mixin experimental($property, $value, $moz: true, $webkit: true, $o: true, $ms: true, $official: true) {
  @if $webkit   { -webkit-#{$property} : #{$value}; }
  @if $moz      {    -moz-#{$property} : #{$value}; }
  @if $ms       {     -ms-#{$property} : #{$value}; }
  @if $o        {      -o-#{$property} : #{$value}; }
  @if $official {         #{$property} : #{$value}; }
}

@mixin inline-block($alignment: middle) {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
}

@mixin clearfix {
    &:before, &:after { content: " "; display: table; }
    &:after { clear: both; }
    & { *zoom: 1; }
}

@mixin linear-gradient($stops...) {
  $webkit-gradient-stops: ();
  $webkit-end-point: 100%;
  @each $stop in $stops {
    $pos: none;
    @if length($stop) > 1 {
      @if length($stops) == 2 && unit(nth($stop, 2)) == 'px' {
        $webkit-end-point: nth($stop, 2);
        $pos: 100%;
      } @else {
        $pos: nth($stop, 2);
      }
    } @else if (length($stop) == 1 && index($stops, $stop) == 1) {
      $pos: 0%;
    } @else {
      $pos: 100%;
    }
    $webkit-gradient-stops: append($webkit-gradient-stops,
                                   color-stop($pos, nth($stop, 1)),
                                   comma);
  }

  background: -webkit-gradient(linear, 0% 0%, 0% $webkit-end-point, $webkit-gradient-stops);
  @each $prefix in -moz-, -o-, -webkit-, "" {
    background: #{$prefix}linear-gradient($stops);
  }
}

@mixin flex-container() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex($values, $values2009: 0) {
  -webkit-box-flex: $values2009;
  -moz-box-flex: $values2009;
  -webkit-box-flex: $values;
  -moz-box-flex: $values;
  -webkit-flex: $values;
  -ms-flex: $values;
  flex: $values;
}

@mixin flex-wrap($wrap) {
  -webkit-box-wrap: $wrap;
  -webkit-flex-wrap: $wrap;
  -ms-flex-wrap: $wrap;
  flex-wrap: $wrap;
}

@mixin flex-align($alignment) {
  -webkit-box-align: $alignment;
  -webkit-align-items: $alignment;
  -ms-flex-align: $alignment;
  align-items: $alignment;
}

@mixin high-dpi-background-image($path) {
  background-image: url("#{$path}.png");

  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    background-image: url("#{$path}@2x.png");
  }

  @media screen {
    background-image: url("#{$path}.svg"), none;
  }
}