// 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='#{$startColor}', endColorstr='#{$endColor}', GradientType=1), $startColor, $endColor; // IE9 and down
}
@mixin gradient-vertical($startColor: #555, $endColor: #333) {
  background-color: mix($startColor, $endColor, 60%);
  background-image: -moz-linear-gradient(top, $startColor, $endColor); // 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='#{$startColor}', endColorstr='#{$endColor}', GradientType=0),$startColor,$endColor; // IE9 and down
}
@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
  background-color: $endColor;
  background-repeat: repeat-x;
  background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
  background-image: -ms-linear-gradient($deg, $startColor, $endColor); // IE10
  background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
  background-image: linear-gradient($deg, $startColor, $endColor); // The standard
}
@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
  background-color: mix($midColor, $endColor, 80%);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
  background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
  background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
  background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor);
  background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
  background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
  background-repeat: no-repeat;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0), $startColor, $endColor; // IE9 and down, gets no color-stop at all the proper fallback
}
@mixin gradient-radial($innerColor: #555, $outerColor: #333)  {
  background-color: $outerColor;
  background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
  background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
  background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
  background-image: -ms-radial-gradient(circle, $innerColor, $outerColor);
  background-repeat: no-repeat;
  // Opera cannot do radial gradients yet
}
@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,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-image: -ms-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    //background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
  }

// Gradient Bar Colors for buttons and alerts
@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) fade-in(rgba(0,0,0,.1), 0.15);
}

// Reset filters for IE
@mixin reset-filter() {
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}


//
// An UL,LI menu that looks like a cutout and is positioned at the bottom
// of the enclosing block.
//
// This mixin is applied to the enclosing block.
//
// the markup should look like this:
//
// enclosing-block
//   ul#id
//     li.tab
//       a.tab
//     li.tab
//       a.tab
//
// the id for the ul is passed in as the first argument.
//
// it is difficult to create cutout tabs with a border that look good
// in all browsers and at different client font-sizes.
//
// the problem is that the tab element needs to line up exactly with the
// bottom of the enclosing block in order to make the cutout illusion work.
// most methods of doing this create weird jitters in webkit
// and gecko when resizing the screen or changing the font size. it does not
// look so good to have a dark line under your tab, breaking the illusion of
// a cutout.
//
// the method which makes this jitter-free is to use a height and a line-height
// for the <a> tag instead of vertical padding. This requires that <a> is a block
// which requires that the <li> is block & floated, instead of inline.
//
// This method seems to produce by far the most consistant results of letting
// the active tab sit snugly on the bottom of the enclosing div.
//
// Change with caution: I spent way too much time getting this to work.
//

@mixin cutout-menu(
  $ul_id,
  $tab_margin: 10px,
  $active_background: white,
  $active_border: false) {

  // allows us to put the menu at the bottom
  position: relative;

  ul##{$ul_id} {
    margin: 0;
    padding: 0;

    // allows us to put the menu at the bottom
    position: absolute;

    // puts the menu at the bottom of the enclosing block,
    // minus the overhand needed to cover the border:
    // bottom: -(border_width($active_border));
    bottom: -1px;

    // padding-left: don't do it.
    // ^^ In some cases, we need width of 100% to actually be the screen width,
    // but adding padding makes 100% width be wider than the screen.
    // So, instead, we add margin to the first and last li.

    white-space: nowrap;

    li.tab {
      display: block;
      float: left;
      &.first {margin-left: $tab_margin;}
      &.last  {margin-right: $tab_margin;}
      a.tab {
        // @include cg-hover-link;
        display: block;
        padding: 3px 15px;

        // using height and line-height makes for much more consistant rendering
        // than using vertical padding. essential to prevent tabs from looking
        // horrible at different fonts sizes.
        height: 1.75em;
        line-height: 1.75em;

        // the transparent border is needed to prevent the menu from jittering
        // when the active border is applied.
        border: 1px solid transparent;
        border-bottom: 0;

        &.active {
          background-color: $active_background;
          @if $active_border {
            border: $active_border;
            border-bottom: 0;
          }
        }
      }
    }
  }
}