// rounded edges

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;

  -moz-border-radius: $radius;
  border-radius: $radius;
}

@mixin border-radius-top-left($x-radius, $y-radius) {
  -webkit-border-top-left-radius: $x-radius $y-radius;
  -moz-border-radius-topleft: $x-radius $y-radius;
  border-top-left-radius: $x-radius $y-radius;
}

@mixin border-radius-top-right($x-radius, $y-radius) {
  -webkit-border-top-right-radius: $x-radius $y-radius;
  -moz-border-radius-topright: $x-radius $y-radius;
  border-top-right-radius: $x-radius $y-radius;
}

@mixin border-radius-bottom-left($x-radius, $y-radius) {
  -webkit-border-bottom-left-radius: $x-radius $y-radius;
  -moz-border-radius-bottomleft: $x-radius $y-radius;
  border-bottom-left-radius: $x-radius $y-radius;
}

@mixin border-radius-bottom-right($x-radius, $y-radius) {
  -webkit-border-bottom-right-radius: $x-radius $y-radius;
  -moz-border-radius-bottomright: $x-radius $y-radius;
  border-bottom-right-radius: $x-radius $y-radius;
}

@mixin border-radius-right($radius) {
  -webkit-border-top-right-radius: $radius;
  -webkit-border-bottom-right-radius: $radius;
  -moz-border-radius-topright: $radius;
  -moz-border-radius-bottomright: $radius;
  border-top-right-radius: $radius;
  border-bottom-right-radius: $radius;
}

// gradients

@mixin gradient($top, $bottom) {
  background: $top;
  background:-webkit-gradient(linear, 0 0, 0 100%, from($top), to($bottom));
  background:-moz-linear-gradient($top, $bottom);
  background:-o-linear-gradient($top, $bottom);
  background:linear-gradient($top, $bottom);
  filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr="#{$top}", endColorstr="#{$bottom}", GradientType=0)";
}

@mixin gradientBar($primaryColor, $secondaryColor) {
  @include gradient-vertical($primaryColor, $secondaryColor);
  border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
  border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
}

// Gradients
@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
  background-color: $endColor;
  background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
  background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10
  background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
  background-image: linear-gradient(left, $startColor, $endColor); // Le standard
  background-repeat: repeat-x;
  filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=1)"; // IE9 and down
}
@mixin gradient-vertical($startColor: #555, $endColor: #333) {
  background-color: mix($startColor, $endColor, 60%);
  background-image: -moz-linear-gradient(top, $startColor 0%, $endColor 99%); // FF 3.6+
  background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
  background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
  background-image: linear-gradient(top, $startColor, $endColor); // The standard
  background-repeat: repeat-x;
  filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0)"; // IE9 and down
}

@mixin gradient-striped($color, $angle: -45deg) {
  background-color: $color;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.20)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.20)), color-stop(.75, rgba(255,255,255,.20)), color-stop(.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient($angle, rgba(255,255,255,.20) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.20) 50%, rgba(255,255,255,.20) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient($angle, rgba(255,255,255,.20) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.20) 50%, rgba(255,255,255,.20) 75%, transparent 75%, transparent);
  background-image: -ms-linear-gradient($angle, rgba(255,255,255,.20) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.20) 50%, rgba(255,255,255,.20) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient($angle, rgba(255,255,255,.20) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.20) 50%, rgba(255,255,255,.20) 75%, transparent 75%, transparent);
  background-image: linear-gradient($angle, rgba(255,255,255,.20) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,.20) 50%, rgba(255,255,255,.20) 75%, rgba(255,255,255,0) 75%, rgba(255,255,255,0));
}

@mixin reset-filter() {
  filter: "progid:DXImageTransform.Microsoft.gradient(enabled = false)";
}

@mixin opacity($opacity) {
  -moz-opacity: $opacity;
  filter:"alpha(opacity=$opacity*100)";
  opacity: $opacity;
}

// Drop shadows

@mixin box-shadow($shadow) {
  -webkit-box-shadow: $shadow;
     -moz-box-shadow: $shadow;
          box-shadow: $shadow;
}

@mixin inner-shadow($x, $y, $radius, $color) {
  -webkit-box-shadow: inset $x $y $radius $color;
     -moz-box-shadow: inset $x $y $radius $color;
          box-shadow: inset $x $y $radius $color;
}

@mixin outer-shadow($x, $y, $radius, $color) {
  -webkit-box-shadow: $x $y $radius $color;
     -moz-box-shadow: $x $y $radius $color;
          box-shadow: $x $y $radius $color;
}

