.bui-btn {
  --border-radius: var(--bui-button-border-radius, 100px);
  --text-color: var(--bui-button-text-color, var(--bui-color-fg-muted));
  --bg-color: var(--bui-button-default-bg-color, var(--bui-color-neutral-5));
  --border-color: var(--bui-button-border-color, var(--bui-color-neutral-4));
  --height: var(--bui-button-height, 27px);
  --icon-start-margin-right: var(--bui-button-icon-start-margin-right, var(--bui-spacing-xs));
  --icon-start-margin-left: var(--bui-button-icon-start-margin-left, var(--bui-spacing-xs));
  --default-border: var(--bui-button-default-border, 1px solid transparent);
  --light-border: var(--bui-button-light-border, 1px solid transparent);
  --outlined-default-border: var(--bui-button-outlined-default-border, 1px solid var(--bui-color-neutral-4));
  --disabled-opacity: var(--bui-button-disabled-opacity, 0.5);
  --small-padding: var(--bui-button-small-padding, 0 11px);
  --small-height: var(--bui-button-small-height, 24px);
  --medium-padding: var(--bui-button-medium-padding, 0 14px);
  --large-padding: var(--bui-button-large-padding, 0 14px);
  --large-height: var(--bui-button-large-height, 33px);
  --full-font-size: var(--bui-button-full-font-size, var(--bui-title-size-4));
  --full-height: var(--bui-button-full-height, 42px);
  border: var(--default-border);
  outline: 0;
  background-color: transparent;
  cursor: pointer;
  color: var(--text-color);
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  margin: 0;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: var(--bui-text-size-3);
  font-weight: var(--bui-font-weight-medium);
  border-radius: var(--border-radius);
  height: var(--height);
  line-height: var(--bui-line-height);
  font-family: var(--bui-font-family);
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.bui-btn::after {
  border: 0;
}
.bui-btn::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: var(--bui-color-black);
  border: inherit;
  border-color: var(--bui-color-black);
  border-radius: inherit;
  transform: translate(-50%, -50%);
  opacity: 0;
  content: " ";
}
.bui-btn:active::before {
  opacity: 0.04;
}
.bui-btn-icon-start {
  display: inline-flex;
  align-self: center;
  flex-shrink: 0;
  margin-right: var(--icon-start-margin-right);
}
.bui-btn-icon-end {
  display: inline-flex;
  align-self: center;
  flex-shrink: 0;
  margin-left: var(--icon-start-margin-left);
}
.bui-btn-disabled {
  pointer-events: none;
  opacity: var(--disabled-opacity);
}
.bui-btn-small {
  font-size: var(--bui-text-size-4);
  padding: var(--small-padding);
  height: var(--small-height);
}
.bui-btn-medium {
  padding: var(--medium-padding);
  height: var(--height);
}
.bui-btn-large {
  font-size: var(--bui-text-size-2);
  padding: var(--large-padding);
  height: var(--large-height);
}
.bui-btn-full {
  font-size: var(--full-font-size);
  width: 100%;
  height: var(--full-height);
}
.bui-btn-text.bui-btn-primary {
  color: var(--bui-color-primary);
}
.bui-btn-text.bui-btn-success {
  color: var(--bui-color-success);
}
.bui-btn-text.bui-btn-info {
  color: var(--bui-color-info);
}
.bui-btn-text.bui-btn-warning {
  color: var(--bui-color-warning);
}
.bui-btn-text.bui-btn-danger {
  color: var(--bui-color-danger);
}
.bui-btn-text.bui-btn-vip {
  color: var(--bui-color-vip);
}
.bui-btn-contained {
  background-color: var(--bg-color);
}
.bui-btn-contained.bui-btn-primary {
  color: var(--bui-color-white);
  background-image:
    linear-gradient(
      90deg,
      var(--bui-color-primary-start) 0%,
      var(--bui-color-primary-end) 100%);
}
.bui-btn-contained.bui-btn-success {
  color: var(--bui-color-white);
  background-image:
    linear-gradient(
      90deg,
      var(--bui-color-success-start) 0%,
      var(--bui-color-success-end) 100%);
}
.bui-btn-contained.bui-btn-info {
  color: var(--bui-color-white);
  background-image:
    linear-gradient(
      90deg,
      var(--bui-color-info-start) 0%,
      var(--bui-color-info-end) 100%);
}
.bui-btn-contained.bui-btn-warning {
  color: var(--bui-color-white);
  background-image:
    linear-gradient(
      90deg,
      var(--bui-color-warning-start) 0%,
      var(--bui-color-warning-end) 100%);
}
.bui-btn-contained.bui-btn-danger {
  color: var(--bui-color-white);
  background-image:
    linear-gradient(
      90deg,
      var(--bui-color-danger-start) 0%,
      var(--bui-color-danger-end) 100%);
}
.bui-btn-contained.bui-btn-vip {
  color: #582331;
  background-image:
    linear-gradient(
      90deg,
      var(--bui-color-vip-start) 3%,
      var(--bui-color-vip-end) 100%);
}
.bui-btn-outlined {
  border: var(--outlined-default-border);
}
.bui-btn-outlined.bui-btn-primary {
  color: var(--bui-color-primary);
  border-color: var(--bui-color-primary);
}
.bui-btn-outlined.bui-btn-success {
  color: var(--bui-color-success);
  border-color: var(--bui-color-success);
}
.bui-btn-outlined.bui-btn-info {
  color: var(--bui-color-info);
  border-color: var(--bui-color-info);
}
.bui-btn-outlined.bui-btn-warning {
  color: var(--bui-color-warning);
  border-color: var(--bui-color-warning);
}
.bui-btn-outlined.bui-btn-danger {
  color: var(--bui-color-danger);
  border-color: var(--bui-color-danger);
}
.bui-btn-outlined.bui-btn-vip {
  color: var(--bui-color-vip);
  border-color: var(--bui-color-vip);
}
.bui-btn-light {
  background-image: none;
  background-color: var(--bui-color-gray-light);
  border: var(--light-border);
}
.bui-btn-light.bui-btn-warning {
  background-image: none;
  border: var(--light-border);
  color: var(--bui-color-warning);
  background-color: var(--bui-color-warning-light);
}
.bui-btn-light.bui-btn-primary {
  background-image: none;
  border: var(--light-border);
  color: var(--bui-color-primary);
  background-color: var(--bui-color-primary-light);
}
.bui-btn-light.bui-btn-info {
  background-image: none;
  border: var(--light-border);
  color: var(--bui-color-info);
  background-color: var(--bui-color-info-light);
}
.bui-btn-light.bui-btn-success {
  background-image: none;
  border: var(--light-border);
  color: var(--bui-color-success);
  background-color: var(--bui-color-success-light);
}
.bui-btn-light.bui-btn-danger {
  background-image: none;
  border: var(--light-border);
  color: var(--bui-color-danger);
  background-color: var(--bui-color-danger-light);
}
.bui-btn-light.bui-btn-vip {
  color: var(--bui-color-vip);
  position: relative;
  background-color: rgba(255, 134, 110, 0.3);
}