@import "compass/css3/gradient";
@import "compass/css3/border-radius";
@import "compass/css3/box-shadow";
@import "compass/css3/text-shadow";

@mixin cupid-green {
    @include background(linear-gradient(top, #7fbf4d, #63a62f));
    border: 1px solid #63a62f;
    border-bottom: 1px solid #5b992b;
    @include border-radius(3px);
    @include box-shadow(inset 0 1px 0 0 #96ca6d);
    text-shadow: 0 -1px 0 #4c9021;
    color: #fff;
    line-height: 20px;
    display: inline-block;
    padding: 9px 15px 10px;
    
    &:hover {
        @include background(linear-gradient(top, #76b347, #5e9e2e));
        @include box-shadow(inset 0 1px 0 0 #8dbf67);
        cursor: pointer;
    }
    
    &:active {
        border: 1px solid #5b992b;
        border-bottom: 1px solid #538c27;
        @include box-shadow(inset 0 0 8px 4px #548c29, 0 1px 0 0 #eee);
    }
}

@mixin button(
    $color: #f5f5f5, 
    $textColor: #333, 
    $textShadow: 0 1px 1px rgba(255,255,255,.75), 
    $padding: 9px 15px 10px, 
    $borderRadius: 6px
){
  display: inline-block;
  background-color: darken(saturate($color, 10), 10);
  background-repeat: repeat-x;
  @include background-image(linear-gradient($color, darken(saturate($color, 10), 10)));
  padding: $padding;
  text-shadow: $textShadow;
  color: $textColor;
  line-height: 20px;
  @include border-radius($borderRadius);
  @include box-shadow(inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.25));
  &:hover {
    background-position: 0 -15px;
    color: $textColor;
    text-decoration: none;
  }
}