.gm-btn {
  height: 30px;
  border-radius: 2px;
  display: inline-flex;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 0 10px;
  font-size: 12px;
  line-height: 30px;
  user-select: none;
  flex-direction: row;
  align-items: center;

  &.gm-btn-default {
    .gmBtnVariants(var(--gm-color-default), white, white);

    border-color: var(--gm-color-border);

    &.gm-btn-plain {
      border-color: var(--gm-color-border);
      color: var(--gm-color-default);
    }
  }

  &.gm-btn-primary {
    .gmBtnVariants(white, var(--gm-color-primary), var(--gm-color-primary-active));
  }

  &.gm-btn-success {
    .gmBtnVariants(white, var(--gm-color-success), var(--gm-color-success-active));
  }

  &.gm-btn-danger {
    .gmBtnVariants(white, var(--gm-color-danger), var(--gm-color-danger-active));
  }

  &.gm-btn-link {
    background: transparent;
    border-color: transparent;
    color: var(--gm-color-link);

    &:hover {
      text-decoration: underline;
    }

    &.disabled,
    &[disabled] {
      .gmDisabled();
    }
  }

  &.gm-btn-small {
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    padding: 0 5px;
  }

  &.gm-btn-middle {
    height: 30px;
    line-height: 30px;
    font-size: 12px;
  }

  &.gm-btn-large {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
  }

  &.gm-btn-block {
    display: block;
    width: 100%;
  }

  &:focus {
    outline: none;
  }

  /** 字体大小 */
  &.gm-btn-text-sm {
    font-size: 14px;
  }
}

@keyframes gm-btn-rotating {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.gmBtnVariants(@color; @brand; @brandActive) {
  background: @brand;
  border-color: @brand;
  color: @color;

  &.gm-btn-plain {
    background: white;
    border-color: @brand;
    color: @brand;

    &:hover:not([disabled]) {
      color: white;
    }
  }

  &:hover:not([disabled]) {
    background: @brandActive;
  }

  &.gm-btn-default:not([disabled]):hover {
    background: white;
    color: var(--gm-color-primary);
    border-color: var(--gm-color-primary);
  }

  .gmDisabledWith();
}

.gm-button-text {
  &.gm-button-text-default {
    .gmBtnTextVariants(var(--gm-color-default), var(--gm-color-default));
  }

  &.gm-button-text-primary {
    .gmBtnTextVariants(var(--gm-color-primary), var(--gm-color-primary-active));
  }

  &.gm-button-text-success {
    .gmBtnTextVariants(var(--gm-color-success), var(--gm-color-success-active));
  }

  &.gm-button-text-danger {
    .gmBtnTextVariants(var(--gm-color-danger), var(--gm-color-danger-active));
  }
}

.gmBtnTextVariants(@brand; @brandActive) {
  display: inline-block;
  white-space: nowrap;
  cursor: pointer;
  color: @brand;

  &:hover:not(.disabled) {
    color: @brandActive;
  }

  &.disabled {
    .gmDisabled();
  }
}