@btn-green-color: #108043;
@btn-red-color: #de3618;
@btn-yellow-color: #cf8909;
@btn-padding: 0 16px;
@btn-disabled-opacity: @disabled-opacity;

@btn-default-color: @primary-color;
@btn-default-backgroud-color: transparent;
@btn-default-border-color: @primary-color;
@btn-default-border-radius: @border-radius;
@btn-default-padding: @btn-padding;
@btn-default-disabled-color: @primary-color;
@btn-default-disabled-backgroud-color: transparent;
@btn-default-disabled-border-color: @primary-color;
@btn-default-disabled-opacity: @btn-disabled-opacity;
@btn-default-hover-color: @primary-light;
@btn-default-hover-backgroud-color: transparent;
@btn-default-hover-border-color: @primary-light;
@btn-default-focus-color: @primary-dark;
@btn-default-focus-backgroud-color: transparent;
@btn-default-focus-border-color: @primary-dark;

@btn-primary-color: @white;
@btn-primary-backgroud-color: @primary-color;
@btn-primary-border-color: @primary-color;
@btn-primary-border-radius: @border-radius;
@btn-primary-padding: @btn-padding;
@btn-primary-disabled-color: @white;
@btn-primary-disabled-backgroud-color: @primary-color;
@btn-primary-disabled-border-color: @primary-color;
@btn-primary-disabled-opacity: @btn-disabled-opacity;
@btn-primary-hover-color: @white;
@btn-primary-hover-backgroud-color: @primary-light;
@btn-primary-hover-border-color: @primary-light;
@btn-primary-focus-color: @white;
@btn-primary-focus-backgroud-color: @primary-dark;
@btn-primary-focus-border-color: @primary-dark;

@btn-link-color: @primary-color;
@btn-link-hover-color: @primary-light;
@btn-link-focus-color: @primary-dark;

@btn-text-color: @black;
@btn-text-hover-color: @primary-color;
@btn-text-focus-color: @primary-dark;

.igloo-btn {
  padding: @btn-default-padding;
  text-shadow: none;
  box-shadow: none;
  background-color: @btn-default-backgroud-color;
  border-radius: @btn-default-border-radius;
  color: @btn-default-color;
  border-color: @btn-default-border-color;

  &[disabled] {
    opacity: @btn-default-disabled-opacity;
    color: @btn-default-disabled-color;
    border-color: @btn-default-disabled-border-color;
    background-color: @btn-default-disabled-backgroud-color;

    &:hover,
    &:active,
    &:focus {
      color: @btn-default-disabled-color;
      border-color: @btn-default-disabled-border-color;
      background-color: @btn-default-disabled-backgroud-color;
    }
  }

  &:not(:disabled):not(.ant-btn-disabled) {
    &:hover {
      color: @btn-default-hover-color;
      border-color: @btn-default-hover-border-color;
      background-color: @btn-default-hover-backgroud-color;
    }
    &:active,
    &:focus {
      color: @btn-default-focus-color;
      border-color: @btn-default-focus-border-color;
      background-color: @btn-default-focus-backgroud-color;
    }
  }
}

.igloo-btn-primary {
  padding: @btn-primary-padding;
  text-shadow: none;
  box-shadow: none;
  background-color: @btn-primary-backgroud-color;
  border-radius: @btn-primary-border-radius;
  color: @btn-primary-color;
  border-color: @btn-primary-border-color;

  &[disabled] {
    opacity: @btn-primary-disabled-opacity;
    color: @btn-primary-disabled-color;
    border-color: @btn-primary-disabled-border-color;
    background-color: @btn-primary-disabled-backgroud-color;

    &:hover,
    &:active,
    &:focus {
      color: @btn-primary-disabled-color;
      border-color: @btn-primary-disabled-border-color;
      background-color: @btn-primary-disabled-backgroud-color;
    }
  }

  &:not(:disabled):not(.ant-btn-disabled) {
    &:hover {
      color: @btn-primary-hover-color;
      border-color: @btn-primary-hover-border-color;
      background-color: @btn-primary-hover-backgroud-color;
    }
    &:active,
    &:focus {
      color: @btn-primary-focus-color;
      border-color: @btn-primary-focus-border-color;
      background-color: @btn-primary-focus-backgroud-color;
    }
  }
}