// background clip

@mixin bg-clip(){
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding-box;
          background-clip: padding-box;
}

@mixin background-clip($clip) {
  -webkit-background-clip: $clip;
     -moz-background-clip: $clip;
          background-clip: $clip;
}

// ie7

@mixin ie7-restore-left-whitespace() {
  *margin-left: .3em;

  &:first-child {
    *margin-left: 0;
  }
}

@mixin ie7-restore-right-whitespace() {
  *margin-right: .3em;

  &:last-child {
    *margin-left: 0;
  }
}

@mixin ie7-inline-block() {
  *display: inline; /* IE7 inline-block hack */
  *zoom: 1;
}

// MISC
//----------------

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

@mixin big-input(){
  @include inner-shadow(0, 0, 6px, #ccc);
  color: $dark-grey;
  padding: 4px 6px 6px 6px;
  font-size: 18px;
  height: 23px;
}

@mixin input-block-level() {
  display: block;
  width: 100%;
  min-height: 28px; // Make inputs at least the height of their button counterpart
  @include box-sizing(border-box); // Makes inputs behave like true block-level elements
}

@mixin box-sizing($boxmodel) {
  -webkit-box-sizing: $boxmodel;
     -moz-box-sizing: $boxmodel;
      -ms-box-sizing: $boxmodel;
          box-sizing: $boxmodel;
}

@mixin container-fixed() {
  margin-right: auto;
  margin-left: auto;
  @include clearfix();
}

// Transitions
@mixin transition($transition) {
  -webkit-transition: $transition;
     -moz-transition: $transition;
      -ms-transition: $transition;
       -o-transition: $transition;
          transition: $transition;
}

// buttons

@mixin white-btn(){
  @include gradient(#ffffff, #efefef);
  border: 1px solid #a1a1a1;
  border-top: 1px solid #ccc;
  text-shadow: #ccc 0 1px 1px;
}

@mixin white-btn-hover(){
  background: #EFEFEF;
  border: 1px solid #a1a1a1;
  border-bottom: solid 1px #ccc;
  text-shadow: none;
}

@mixin green-btn(){
  @include border-radius(5px);
  @include gradient(#B0D03D, #57861F);
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
  padding: 10px 12px;
  color: #fff;
  text-align: center;
}

@mixin buttonBackground($startColor, $endColor) {
  // gradientBar will set the background to a pleasing blend of these, to support IE<=9
  @include gradientBar($startColor, $endColor);
  *background-color: $endColor; // Darken IE7 buttons by default so they stand out more given they won't have borders
  @include reset-filter();

  // in these cases the gradient won't cover the background, so we override
  &:hover, &:active, &.active, &.disabled, &[disabled] {
    background-color: $endColor;
    *background-color: darken($endColor, 5%);
  }

  // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
  &:active, &.active {
    background-color: darken($endColor, 10%);
  }
}

@mixin tab-focus() {
  // Default
  outline: thin dotted #333;
  // Webkit
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

// Background sizing
@mixin background-size($size){
  -webkit-background-size: $size;
     -moz-background-size: $size;
       -o-background-size: $size;
          background-size: $size;
}

@mixin scale($ratio) {
  -webkit-transform: scale($ratio);
     -moz-transform: scale($ratio);
      -ms-transform: scale($ratio);
       -o-transform: scale($ratio);
          transform: scale($ratio);
}
@mixin translate($x, $y) {
  -webkit-transform: translate($x, $y);
     -moz-transform: translate($x, $y);
      -ms-transform: translate($x, $y);
       -o-transform: translate($x, $y);
          transform: translate($x, $y);
}

// typography

@mixin base-font() {
  color: $dark-grey;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 12px;
  //text-transform: lowercase;
}

@mixin proxima-bold() {
  font-family: 'ProximaNova', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
}

@mixin proxima-800() {
  font-family: 'ProximaNova', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
}

@mixin h4 {
  color: $heading-black;
  margin-top: 0;
  line-height: 1.3em;
  font-size: 16px;

  @include proxima-bold;
}

@mixin header-text-inset() {
  color: rgba(51, 51, 51, 0.85);
  text-shadow: -1px 2px 1px #F2F2F3, 0 0 0 #231F20, -1px 2px 1px #F2F2F3;
}

@mixin data-label() {
  text-transform: uppercase !important;
  font-size: 11px;
  font-weight: bold;
  fill: $grey;
}

@mixin text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}