.qnet-button {
  --color: var(--qnet-color-white);
  --text-color: var(--qnet-button-text-color, var(--qnet-color-text));
  --background-color: var(--qnet-button-background-color, var(--qnet-color-white));
  --border-radius: var(--qnet-button-border-radius, 4px);
  --border-width: var(--qnet-button-border-width, 1px);
  --border-style: var(--qnet-button-border-style, solid);
  --border-color: var(--qnet-button-border-color, var(--qnet-border-color));
  position: relative;
  display: inline-block;
  height: auto;
  margin: 0;
  padding: 7px 12px;
  font-size: 14px;
  text-align: center;
  color: var(--text-color);
  background-color: var(--background-color);
  border: var(--border-width) var(--border-style) var(--border-color);
  border-radius: var(--border-radius);
  transition: opacity ease 0.15s;
  user-select: none;
  box-sizing: border-box;
  cursor: pointer;
}
.qnet-button:focus {
  outline: none;
}
.qnet-button-default.qnet-button-fill-outline {
  --background-color: transparent;
  --border-color: var(--qnet-color-text);
}
.qnet-button-default.qnet-button-fill-none {
  --background-color: transparent;
  --border-width: 0px;
}
.qnet-button:not(.qnet-button-default) {
  --text-color: var(--qnet-color-white);
  --background-color: var(--color);
  --border-color: var(--color);
}
.qnet-button:not(.qnet-button-default).qnet-button-fill-outline {
  --text-color: var(--color);
  --background-color: transparent;
}
.qnet-button:not(.qnet-button-default).qnet-button-fill-none {
  --text-color: var(--color);
  --background-color: transparent;
  --border-width: 0px;
}
.qnet-button-primary {
  --color: var(--qnet-color-primary);
}
.qnet-button-success {
  --color: var(--qnet-color-success);
}
.qnet-button-danger {
  --color: var(--qnet-color-danger);
}
.qnet-button-warning {
  --color: var(--qnet-color-warning);
}
.qnet-button-block {
  display: block;
  width: 100%;
}
.qnet-button-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.qnet-button-disabled:active::before {
  display: none;
}
.qnet-button-mini {
  padding: 3px 8px;
  font-size: 12px;
}
.qnet-button-small {
  padding: 5px 10px;
  font-size: 13px;
}
.qnet-button-large {
  padding: 9px 14px;
  font-size: 16px;
}
.qnet-button-shape-round {
  --border-radius: 1000px;
}
.qnet-button-shape-square {
  --border-radius: 0;
}
.qnet-button-loading {
  vertical-align: bottom;
}
.qnet-button-loading-wrapper {
  display: flex;
  height: 1.4em;
  align-items: center;
  justify-content: center;
}
.qnet-button-loading-wrapper > .qnet-button-loading-wrapper {
  opacity: 0.8;
}
.qnet-button-loading-wrapper span {
  margin-left: 8px;
}
.qnet-button::before {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(calc(var(--border-width) * -1), calc(var(--border-width) * -1));
  width: 100%;
  height: 100%;
  background-color: #000;
  border: var(--border-width) var(--border-style) #000;
  border-radius: var(--border-radius);
  opacity: 0;
  content: ' ';
  box-sizing: content-box;
}
.qnet-button:active::before {
  opacity: 0.04;
}