// Use compatibility tables from http://caniuse.com/
// http://css3pie.com/documentation/supported-css3-features/#pie-watch-ancestors
// http://css3pie.com/documentation/supported-css3-features/#pie-lazy-init
// TODO use !default http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variable_defaults_

$support-ie: true !default;
$pie-url: asset-url("polyfills/PIE.htc", '') !default;
$boxsizing-url: asset-url("polyfills/boxsizing.htc", '') !default;

@mixin pie($poll: none, $watch-ancestors: 0) {
  @if $support-ie and $pie-url {
    behavior: $pie-url;
    // http://css3pie.com/documentation/supported-css3-features/#pie-poll
    @if $poll != none {
      -pie-poll: $poll;
    }
    // http://css3pie.com/documentation/supported-css3-features/#pie-watch-ancestors
    @if $watch-ancestors > 0 {
      -pie-watch-ancestors: $watch-ancestors;
    }
  }
}

@import "ultimate/mixins/vendors";
@import "ultimate/mixins/routines";
@import "ultimate/mixins/css3/text-shadow";

//  Round all corners by a specific amount.
//    example:
//      @include border-radius(5px 5px 0 0);
//    produce:
//      -webkit-border-radius: 5px 5px 0 0; // iOS-Safari <= 3.2, Android <= 2.1
//              border-radius: 5px 5px 0 0;
@mixin border-radius($params) {
  @include vendors(webkit, border-radius, $params);
}

