// Buttons.less
// Base styles for various buttons
// -------------------------------------------------------------

.btn {
  box-sizing: content-box;  // for input, button
  display: inline-block;
  border: 1px solid #ddd;
  *border: none; // for ie67, 高度，focus时的黑框.
  .border-radius(2px);
  *margin-right: .3em; // for input, button in ie67
  margin-bottom: 0; // for input
  padding: 0 10px;
  *padding: 1px 10px; // for ie67
  width: auto;  // for input
  height: 21px;
  line-height: 21px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  border-bottom-color: #bbb;
  #gradient > .vertical(#f8f8f8, #eee);

  &,
  &:hover,
  &:visited {
    color:#333!important;
  }

  &:hover {
    .box-shadow(~"none");
    #gradient > .vertical(#f2f2f2, #e6e6e6);
  }

  &:active {
    #gradient > .vertical(#e6e6e6, #f2f2f2);
  }

  .iconfont {
    font-size:12px!important;
    font-weight: normal;
  }
}

/*group btn*/
.btn-group {
  .btn {
    .border-radius(0);
    border-left-width: 0;
    /*border-right-width: 0;*/
    &:first-child {
      border-left-width: 1px;
      .border-radius(2px 0 0 2px);
    }
    &:last-child {
      /*border-right-width: 1px;*/
      .border-radius(0 2px 2px 0);
    }
  }
}

// red button
.btn-red {
  border-color: transparent;
  border-bottom-color: #c21b1b;
  #gradient > .vertical(#f44, #f22);

  &,
  &:hover,
  &:visited {
    color:#FFF!important;
  }

  &:hover {
    #gradient > .vertical(#ee2020, #d51314);
  }

  &:active {
    #gradient > .vertical(#d51314, #ee2020);
  }
}

.btn-orange {
  border-color: transparent;
  border-bottom-color: #cf370c;
  #gradient > .vertical(#f50, #f40);

  &,
  &:hover,
  &:visited {
    color:#FFF!important;
  }

  &:hover {
    #gradient > .vertical(#f40, #d73900);
  }

  &:active {
    #gradient > .vertical(#d73900, #f40);
  }
}

.btn-blue {
  border-color: transparent;
  border-bottom-color: #0960ab;
  #gradient > .vertical(#488fcd, #3a7db8);

  &,
  &:hover,
  &:visited {
    color:#FFF!important;
  }

  &:hover {
    #gradient > .vertical(#4087c6, #25659c);
  }

  &:active {
    #gradient > .vertical(#25659c, #4087c6);
  }
}

.btn-disabled {
  border: 1px solid #e0e0e0;
  border-bottom-color:#ccc;
  cursor: default;

  &,
  &:hover,
  &:visited {
    color: #ccc !important;
    #gradient > .vertical(#f2f2f2, #e6e6e6);
  }
}

//size 45px buttons
.btn-size45, .btn-xlarge {
  padding: 0 20px;
  height: 43px;
  line-height: 43px;
  font-size: 18px;
  .iconfont { font-size:18px!important; }
}

.btn-size40, .btn-large {
  padding: 0 20px;
  height: 38px;
  line-height: 38px;
  font-size: 14px;
  .iconfont { font-size:14px!important; }
}

.btn-size30, .btn-medium {
  height: 28px;
  line-height: 28px;
  padding: 0 20px;
}

.btn-size28, .btn-small {
  height: 26px;
  line-height: 26px;
  padding: 0 20px;
}

.btn-size25, .btn-xsmall {
  height: 23px;
  line-height: 23px;
}
