// Buttons
//------------------------------------------------------

$btn-top:                      #0090ff !default;
$btn-bottom:                   #0079d7 !default;
$btn-font-color:               #ffffff !default;

$btn-hover-top:                #0079d7 !default;
$btn-hover-bottom:             #0090ff !default;

$btn-gray-top:                #273135 !default;
$btn-gray-bottom:             #000000 !default;

$btn-red-top:                 #0090ff !default;
$btn-red-bottom:              #0079d7 !default;

@import "compass/css3";
@import "compass/utilities";

// Styleguide Buttons

// Your standard form button.
//
// Markup: <a class="btn $modifierClass">Example Button</a>
//
// :hover    - Highlights when hovering.
// :disabled - Dims the button when disabled.
//
// Styleguide Buttons - Standard Button

.btn, a.btn{
   @include border-radius(0px);
   @include background-image(linear-gradient(to bottom, $btn-top, $btn-bottom));
   border:none;
   color:$btn-font-color;
   padding:10px 11px;
   
   &:hover, &:focus, &:active{
      color:$btn-font-color;
      @include background-image(linear-gradient(to bottom, $btn-hover-top, $btn-hover-bottom));
   }
   span.caret{
      margin:0 0 0 8px;
   }
}

.btn-gray, a.btn-gray{
   @include background-image(linear-gradient(to bottom, $btn-gray-top, $btn-gray-bottom));
   color:$white;
   
   &:hover, &:focus, &:active{
      color:$white;
      @include background-image(linear-gradient(to top, $btn-gray-top, $btn-gray-bottom));
   }
}

.btn-red, a.btn-red{
   @include background-image(linear-gradient(to bottom, $btn-red-top, $btn-red-bottom));
   color:$white;
   
   &:hover, &:focus, &:active{
      color:$white;
      @include background-image(linear-gradient(to bottom, $btn-red-bottom, $btn-red-top));
   }
}

.btn-rounded, a.btn-rounded{
   @include border-radius($base-border-radius);
}

// SIZES

.btn-lg, a.btn-lg{
   font-size:$base-font-size;
   text-transform:uppercase;
   padding:16px 30px;
   
   &.btn-red{
      font-weight:bold;
   }
}