.green {
  background-color: @btn-green-color;
  border-color: @btn-green-color;
  --antd-wave-shadow-color: @btn-green-color;

  &:not(:disabled):not(.ant-btn-disabled):hover,
  &:not(:disabled):not(.ant-btn-disabled):active,
  &:not(:disabled):not(.ant-btn-disabled):focus {
    background-color: @btn-green-color;
    border-color: @btn-green-color;
    opacity: 0.9;
  }

  &[disabled] {
    background-color: @btn-green-color;
    border-color: @btn-green-color;

    &:hover,
    &:active,
    &:focus {
      border-color: @btn-green-color;
      background-color: @btn-green-color;
    }
  }
}

.yellow {
  background-color: @btn-yellow-color;
  border-color: @btn-yellow-color;
  --antd-wave-shadow-color: @btn-yellow-color;

  &:not(:disabled):not(.ant-btn-disabled):hover,
  &:not(:disabled):not(.ant-btn-disabled):active,
  &:not(:disabled):not(.ant-btn-disabled):focus {
    background-color: @btn-yellow-color;
    border-color: @btn-yellow-color;
    opacity: 0.9;
  }

  &[disabled] {
    border-color: @btn-yellow-color;
    background-color: @btn-yellow-color;

    &:hover,
    &:active,
    &:focus {
      border-color: @btn-yellow-color;
      background-color: @btn-yellow-color;
    }
  }
}

.red {
  background-color: @btn-red-color;
  border-color: @btn-red-color;
  --antd-wave-shadow-color: @btn-red-color;

  &:not(:disabled):not(.ant-btn-disabled):hover,
  &:not(:disabled):not(.ant-btn-disabled):active,
  &:not(:disabled):not(.ant-btn-disabled):focus {
    background-color: @btn-red-color;
    border-color: @btn-red-color;
    opacity: 0.9;
  }

  &[disabled] {
    background-color: @btn-red-color;
    border-color: @btn-red-color;

    &:hover,
    &:active,
    &:focus {
      border-color: @btn-red-color;
      background-color: @btn-red-color;
    }
  }
}

.igloo-btn-link {
  padding: 0;
  height: unset;
  color: @btn-link-color;
  border: none;

  &:not(:disabled):not(.ant-btn-disabled):hover {
    color: @btn-link-hover-color;
  }
  &:not(:disabled):not(.ant-btn-disabled):active,
  &:not(:disabled):not(.ant-btn-disabled):focus {
    color: @btn-link-focus-color;
  }

  &[disabled] {
    border: none;
    color: @btn-link-color;
    &:hover {
      color: @btn-link-color;
    }
  }
}

.igloo-btn-text {
  padding: 0;
  height: unset;
  color: @black;
  border: none;

  &:not(:disabled):not(.ant-btn-disabled):hover {
    color: @primary-color;
    background-color: transparent;
  }
  &:not(:disabled):not(.ant-btn-disabled):active,
  &:not(:disabled):not(.ant-btn-disabled):focus {
    color: @active-color;
  }

  &[disabled] {
    border: none;
    color: @black;
    &:hover {
      color: @black;
      background-color: transparent;
    }
  }
}

.igloo-button {
  & > span {
    font-size: 16px;

    font-weight: 500;
    letter-spacing: 0px;
    line-height: 24px;
    vertical-align: middle;
  }
}

.igloo-btn > .igloo-icon + span,
.igloo-btn > span + .igloo-icon {
  margin-left: 8px;
}

.igloo-btn .igloo-icon {
  font-size: calc(@height-base / 2);
}

.igloo-btn.igloo-btn-icon-only {
  width: auto;
  font-size: calc(@height-base / 2);
}