.phoenix-button {
  display: inline-block;
}

.phoenix-button__wraper {
  font-family: "PingFang SC", "Hiragino Sans GB", STHeitiSC, Helvetica, "Helvetica Neue", "Microsoft YaHei", Tahoma;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  outline: none;
}

.phoenix-button__wraper--primary {
  color: RGB(var(--skin-css-var-M9));
  border: 1px solid transparent;
  background-color: RGB(var(--skin-css-var-S3));
}

.phoenix-button__wraper--primary:hover {
  background-color: RGB(var(--skin-css-var-S4));
}

.phoenix-button__wraper--primary:active {
  background-color: RGB(var(--skin-css-var-S2));
}

.phoenix-button__wraper--secondary {
  color: RGB(var(--skin-css-var-S2));
  border: 1px solid RGB(var(--skin-css-var-S5));
  background-color: RGB(var(--skin-css-var-M9));
}

.phoenix-button__wraper--secondary .phoenix-button__suffixIcon {
  color: RGB(var(--skin-css-var-S3));
}

.phoenix-button__wraper--secondary .phoenix-button__preIcon {
  color: RGB(var(--skin-css-var-S3));
}

.phoenix-button__wraper--secondary:hover {
  color: RGB(var(--skin-css-var-S3));
  background-color: RGBA(var(--skin-css-var-S5), 0.1);
}

.phoenix-button__wraper--secondary:hover .phoenix-button__suffixIcon {
  color: RGB(var(--skin-css-var-S2));
}

.phoenix-button__wraper--secondary:hover .phoenix-button__preIcon {
  color: RGB(var(--skin-css-var-S2));
}

.phoenix-button__wraper--secondary:active {
  color: RGB(var(--skin-css-var-S2));
  background-color: RGBA(var(--skin-css-var-S5), 0.2);
  border: 1px solid RGB(var(--skin-css-var-S5));
}

.phoenix-button__wraper--secondary:active .phoenix-button__suffixIcon {
  color: RGB(var(--skin-css-var-S3));
}

.phoenix-button__wraper--secondary:active .phoenix-button__preIcon {
  color: RGB(var(--skin-css-var-S3));
}

.phoenix-button__wraper--normal {
  color: RGB(var(--skin-css-var-M2));
  border: 1px solid RGB(var(--skin-css-var-M6));
  background-color: RGB(var(--skin-css-var-M9));
}

.phoenix-button__wraper--normal .phoenix-button__suffixIcon {
  color: RGB(var(--skin-css-var-M4));
}

.phoenix-button__wraper--normal .phoenix-button__preIcon {
  color: RGB(var(--skin-css-var-M4));
}

.phoenix-button__wraper--normal:hover {
  color: RGB(var(--skin-css-var-S2));
  border: 1px solid RGB(var(--skin-css-var-S5));
  background-color: RGBA(var(--skin-css-var-S5), 0.1);
}

.phoenix-button__wraper--normal:hover .phoenix-button__suffixIcon {
  color: RGB(var(--skin-css-var-S2));
}

.phoenix-button__wraper--normal:hover .phoenix-button__preIcon {
  color: RGB(var(--skin-css-var-S2));
}

.phoenix-button__wraper--normal:active {
  color: RGB(var(--skin-css-var-S2));
  border: 1px solid RGB(var(--skin-css-var-S5));
  background-color: RGBA(var(--skin-css-var-S5), 0.2);
}

.phoenix-button__wraper--normal:active .phoenix-button__suffixIcon {
  color: RGB(var(--skin-css-var-S3));
}

.phoenix-button__wraper--normal:active .phoenix-button__preIcon {
  color: RGB(var(--skin-css-var-S3));
}

.phoenix-button__wraper--super {
  min-width: 96px;
  height: 40px;
  padding: 0 30px 0 30px;
  font-size: 18px;
  line-height: 26px;
}

.phoenix-button__wraper--big {
  min-width: 60px;
  height: 32px;
  padding: 0 16px 0 16px;
  font-size: 14px;
}

.phoenix-button__wraper--middle {
  min-width: 48px;
  height: 30px;
  padding: 0 12px 0 12px;
  font-size: 12px;
  line-height: 20px;
}

.phoenix-button__wraper--small {
  min-width: 44px;
  height: 26px;
  padding: 0 10px 0 10px;
  font-size: 12px;
  line-height: 20px;
}

.phoenix-button__wraper--primaryDisable {
  cursor: not-allowed;
  background-color: RGBA(var(--skin-css-var-S3), 0.5);
}

.phoenix-button__wraper--primaryDisable:hover {
  background-color: RGBA(var(--skin-css-var-S3), 0.5);
}

.phoenix-button__wraper--primaryDisable:active {
  background-color: RGBA(var(--skin-css-var-S3), 0.5);
}

.phoenix-button__wraper--primaryLoading {
  background-color: RGBA(var(--skin-css-var-S3), 0.5);
  vertical-align: middle;
}

.phoenix-button__wraper--primaryLoading:hover {
  background-color: RGBA(var(--skin-css-var-S3), 0.5);
}

.phoenix-button__wraper--primaryLoading:active {
  background-color: RGBA(var(--skin-css-var-S3), 0.5);
}

