/*##########################################################################*/ /* 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.07em;
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 6px $black);
  @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.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;
}

}