@import "compass/css3";
@import "compass/css3/pie";


// There are two approaches to creating PIE elements
// The default approach is to make the element position: relative.
$pie-base-class: pie-element;
.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);
}

.widget {
  @extend .pie-container; // This will
  h3 {
    @include pie(z-pie-element); // This will extend .z-pie-element instead of .pie-element
  }
}