.phoenix-button__wraper--secondaryLoading {
  color: RGBA(var(--skin-css-var-S2), 0.5);
  background-color: RGB(var(--skin-css-var-M9));
  border: 1px solid RGBA(var(--skin-css-var-S5), 0.5);
  vertical-align: middle;
}

.phoenix-button__wraper--secondaryLoading svg {
  color: RGBA(var(--skin-css-var-S3), 0.9);
}

.phoenix-button__wraper--secondaryLoading:hover {
  color: RGBA(var(--skin-css-var-S2), 0.5);
  background-color: RGB(var(--skin-css-var-M9));
  border: 1px solid RGBA(var(--skin-css-var-S4), 0.5);
}

.phoenix-button__wraper--secondaryLoading:active {
  color: RGBA(var(--skin-css-var-S2), 0.5);
  background-color: RGB(var(--skin-css-var-M9));
  border: 1px solid RGBA(var(--skin-css-var-S4), 0.5);
}

.phoenix-button__wraper--secondaryDisable {
  color: RGBA(var(--skin-css-var-S2), 0.5);
  background-color: RGB(var(--skin-css-var-M9));
  border: 1px solid RGBA(var(--skin-css-var-S5), 0.5);
  cursor: not-allowed;
}

.phoenix-button__wraper--secondaryDisable .phoenix-button__suffixIcon {
  color: RGBA(var(--skin-css-var-S3), 0.5);
}

.phoenix-button__wraper--secondaryDisable .phoenix-button__preIcon {
  color: RGBA(var(--skin-css-var-S3), 0.5);
}

.phoenix-button__wraper--secondaryDisable:hover {
  color: RGBA(var(--skin-css-var-S2), 0.5);
  background-color: RGB(var(--skin-css-var-M9));
  border: 1px solid RGBA(var(--skin-css-var-S4), 0.5);
}

.phoenix-button__wraper--secondaryDisable:hover .phoenix-button__suffixIcon {
  color: RGBA(var(--skin-css-var-S3), 0.5);
}

.phoenix-button__wraper--secondaryDisable:hover .phoenix-button__preIcon {
  color: RGBA(var(--skin-css-var-S3), 0.5);
}

.phoenix-button__wraper--secondaryDisable:active {
  color: RGBA(var(--skin-css-var-S2), 0.5);
  background-color: RGB(var(--skin-css-var-M9));
  border: 1px solid RGBA(var(--skin-css-var-S4), 0.5);
}

.phoenix-button__wraper--secondaryDisable:active .phoenix-button__suffixIcon {
  color: RGBA(var(--skin-css-var-S3), 0.5);
}

.phoenix-button__wraper--secondaryDisable:active .phoenix-button__preIcon {
  color: RGBA(var(--skin-css-var-S3), 0.5);
}

.phoenix-button__wraper--normalLoading {
  color: RGB(var(--skin-css-var-M5));
  background-color: RGBA(var(--skin-css-var-M6), 0.3);
  border: 1px solid RGB(var(--skin-css-var-M6));
}

.phoenix-button__wraper--normalLoading svg {
  color: RGBA(var(--skin-css-var-M4), 0.9);
}

.phoenix-button__wraper--normalLoading:hover {
  color: RGB(var(--skin-css-var-M5));
  background-color: RGBA(var(--skin-css-var-M6), 0.3);
  border: 1px solid RGB(var(--skin-css-var-M6));
}

.phoenix-button__wraper--normalLoading:active {
  color: RGB(var(--skin-css-var-M5));
  background-color: RGBA(var(--skin-css-var-M6), 0.3);
  border: 1px solid RGB(var(--skin-css-var-M6));
}

.phoenix-button__wraper--normalDisable {
  color: RGB(var(--skin-css-var-M5));
  background-color: RGBA(var(--skin-css-var-M6), 0.3);
  border: 1px solid RGB(var(--skin-css-var-M6));
  cursor: not-allowed;
}

.phoenix-button__wraper--normalDisable:hover, .phoenix-button__wraper--normalDisable:active {
  color: RGB(var(--skin-css-var-M5));
  background-color: RGBA(var(--skin-css-var-M6), 0.3);
  border: 1px solid RGB(var(--skin-css-var-M6));
}

.phoenix-button__wraper--normalDisable:hover .phoenix-button__suffixIcon, .phoenix-button__wraper--normalDisable:active .phoenix-button__suffixIcon {
  color: RGB(var(--skin-css-var-M4));
}

.phoenix-button__wraper--normalDisable:hover .phoenix-button__preIcon, .phoenix-button__wraper--normalDisable:active .phoenix-button__preIcon {
  color: RGB(var(--skin-css-var-M4));
}

.phoenix-button__content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phoenix-button__loading {
  margin-right: 4px;
}

.phoenix-button__preIcon {
  align-items: center;
  margin-right: 4px;
  width: auto;
  line-height: 0;
  font-size: 0;
}

.phoenix-button__preIcon svg {
  vertical-align: middle;
  width: 14px;
  height: 14px;
}

.phoenix-button__suffixIcon {
  align-items: center;
  margin-left: 4px;
  width: auto;
  line-height: 0;
}

.phoenix-button__suffixIcon svg {
  vertical-align: middle;
  width: 12px;
  height: 12px;
}