/*##########################################################################*/
/*  Buttons  */
/*##########################################################################*/



// BUTTON STYLES
// -------------


// Colors
// ------

.btn, form .submit_bar input {
  // Set text color
  &.btn-primary,
  &.btn-primary:hover,
  &.btn-danger,
  &.btn-danger:hover,
  &.btn-success,
  &.btn-success:hover,
  &.btn-info,
  &.btn-info:hover {
    color: $white;
  }
  &.btn-primary.active,
  &.btn-danger.active,
  &.btn-success.active,
  &.btn-info.active {
    color: rgba(255,255,255,.75);
  }
  &.btn-primary {
    @include vertical-gradient(#8ac6e8, #306da2);
    border: solid 1px #003366;
    text-shadow: 0 -1px 0px #006699;

    &:hover {
      @include vertical-gradient(#c8eff9, #3ea5de);
      color: #003366 !important;
      text-shadow: 0 -1px 0px #eee;
      border: solid 1px #2f84da;
    }

    &.active {
      @include box-shadow(inset 0 0 6px $black);
      @include vertical-gradient(#dedede, #767676);
      color: #333 !important;
      text-shadow: 0 -1px 0px #eee;
      outline: none;
      border: solid 1px $black;
    }
  }
  // Danger and error appear as red
  &.btn-danger {
    @include vertical-gradient(#ee5f5b, #bd362f);
    border-color: #bd362f;
    text-shadow: 0 -1px 0px darken(#ee5f5b, 30%);

    &:hover {
      @include vertical-gradient(#f7adab, #ee5f5b);
      border-color: #ee5f5b;
    }

    &.active {
      @include vertical-gradient(#ee5f5b, #bd362f);
    }
  }
  // Success appears as green
  &.btn-success {
    @include vertical-gradient(#62c462, #51a351);
    border-color: #51a351;
    text-shadow: 0 -1px 0px darken(#62c462, 20%);

    &:hover {
      @include vertical-gradient(#9bee9b, #62c462);
      border-color: #62c462;
    }

    &.active {
      @include vertical-gradient(#62c462, #51a351);
    }
  }
  // Info appears as a neutral blue
  &.btn-info {
    @include vertical-gradient(#5bc0de, #2f96b4);
    border-color: #2f96b4;
    text-shadow: 0 -1px 0px #2f96b4;
  }

  &.clear {
    background: none;
    border-color: $gray;
  }
}

// Base styles
// -----------

.btn, .handle, form .submit_bar input {
  // Button Base
  display: inline-block;
  padding: 2px 10px;
  @include no-box-shadow;
  @include border-radius(4px);
  @include vertical-gradient($white, $grayLighter);
  font-size: $basefont - 1;
  cursor: pointer;
  font-weight: bold;
  color: $grayDark;
  letter-spacing: -0.03em;
  text-shadow: 0 -1px 0px $white;
  text-decoration: none;
  border: solid 1px darken($grayLight, 10%);
  $shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  @include box-shadow($shadow);

  @include ie7-restore-left-whitespace;

  &:hover {
    @include vertical-gradient(#dbf1f7, #84c6ea);
    color: #003366 !important;
    text-shadow: 0 -1px 0px #eee;
    border: solid 1px #2f84da;
    text-decoration: none;
  }

  // Focus state for keyboard and accessibility
  &:focus {
    //.tab-focus();
  }

  // Active and Disabled states
  &.active,
  &:active {
    @include box-shadow(inset 0 0 3px #333);
    @include vertical-gradient(#dedede, #767676);
    color: #333 !important;
    text-shadow: 0 -1px 0px #eee;
    outline: none;
    border: solid 1px $black;
  }
  &.disabled,
  &[disabled] {
    cursor: default;
    background-color: darken($white, 10%);
    @include opacity(65);
    color: $gray !important;
    @include vertical-gradient($white, $white);
    border: solid 1px $grayLighter;
    @include box-shadow(none);
  }

  // Button Sizes
  &.btn-large {
    padding: 9px 14px;
    font-size: $baseFontSize;
    letter-spacing: normal;
    line-height: normal;
    @include border-radius(5px);
  }
  &.btn-pronounced {
    font-size: $baseFontSize + 2px;
  }
  &.btn-large .icon {
    margin-top: 1px;
  }
  &.btn-small {
    padding: 0px 5px;
    font-size: $basefont - 3px; 
    //font-size: $baseFontSize - 2px;
    //line-height: $baseLineHeight - 2px;
  }
  &.btn-small .icon {
    margin-top: -1px;
  }

  .badge {
    background: $gray;
    color: $white;
    font-weight: normal;
    text-shadow: 0 0 0;
  }
  &.active .badge {
    background: darken($gray, 15%);
  }

}

// Help Firefox not be a jerk about adding extra padding to buttons
button.btn,
input[type="submit"].btn {
  &::-moz-focus-inner {
  	padding: 0;
  	border: 0;
  }
  line-height: inherit;

  // IE7 has some default padding on button controls
  *padding-top: 2px;
  *padding-bottom: 2px;
  &.btn-large {
    *padding-top: 7px;
    *padding-bottom: 7px;
  }
  &.btn-small {
    *padding-top: 3px;
    *padding-bottom: 3px;
  }
  @include transition(none);

  &:active {
    @include box-shadow(inset 0 0 6px $black);
    @include vertical-gradient(#dedede, #767676);
    color: #333 !important;
    text-shadow: 0 -1px 0px #eee;
    outline: none;
    border: solid 1px $black;
  }
}

// Links with Highlights
//----------------
// these are not normal buttons per se but rather links with background highlights 
// when the user hovers over them

.link-hl {
  padding: 1px;
  padding-right: 3px;

  &:hover {
    background: $concerto-blue-5;
    color: $concerto-blue-0;
    text-decoration: none;
  }
}

