/* Buttons & Button Groups - Bootstrap Compatible */

.btn(@background-color: #f8f8f8, @color: #555) {
  background: @background-color;
  color: @color;
  text-decoration: none;
  &:hover:not(.active):not(.disabled):not([disabled]) {
    background: darken(@background-color, 2.5%);
  }
  &.active {
    background: darken(@background-color, 5%);
    border-color: transparent;
  }
}

.btn {
  cursor: pointer;
  display: inline-block;
  padding: @form-input-padding @form-input-padding*2;
  text-decoration:  none;
  font-weight: normal;
  border: 1px solid @default-border-color;
  border-radius: @default-border-radius;
  //box-shadow: 0 1px 1px rgba(0,0,0,0.1);
  text-align: center;

  &.btn-default { .btn(@default-color, #555); }
  &.btn-primary { .btn(@primary-color, #fff); }
  //&.btn-info { .btn(@info-color, #fff); }
  &.btn-success { .btn(@success-color, #fff); }
  //&.btn-warning { .btn(@warning-color, #fff); }
  &.btn-danger { .btn(@danger-color, #fff); }

  &.btn-sm { padding: 2px 5px; font-size: 0.8em; line-height: 1em; }
  &.btn-lg { padding: 12px 18px; font-size: 1.25em; line-height: 1em; }

  &.active, &:active { box-shadow: inset 1px 1px 1px rgba(0,0,0,0.25) !important; }
  &.disabled, &[disabled] { opacity: 0.5; cursor: not-allowed; }
  [data-type="toggle"] { display: none; }
}

.btn-bar {
  display: flex;
  background: @default-color;
  padding: @default-gutter-size;
  border: 1px solid @default-border-color;
  border-radius: @default-border-radius;
}

.btn-block {
  width: 100%;
}

.btn-group {
  display: inline-flex;
  border-radius: @default-border-radius;
  .btn {
    flex: 1 0 auto;
    border-radius: 0;
    font-size: inherit;
    margin-left: -1px;
    &:first-child {
      border-top-left-radius: @default-border-radius;
      border-bottom-left-radius: @default-border-radius;
    }
    &:last-child {
      border-top-right-radius: @default-border-radius;
      border-bottom-right-radius: @default-border-radius;
    }
  }
}

.btn-group-vertical {
  .btn {
    display: block;
    border-radius: 0;
    font-size: inherit;
    margin-top: -1px;
    &:first-child {
      border-top-left-radius: @default-border-radius;
      border-top-right-radius: @default-border-radius;
    }
    &:last-child {
      border-bottom-left-radius: @default-border-radius;
      border-bottom-right-radius: @default-border-radius;
    }
  }
}