// this file demonstrates how to use the CSS PIE extension for
// legacy versions of Internet Explorer. In many cases, PIE will allow
// you to style in CSS things that you'd have to do using image chops otherwise.
//
// Note: Each element that has PIE enabled on it will add about 10ms to your page load.
@import "compass/css3/pie";
@import "compass/css3";

// Set this to wherever you end up putting your behavior file.
//
// **Note:** this file must be served as a root-relative resource or
// else IE will interpret it as relative to the current webpage
// instead of the stylesheet.
//
// **Also Note:** this file must be delivered with a mime-type of:
//
//    text/x-component
$pie-behavior: url("<%= config.http_stylesheets_path %>/PIE.htc");

// It is suggested that you use Sass's @extend directive to apply the PIE
// behavior to your elements. Setting this variable will tell the `pie` mixin
// to extend it. Or you can just extend the base class yourself.
$pie-base-class: pie-element;

// There are two approaches to creating PIE elements
// The default approach is to make the element position: relative.
.pie-element {
  // relative is the default, so passing relative
  // is redundant, but we do it here for clarity.
  @include pie-element(relative);
}

.bordered {
  @include pie; // Because $pie-base-class is set, this results in an extend of .pie-element. 
  @include border-radius(5px);
}

.gradient {
  @include pie; // Because $pie-base-class is set, this results in an extend of .pie-element.
  @include background(linear-gradient(#f00, #00f));
}


// But sometimes this messes up your positioning
// So you can also use z-indexing. In this case
// an ancestor element before or having the first
// opaque background should be marked as a pie-container
// which gives it a z-index of 0 (actually any z-index
// can be provided to the pie-container mixin).
// And then the pie element itself should be given
// a z-index of -1.
.pie-container {
  @include pie-container;
}

.z-pie-element {
  // this will get a z-index of 0, you can pass a z-index value if you want
  @include pie-element(z-index);
}

// This is just a simple example of how to use the z-index approach.
.widget {
  @extend .pie-container;
  h3 {
    @include pie(z-pie-element); // This will extend .z-pie-element instead of .pie-element
  }
}


// Lastly, you can just include the pie-element mixin directly if you need to do a one-off:
.has-gradient {
  @include pie-element(relative);
  @include background(linear-gradient(#f00, #00f));
}