//  Round mentioned corners by a specific amounts without muted corners by none or false.
//    example:
//      @include border-radius__complex(5px 7px none);
//    produce:
//      -webkit-border-top-left-radius: 5px; // iOS-Safari <= 3.2, Android <= 2.1
//              border-top-left-radius: 5px;
//      -webkit-border-top-right-radius: 7px;
//              border-top-right-radius: 7px;
//      -webkit-border-bottom-left-radius: 7px;
//              border-bottom-left-radius: 7px;
@mixin border-radius_complex($params) {
  @if isset($params) {
    $l: length($params);
    @if $l == 1 or complex-isset($params) {
      @include border-radius($params);
    } @else {
      @if $l < 4 {
        $params: complex-list($params);
      }
      $i: 0;
      @each $corner in top-left, top-right, bottom-right, bottom-left {
        $i: $i + 1;
        $p: nth($params, $i);
        @if isset($p) {
          @include vendors(webkit, border-#{$corner}-radius, $p);
        }
      }
    }
  }
}

//  Provide CSS3 box-shadow property.
//    example:
//      @include box-shadow(#00F -10px 0 10px, #F00 10px 0 10px);
//    produce:
//      -webkit-box-shadow: #00F -10px 0 10px, #F00 10px 0 10px; // Safari 5.0, iOS-Safari <= 4.3, Android <= 4.0      missing "inset" and blur radius value support for iOS-Safari <= 3.2, Android <= 3.0
//              box-shadow: #00F -10px 0 10px, #F00 10px 0 10px;
@mixin box-shadow($shadow0, $shadow1: false, $shadow2: false, $shadow3: false, $shadow4: false, $shadow5: false, $shadow6: false, $shadow7: false, $shadow8: false, $shadow9: false) {
  $shadows: compact-list($shadow0 $shadow1 $shadow2 $shadow3 $shadow4 $shadow5 $shadow6 $shadow7 $shadow8 $shadow9);
  @if length($shadows) == 0 {
    $shadows: none;
  }
  @include vendors(webkit, box-shadow, $shadows);
}

//  Change the box model of element.
//    example:
//      @include box-sizing;
//    produce:
//      -webkit-box-sizing: border-box; // Safari <= 5.0, iOS-Safari <= 4.3, Android <= 3.0
//         -moz-box-sizing: border-box; // actual
//              box-sizing: border-box; //
//      *behavior: url("/assets/polyfills/boxsizing.htc"); // IE 6-7
@mixin box-sizing($params: border-box) {
  @include vendors(webkit moz, box-sizing, $params);
  @if $support-ie and $boxsizing-url {
    // https://github.com/Schepp/box-sizing-polyfill
    *behavior: $boxsizing-url; // IE 6-7
  }
}

//  Provide CSS3 linear-gradient as background image.
//    params:
//      $corner:
//        Represents the position of the starting-point of the gradient line.
//        It consists of two keywords: the first one indicates the horizontal side, `left` or `right`,
//        and the second one the vertical side, `top` or `bottom`.
//        The order is not relevant and each of the keyword is optional.
//        The values `to top`, `to bottom`, `to left` and `to right`
//        are translated into the angles `0deg`, `180deg`, `270deg`, `90deg` respectively.
//        The others are translated into an angle that let the starting-point to be in the same quadrant
//        than the described corner and so that the line defined by the starting-point and the corner
//        is perpendicular to the gradient line. That way, the color described by the <color-stop>
//        will exactly apply to the corner point. This is sometimes called the "magic corner" property.
//        The end-point of the gradient line is the symmetrical point of the starting-point
//        on the other direction of the center box.
//      _angle:
//        An angle of direction for the gradient. See <angle> (https://developer.mozilla.org/en/CSS/angle).
//      $stops:
//        This value is comprised of a <color> value, followed by an optional stop position
//        (either a percentage between 0% and 100% or a <length> along the gradient axis).
//        Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.
//    example:
//      @include linear-gradient(right, (green, orange 20%, red 100%));
//    produce:
//      background-color: $bg-color;
//      background-image:        -webkit-gradient(linear, right top, left top, color-stop(0%, green), color-stop(20%, orange), color-stop(100%, red)); // old webkit (Safari <= 5.0, iOS-Safari <= 4.3, Android <= 3.0)
//      background-image: -webkit-linear-gradient(right, green, orange 20%, red 100%); // Chrome 10+, Safari 5.1+
//      background-image:    -moz-linear-gradient(right, green, orange 20%, red 100%); // FF 3.6+
//      background-image:     -ms-linear-gradient(right, green, orange 20%, red 100%); // IE 10+
//      background-image:      -o-linear-gradient(right, green, orange 20%, red 100%); // Opera 11.1+
//      background-image:         linear-gradient(right, green, orange 20%, red 100%); // future
//      -pie-background: $bg-c    linear-gradient(right, green, orange 20%, red 100%); // IE 6-9
@mixin linear-gradient($corner_angle, $stops) {
  $wk_start: left top;
  $wk_end: left bottom;
  $start: nth($corner_angle, 1);
  @if $start == top {
    $wk_start: left top;
    $wk_end: left bottom;
  } @else if $start == bottom {
    $wk_start: left bottom;
    $wk_end: left top;
  } @else if $start == left {
    $wk_start: left top;
    $wk_end: right top;
  } @else if $start == right {
    $wk_start: right top;
    $wk_end: left top;
  }
  $wk_stops: ();
  $stops_length: length($stops);
  $repcents-by-stop: 100 / ($stops_length - 1);
  $i: 0;
  $p: 0;
  @each $stop in $stops {
    $i: $i + 1;
    $cp: "#{$p}%";
    @if length($stop) > 1 {
      $cp: nth($stop, 2);
    }
    $stop: "#{$cp}, #{nth($stop, 1)}";
    $wk_stops: append($wk_stops, color-stop(#{$stop}), comma);
    $p: $p + $repcents-by-stop;
  }
  $bg-color: nth(nth($stops, 1), 1);
  background-color: $bg-color;
  background-image: -webkit-gradient(linear, $wk_start, $wk_end, $wk_stops);
  $linear-gradient: linear-gradient($corner_angle, $stops);
  @include vendors-param(webkit moz ms o, background-image, $linear-gradient);
  @if $support-ie and $pie-url {
    -pie-background: $bg-color $linear-gradient;
  }
}

//  Provide CSS3 radial-gradient as background image.
//    params:
//      $position:
//        A position, interpreted in the same way as background-position or transform-origin. If omitted, the default is center.
//      _angle:
//        An angle establishing the gradient line, which extends from the starting point at this angle; this is 0deg by default.
//      $shape:
//        circle            Meaning that the gradient's shape is a circle with constant radius.
//        ellipse           Meaning that the shape is an axis-aligned ellipse.
//      _size:
//        closest-side      The gradient's shape meets the side of the box closest to its center (for circles) or meets both the vertical and horizontal sides closest to the center (for ellipses).
//        closest-corner    The gradient's shape is sized so it exactly meets the closest corner of the box from its center.
//        farthest-side     Similar to closest-side, except the shape is sized to meet the side of the box farthest from its center (or vertical and horizontal sides).
//        farthest-corner   The gradient's shape is sized so it exactly meets the farthest corner of the box from its center.
//        contain           A synonym for closest-side.
//        cover             A synonym for farthest-corner.
//    example:
//      @include radial-gradient(center 45deg, circle closest-side, (orange 0%, red 100%));
//    produce:
//      background-image: -webkit-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%); // Chrome 10+, Safari 5.1+
//      background-image:    -moz-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%); // FF 3.6+
//      background-image:     -ms-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%); // IE 10+
//      background-image:      -o-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%); // Opera 11.6+
//      background-image:         radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%); // future
@mixin radial-gradient($position_angle, $shape_size, $stops) {
  // TODO may be deprecate background-image: -webkit-gradient(radial, $wk_start, $wk_end, unquote(list-to-string($wk_stops, ", ")));
  @include vendors-param(webkit moz ms o, background-image, radial-gradient($position_angle, $shape_size, change-separator($stops)));
}

// EXPERIMENTAL
@mixin border-gradient($color_start, $color_stop, $is_horizontal: false) {
  $start: top;
  $wk_start: left top;
  $wk_stop: left bottom;
  @if $is_horizontal {
    $start: left;
    $wk_stop: right top;
  } @else {
    $start: top;
    $wk_stop: left bottom;
  }
  border-color: $color_start mix($color_start, $color_stop) $color_stop;
  -webkit-border-image: -webkit-gradient(linear, $wk_start, $wk_stop, from($color_start), to($color_stop)); // old webkit (Safari <= 5.0, iOS-Safari <= 4.3, Android <= 3.0)
  // TODO may be new -webkit-gradient?
  -moz-border-image: -moz-linear-gradient($start, $color_start, $color_stop); // FF 3.5+
   -ms-border-image:  -ms-linear-gradient($start, $color_start, $color_stop); // IE 10+
    -o-border-image:   -o-linear-gradient($start, $color_start, $color_stop); // Opera 11.0+
       border-image:      linear-gradient($start, $color_start, $color_stop); // future
}

//  Provide cross-browser CSS opacity.
//    example:
//      @include opacity(0.3);
//    produce:
//      opacity: 0.3;
//      filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30); // IE <= 8.0
@mixin opacity($value: 0.5) {
  opacity: $value;
  @if $support-ie {
    $value: round($value * 100);
    @if $value < 100 {
      filter: progid:DXImageTransform.Microsoft.Alpha(opacity=#{$value});
    } @else {
      filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    }
  }
}

// For rgba()
@mixin pie-bg($bg) {
  background: $bg;
  @if $support-ie and $pie-url and type-of($bg) == "color" and alpha($bg) < 1 {
    -pie-background: $bg;
  }
}

//    example:
//      @include ellipsis;
//    produce:
//      overflow: hidden;           // need to work text-overflow
//      -o-text-overflow: ellipsis; // Opera Mini and Opera Mobile
//         text-overflow: ellipsis; // all
@mixin ellipsis($overflow: hidden) {
  @if $overflow != false {
    overflow: $overflow;
  }
  @include vendors(o, text-overflow, ellipsis);
}

//    $param: none || text || all || element
//    example:
//      @include user-select;
//    produce:
//      -webkit-user-select: none;
//         -moz-user-select: none;
//          -ms-user-select: none; // IE 10+
//           -o-user-select: none;
//              user-select: none;
@mixin user-select($param: none) {
  @include vendors(webkit moz ms o, user-select, $param);
}

//  Provide vendorized CSS transition.
//    example:
//      @include transition(all, 0.5s);
//    produce:
//      -webkit-transition: all 0.5s ease; // actual
//         -moz-transition: all 0.5s ease; // FF 8+
//          -ms-transition: all 0.5s ease; // IE 10+
//           -o-transition: all 0.5s ease; // Opera 11.6+
//    without:
//              transition: all 0.5s ease; // future
@mixin transition($what, $time, $method: ease) {
  @include vendors(webkit moz ms o, transition, $what $time $method, false);
}

//  Provide vendorized CSS transform.
//    example:
//      @include transform(scale(1.2, 1.2));
//    produce:
//      -webkit-transform: scale(1.2, 1.2); // actual
//         -moz-transform: scale(1.2, 1.2); // actual
//          -ms-transform: scale(1.2, 1.2); // IE 9+
//           -o-transform: scale(1.2, 1.2); // actual
//    without:
//              transform: scale(1.2, 1.2); // future
@mixin transform($params) {
  @include vendors(webkit moz ms o, transform, $params, false);
}

//  Scale an object along the x and y axis. IE < 9 only proportional scale by $scale-x.
//    example:
//      @include scale(1.2);
//    produce:
//      -webkit-transform: scale(1.2, 1.2); // actual
//         -moz-transform: scale(1.2, 1.2); // actual
//          -ms-transform: scale(1.2, 1.2); // IE 9+
//           -o-transform: scale(1.2, 1.2); // actual
//                  *zoom: 1.2;             // IE 5.5-7
//                   zoom: 1.2\0/;          // IE 8
//    without:
//              transform: scale(1.2, 1.2); // future
@mixin scale($scale-x, $scale-y: $scale-x) {
  @include transform(scale($scale-x, $scale-y));
  @if $support-ie {
    *zoom: $scale-x;
    //zoom: hack-ie8($scale-x); TODO temp!
  }
}

// TODO
//@mixin placeholder($params) {
//  &::-webkit-input-placeholder, &:-moz-placeholder {
//    #{$params};
//  }
//}
//input::-webkit-input-placeholder { color: #a3a3a3 !important;}
//input:-moz-placeholder { color: #a3a3a3 !important; }