/**
 * UI convex effect from one color
 *
 * @todo merge with ui-button ?
 *
 * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
 */
@mixin ui-convex($color: #ddd, $button-effect: true, $opacity-top: .5, $opacity-bottom: 0, $color-mix: #fff)
{
    background: $color; // fallback
    
    // the original idea was to just add a layer of transparent white to make the convex effect
    // but this didn't work with css3/pie module, so I've used sass_extensions color functions to get the same result
    //@include background($color linear-gradient(transparentize($color-mix, $opacity-top ), transparentize($color-mix, $opacity-bottom )));
    
    $opacity-top: percentage(1-$opacity-top);
    $opacity-bottom: percentage(1-$opacity-bottom);
    $color-top: mix($color, $color-mix, $opacity-top);
    $color-bottom: mix($color, $color-mix, $opacity-bottom);
    @include background(linear-gradient($color-top, $color-bottom));
    
    @if $button-effect == true
    {
        &:hover,
        &:focus,
        {
            @include background(linear-gradient($color-bottom, $color-top));
        }
    }
}