// SASS Mixins
// --------------------------------------------------
@mixin transparent($color, $alpha) {
  $rgba: rgba($color, $alpha);
  $ie-hex-str: ie-hex-str($rgba);
  background-color: transparent;
  background-color: $rgba;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str});
  zoom: 1;
}

@mixin well() {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: $well-bg;
  border: 1px solid darken($well-bg, 7%);
  @include border-radius(4px);
  @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
  blockquote {
    border-color: #ddd;
    border-color: rgba(0,0,0,.15);
  }
}

@mixin btn() {
  display: inline-block;
}

// Breakpoint mixin.
@mixin breakpoint($class) {
  @if $class == xs {
    @media (max-width: $screen-xs-max) { @content; }
  }

  @else if $class == sm {
    @media (min-width: $screen-sm) { @content; }
  }

  @else if $class == md {
    @media (min-width: $screen-md) { @content; }
  }

  @else if $class == lg {
    @media (min-width: $screen-lg) { @content; }
  }

  @else {
    @warn "Breakpoint mixin supports: xs, sm, md, lg";
  }
}

/**
 * Responsive mixin. 
 *
 * - phone
 * - tablet-portrait
 * - tablet-landscape-desktop
 * - large-desktop
 *
 * Additional parameters for tagetting retina and non-retina
 * devices
 *
 * - retina
 * - non-retina
 *
 * Moreover, a specific value in px can be passed which is
 * used to generate a max-width media query.
 */
@mixin respond-to($media) {
  /* Landscape phones and down */
  @if $media == phone {
      @media (max-width: 480px) { @content; }
  }
  /* Landscape phone to portrait tablet */
  @else if $media == tablet-portrait {
      @media (max-width: 767px) {@content; }
  }
  /* Portrait tablet to landscape and desktop */
  @else if $media == tablet-landscape-desktop {
      @media (min-width: 768px) and (max-width: 979px) { @content; }
  }
  /* Large desktop */
  @else if $media == large-desktop {
      @media (min-width: 1200px) { @content; }
  }
  // Non-Retina
  @else if $media == non-retina {
      @media screen and (-webkit-max-device-pixel-ratio: 1) { @content; }
  }
  // Retina Only
  @else if $media == retina {
      @media screen and (-webkit-min-device-pixel-ratio: 2) { @content; }
  }
  // Specific max width
  @else {
      @media only screen and (max-width: #{$media}px) { @content; }
    }
}