.btn {
  text-transform: uppercase;
  font-weight: bold;
  .button-size(@btn-padding-base-vertical; @btn-padding-base-horizontal; @font-size-base; @line-height-base; @btn-border-radius-base);

  border: 1px solid @xivo-primary;
  &:hover,
  &:focus,
  &.focus {
    background-color: @xivo-light;
  }
}

.button-color(@main-color) {
  &:hover,
  &:focus,
  &.focus {
    color: @main-color;
  }
  &[disabled]:hover {
    color: @xivo-light;
  }
  &:active,
  &.active {
    background: @main-color;
    box-shadow: none;
    &:hover {
      background: @main-color;
    }
  }
}

.btn-default  {
  background: @xivo-gradient-light-gray;
  border: 1px solid @xivo-light-gray;
  &:hover {
    color: @btn-default-bg;
    background: @btn-primary-bg;
  }
  &:active,
  &:active:hover {
    color: @btn-default-bg;
    background: @xivo-dark;
  }

}

.btn-info, .btn-dark {
  .button-color(@xivo-dark);
  &:hover,
  &:focus,
  &.focus {
    background-color: @brand-primary;
    color:@xivo-light;
  }

  .badge {
    background-color: @brand-primary;
    color:@xivo-light;
  }
}

.btn-primary {
  .button-color(@btn-primary-bg);
}

.btn-success {
  .button-color(@btn-success-bg);
}

.btn-warning {
  .button-color(@btn-warning-bg);
}

.btn-danger {
  .button-color(@btn-danger-bg);
}

.btn-dark {
  .button-variant(@btn-info-color; @xivo-dark-gray; @btn-info-border);
  &:hover {
    background-color: @xivo-primary;
  }
  &:active {
    background: @xivo-dark;
  }
}

.btn-circle {
  position: relative;
  letter-spacing: 0.5px;
  padding:1px 0 0 1px;
  border-radius: @btn-circle-size;
  width:@btn-circle-size;
  height:@btn-circle-size;
  line-height: @btn-circle-size;
  box-shadow: 0px 2px 4px 1px rgba(110, 110, 110, 0.5);
}

.btn-circle .badge {
  position:absolute;
  top:20px;
  right:-10px;

}

.btn-xs.btn-circle {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  line-height: 20px;
  .glyphicon {
    top: .12em;
    left: .05em;
  }
}

.btn-lg.btn-circle {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  line-height: 50px;
  font-size: 26px;
  .fa {
    position: relative;
    top: 11px;
    left: 0;
    vertical-align: top;
  }
}

.btn-action {
  padding: 8px 22px;
  margin-right: 5px;
}

.dropdown-menu > li > a.btn {
  .button-size(@btn-padding-base-vertical; 15px; @font-size-base; @line-height-base; @btn-border-radius-base);
}

.dropdown-menu {
  margin: 0;
}
