@import "twitter/bootstrap/variables";
@import "twitter/bootstrap/mixins";

@shopifyBtnBackground: #1196c1;
@shopifyBtnBackground2: #36abce;

// core
.btn {
  display: inline-block;
  padding: 4px 10px 4px;
  font-size: @baseFontSize;
  line-height: @baseLineHeight;
  color: @grayDark;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255,255,255,.75);
  #gradient > .vertical-three-colors(@white, @white, 25%, darken(@white, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
  border: 1px solid #ccc;
  border-bottom-color: #bbb;
  .border-radius(4px);
  @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  .box-shadow(@shadow);
  cursor: pointer;

  // Give IE7 some love
  .ie7-restore-left-whitespace();
}

// Hover state
.btn:hover {
  color: @grayDark;
  text-decoration: none;
  background-color: darken(@white, 10%);
  background-position: 0 -15px;

  // transition is only when going to hover, otherwise the background
  // behind the gradient (there for IE<=9 fallback) gets mismatched
  .transition(background-position .1s linear);
}


// Set text color
// -------------------------
.btn-primary,
.btn-primary:hover,
.btn-warning,
.btn-warning:hover,
.btn-danger,
.btn-danger:hover,
.btn-success,
.btn-success:hover,
.btn-info,
.btn-info:hover {
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  color: @white
}

// Set the backgrounds
// -------------------------
.btn-primary {
  .buttonBackground(@shopifyBtnBackground, spin(@shopifyBtnBackground, 20));
}
// Warning appears are orange
.btn-warning {
  .buttonBackground(lighten(@orange, 15%), @orange);
}
// Danger and error appear as red
.btn-danger {
  .buttonBackground(#ee5f5b, #bd362f);
}
// Success appears as green
.btn-success {
  .buttonBackground(#62c462, #51a351);
}
// Info appears as a neutral blue
.btn-info {
  .buttonBackground(#5bc0de, #2f96b4);
}