@import './var.less';

.button {
  height: @button-default-height;
  min-height: @button-default-height;
  background: @brand-primary;
  border: @button-border-width solid @brand-primary;
  border-radius: @border-radius-md;
  box-sizing: border-box;
  display: inline-flex;
  font-size: @button-default-font-size;
  line-height: @button-default-line-height;
  color: @white;
  justify-content: center;
  align-items: center;
  padding: @button-normal-padding;
  user-select: none;
  cursor: pointer;

  &:active {
    opacity: @active-opacity;
  }
}

.bold {
  font-weight: bold;
}

.block {
  display: flex;
  width: 100%;
}

.round {
  border-radius: @button-round-border-radius;
}

.loading {
  pointer-events: none;
  opacity: @disabled-opacity;
}

.disable {
  pointer-events: none;
  opacity: @disabled-opacity;
}

.small {
  height: @button-mini-height;
  min-height: @button-mini-height;
  font-size: @button-mini-font-size;
  padding: @button-small-padding;
}

.large {
  max-height: @button-large-height;
  min-height: @button-large-height;
}

.default {
  background-color: @white;
  border: @border-width-base solid #e2e2e2;
  color: #999999;
}

.info {
  background-color: #07c160;
  border: @button-border-width solid #07c160;
}

.warning {
  background-color: #ee0a24;
  border: @button-border-width solid #ee0a24;
}

.danger {
  background-color: #ff976a;
  border: @button-border-width solid #ff976a;
}

.ghost {
  color: @brand-primary;
  background-color: transparent;
}

.ghost.default {
  color: #999999;
  background-color: transparent;
}

.ghost.info {
  color: #07c160 !important;
  background-color: transparent;
}

.ghost.warning {
  color: #ee0a24;
  background-color: transparent;
}

.ghost.danger {
  color: #ff976a;
  background-color: transparent;
}

.noBorder {
  border: none;
  color: @brand-primary;
}
