body {
  /***** Outline *****/
  --btn-outline-color-text: var(--brand-color);
  --btn-outline-color-text-disabled: var(--brand-color-disabled);
  --btn-outline-color-text-hover: var(--brand-color-hover);
  --btn-outline-color-text-active: var(--brand-color-active);
  --btn-outline-color-bg: transparent;
  --btn-outline-color-bg-disabled: transparent;
  --btn-outline-color-bg-hover: transparent;
  --btn-outline-color-bg-active: transparent;
  --btn-outline-color-border: var(--brand-color);
  --btn-outline-color-border-disabled: var(--brand-color-disabled);
  --btn-outline-color-border-hover: var(--brand-color-hover);
  --btn-outline-color-border-active: var(--brand-color-active);
  --btn-outline-color-text-warning: var(--warning-color);
  --btn-outline-color-text-warning-disabled: var(--warning-color-disabled);
  --btn-outline-color-text-warning-hover: var(--warning-color-hover);
  --btn-outline-color-text-warning-active: var(--warning-color-active);
  --btn-outline-color-bg-warning: transparent;
  --btn-outline-color-bg-warning-disabled: transparent;
  --btn-outline-color-bg-warning-hover: transparent;
  --btn-outline-color-bg-warning-active: transparent;
  --btn-outline-color-border-warning: var(--warning-color);
  --btn-outline-color-border-warning-disabled: var(--warning-color-disabled);
  --btn-outline-color-border-warning-hover: var(--warning-color-hover);
  --btn-outline-color-border-warning-active: var(--warning-color-active);
  --btn-outline-color-text-error: var(--error-color);
  --btn-outline-color-text-error-disabled: var(--error-color-disabled);
  --btn-outline-color-text-error-hover: var(--error-color-hover);
  --btn-outline-color-text-error-active: var(--error-color-active);
  --btn-outline-color-bg-error: transparent;
  --btn-outline-color-bg-error-disabled: transparent;
  --btn-outline-color-bg-error-hover: transparent;
  --btn-outline-color-bg-error-active: transparent;
  --btn-outline-color-border-error: var(--error-6);
  --btn-outline-color-border-error-disabled: var(--error-color-disabled);
  --btn-outline-color-border-error-hover: var(--error-color-hover);
  --btn-outline-color-border-error-active: var(--error-color-active);
  --btn-outline-color-text-success: var(--success-color);
  --btn-outline-color-text-success-disabled: var(--success-color-disabled);
  --btn-outline-color-text-success-hover: var(--success-color-hover);
  --btn-outline-color-text-success-active: var(--success-color-active);
  --btn-outline-color-bg-success: transparent;
  --btn-outline-color-bg-success-disabled: transparent;
  --btn-outline-color-bg-success-hover: transparent;
  --btn-outline-color-bg-success-active: transparent;
  --btn-outline-color-border-success: var(--success-color);
  --btn-outline-color-border-success-disabled: var(--success-color-disabled);
  --btn-outline-color-border-success-hover: var(--success-color-hover);
  --btn-outline-color-border-success-active: var(--success-color-active);
  --btn-outline-color-text-default: var(--text-color-primary);
  --btn-outline-color-text-default-disabled: var(--text-color-placeholder);
  --btn-outline-color-text-default-hover: var(--text-color-secondary);
  --btn-outline-color-text-default-active: var(--text-color-primary);
  --btn-outline-color-bg-default: transparent;
  --btn-outline-color-bg-default-disabled: transparent;
  --btn-outline-color-bg-default-hover: transparent;
  --btn-outline-color-bg-default-active: transparent;
  --btn-outline-color-border-default: var(--text-color-primary);
  --btn-outline-color-border-default-disabled: var(--text-color-placeholder);
  --btn-outline-color-border-default-hover: var(--text-color-secondary);
  --btn-outline-color-border-default-active: var(--text-color-primary);
  /***** brand *****/
  --btn-brand-color-text: #fff;
  --btn-brand-color-text-disabled: #fff;
  --btn-brand-color-text-hover: #fff;
  --btn-brand-color-text-active: #fff;
  --btn-brand-color-bg: var(--brand-color);
  --btn-brand-color-bg-disabled: var(--brand-color-disabled);
  --btn-brand-color-bg-hover: var(--brand-color-hover);
  --btn-brand-color-bg-active: var(--brand-color-active);
  --btn-brand-color-hover-border: transparent;
  --btn-brand-color-border: transparent;
  --btn-brand-color-border-hover: transparent;
  --btn-brand-color-border-disabled: var(--brand-color-disabled);
  --btn-brand-color-border-active: transparent;
  --btn-brand-color-text-warning: #fff;
  --btn-brand-color-text-warning-disabled: #fff;
  --btn-brand-color-text-warning-hover: #fff;
  --btn-brand-color-text-warning-active: #fff;
  --btn-brand-color-bg-warning: var(--warning-color);
  --btn-brand-color-bg-warning-disabled: var(--warning-color-disabled);
  --btn-brand-color-bg-warning-hover: var(--warning-color-hover);
  --btn-brand-color-bg-warning-active: var(--warning-color-active);
  --btn-brand-color-border-warning: transparent;
  --btn-brand-color-border-warning-disabled: transparent;
  --btn-brand-color-border-warning-hover: transparent;
  --btn-brand-color-border-warning-active: transparent;
  --btn-brand-color-text-error: #fff;
  --btn-brand-color-text-error-disabled: #fff;
  --btn-brand-color-text-error-hover: #fff;
  --btn-brand-color-text-error-active: #fff;
  --btn-brand-color-bg-error: var(--error-color);
  --btn-brand-color-bg-error-disabled: var(--error-color-disabled);
  --btn-brand-color-bg-error-hover: var(--error-color-hover);
  --btn-brand-color-bg-error-active: var(--error-color-active);
  --btn-brand-color-border-error: transparent;
  --btn-brand-color-border-error-disabled: transparent;
  --btn-brand-color-border-error-hover: transparent;
  --btn-brand-color-border-error-active: transparent;
  --btn-brand-color-text-success: #fff;
  --btn-brand-color-text-success-disabled: #fff;
  --btn-brand-color-text-success-hover: #fff;
  --btn-brand-color-text-success-active: #fff;
  --btn-brand-color-bg-success: var(--success-color);
  --btn-brand-color-bg-success-disabled: var(--success-color-disabled);
  --btn-brand-color-bg-success-hover: var(--success-color-hover);
  --btn-brand-color-bg-success-active: var(--success-color-active);
  --btn-brand-color-border-success: transparent;
  --btn-brand-color-border-success-disabled: transparent;
  --btn-brand-color-border-success-hover: transparent;
  --btn-brand-color-border-success-active: transparent;
  --btn-brand-color-text-default: var(--text-color-primary);
  --btn-brand-color-text-default-disabled: var(--text-color-disabled);
  --btn-brand-color-text-default-hover: var(--text-color-primary);
  --btn-brand-color-text-default-active: var(--text-color-primary);
  --btn-brand-color-bg-default: var(--bg-color-component);
  --btn-brand-color-bg-default-disabled: var(--bg-color-component-disabled);
  --btn-brand-color-bg-default-hover: var(--bg-color-component-hover);
  --btn-brand-color-bg-default-active: var(--bg-color-component-active);
  --btn-brand-color-border-default: transparent;
  --btn-brand-color-border-default-disabled: transparent;
  --btn-brand-color-border-default-hover: transparent;
  --btn-brand-color-border-default-active: transparent;
  /***** Text *****/
  --btn-text-color-text: var(--brand-color);
  --btn-text-color-text-disabled: var(--brand-color-disabled);
  --btn-text-color-text-hover: var(--brand-color-hover);
  --btn-text-color-text-active: var(--brand-color-active);
  --btn-text-color-bg: transparent;
  --btn-text-color-bg-disabled: transparent;
  --btn-text-color-bg-hover: var(--bg-color-container-hover);
  --btn-text-color-bg-active: var(--bg-color-container-active);
  --btn-text-color-border: transparent;
  --btn-text-color-border-disabled: transparent;
  --btn-text-color-border-hover: transparent;
  --btn-text-color-border-active: transparent;
  --btn-text-color-text-warning: var(--warning-color);
  --btn-text-color-text-warning-disabled: var(--warning-color-disabled);
  --btn-text-color-text-warning-hover: var(--warning-color-hover);
  --btn-text-color-text-warning-active: var(--warning-color-active);
  --btn-text-color-bg-warning: transparent;
  --btn-text-color-bg-warning-disabled: transparent;
  --btn-text-color-bg-warning-hover: var(--bg-color-container-hover);
  --btn-text-color-bg-warning-active: var(--bg-color-container-active);
  --btn-text-color-border-warning: transparent;
  --btn-text-color-border-warning-disabled: transparent;
  --btn-text-color-border-warning-hover: transparent;
  --btn-text-color-border-warning-active: transparent;
  --btn-text-color-text-error: var(--error-color);
  --btn-text-color-text-error-disabled: var(--error-color-disabled);
  --btn-text-color-text-error-hover: var(--error-color-hover);
  --btn-text-color-text-error-active: var(--error-color-active);
  --btn-text-color-bg-error: transparent;
  --btn-text-color-bg-error-disabled: transparent;
  --btn-text-color-bg-error-hover: var(--bg-color-container-hover);
  --btn-text-color-bg-error-active: var(--bg-color-container-active);
  --btn-text-color-border-error: transparent;
  --btn-text-color-border-error-disabled: transparent;
  --btn-text-color-border-error-hover: transparent;
  --btn-text-color-border-error-active: transparent;
  --btn-text-color-text-success: var(--success-color);
  --btn-text-color-text-success-disabled: var(--success-color-disabled);
  --btn-text-color-text-success-hover: var(--success-color-hover);
  --btn-text-color-text-success-active: var(--success-color-active);
  --btn-text-color-bg-success: transparent;
  --btn-text-color-bg-success-disabled: transparent;
  --btn-text-color-bg-success-hover: var(--bg-color-container-hover);
  --btn-text-color-bg-success-active: var(--bg-color-container-active);
  --btn-text-color-border-success: transparent;
  --btn-text-color-border-success-disabled: transparent;
  --btn-text-color-border-success-hover: transparent;
  --btn-text-color-border-success-active: transparent;
  --btn-text-color-text-default: var(--text-color-primary);
  --btn-text-color-text-default-disabled: var(--text-color-disabled);
  --btn-text-color-text-default-hover: var(--text-color-primary);
  --btn-text-color-text-default-active: var(--text-color-primary);
  --btn-text-color-bg-default: transparent;
  --btn-text-color-bg-default-disabled: transparent;
  --btn-text-color-bg-default-hover: var(--bg-color-container-hover);
  --btn-text-color-bg-default-active: var(--bg-color-container-active);
  --btn-text-color-border-default: transparent;
  --btn-text-color-border-default-disabled: transparent;
  --btn-text-color-border-default-hover: transparent;
  --btn-text-color-border-default-active: transparent;
  --btn-radius: var(--border-radius-large);
  --btn-padding: 0 14px;
  --btn-height: 32px;
  --btn-font-size: 14px;
}
.mx-btn {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  outline: none;
  padding: var(--btn-padding);
  height: var(--btn-height);
  font-size: var(--btn-font-size);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-user-select: none;
          user-select: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s var(--transition-timing-function-standard);
  box-sizing: border-box;
  line-height: 1.5715;
  border-radius: var(--btn-radius);
}
.mx-btn > a:only-child {
  /* stylelint-disable-next-line value-keyword-case */
  color: currentColor;
}
.mx-btn:active {
  transition: none;
}
.mx-btn:active:not(.mx-btn-loading):not(.mx-btn-disabled) {
  transition: none;
}
.mx-btn:empty {
  display: inline-block;
  vertical-align: bottom;
}
.mx-btn-long {
  display: block;
  width: 100%;
}
.mx-btn-loading {
  cursor: default;
  position: relative;
}
.mx-btn-loading::before {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  z-index: 1;
  display: block;
  background: #fff;
  border-radius: inherit;
  opacity: 0.4;
  transition: opacity 1s var(--transition-timing-function-linear);
  pointer-events: none;
}
.mx-btn-loading-fixed-width {
  transition: none;
}
.mx-btn-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: top;
  padding: 0;
  width: 32px;
}
.mx-btn > svg + span {
  margin-left: 8px;
}
.mx-btn > span + span {
  margin-left: 8px;
}
.mx-btn-outline:not(.mx-btn-disabled) {
  background-color: var(--btn-outline-color-bg);
  color: var(--btn-outline-color-text);
  border: 1px solid var(--btn-outline-color-border);
}
.mx-btn-outline:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-outline-color-border-hover);
  color: var(--btn-outline-color-text-hover);
  background-color: var(--btn-outline-color-bg-hover);
}
.mx-btn-outline:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-outline-color-border-active);
  color: var(--btn-outline-color-text-active);
  background-color: var(--btn-outline-color-bg-active);
}
.mx-btn-outline:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--brand-color-3);
}
.mx-btn-outline.mx-btn-disabled {
  background-color: var(--btn-outline-color-bg-disabled);
  color: var(--btn-outline-color-text-disabled);
  border: 1px solid var(--btn-outline-color-border-disabled);
  cursor: not-allowed;
}
.mx-btn-outline.mx-btn-status-warning:not(.mx-btn-disabled) {
  background-color: var(--btn-outline-color-bg-warning);
  color: var(--btn-outline-color-text-warning);
  border-color: var(--btn-outline-color-border-warning);
}
.mx-btn-outline.mx-btn-status-warning:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-outline-color-border-warning-hover);
  color: var(--btn-outline-color-text-warning-hover);
  background-color: var(--btn-outline-color-bg-warning-hover);
}
.mx-btn-outline.mx-btn-status-warning:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-outline-color-border-warning-active);
  color: var(--btn-outline-color-text-warning-active);
  background-color: var(--btn-outline-color-bg-warning-active);
}
.mx-btn-outline.mx-btn-status-warning:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--warning-color-3);
}
.mx-btn-outline.mx-btn-status-warning.mx-btn-disabled {
  color: var(--btn-outline-color-text-warning-disabled);
  background-color: var(--btn-outline-color-bg-warning-disabled);
  border: 1px solid var(--btn-outline-color-border-warning-disabled);
}
.mx-btn-outline.mx-btn-status-error:not(.mx-btn-disabled) {
  background-color: var(--btn-outline-color-bg-error);
  color: var(--btn-outline-color-text-error);
  border-color: var(--btn-outline-color-border-error);
}
.mx-btn-outline.mx-btn-status-error:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-outline-color-border-error-hover);
  color: var(--btn-outline-color-text-error-hover);
  background-color: var(--btn-outline-color-bg-error-hover);
}
.mx-btn-outline.mx-btn-status-error:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-outline-color-border-error-active);
  color: var(--btn-outline-color-text-error-active);
  background-color: var(--btn-outline-color-bg-error-active);
}
.mx-btn-outline.mx-btn-status-error:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--error-color-3);
}
.mx-btn-outline.mx-btn-status-error.mx-btn-disabled {
  color: var(--btn-outline-color-text-error-disabled);
  background-color: var(--btn-outline-color-bg-error-disabled);
  border: 1px solid var(--btn-outline-color-border-error-disabled);
}
.mx-btn-outline.mx-btn-status-success:not(.mx-btn-disabled) {
  background-color: var(--btn-outline-color-bg-success);
  color: var(--btn-outline-color-text-success);
  border-color: var(--btn-outline-color-border-success);
}
.mx-btn-outline.mx-btn-status-success:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-outline-color-border-success-hover);
  color: var(--btn-outline-color-text-success-hover);
  background-color: var(--btn-outline-color-bg-success-hover);
}
.mx-btn-outline.mx-btn-status-success:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-outline-color-border-success-active);
  color: var(--btn-outline-color-text-success-active);
  background-color: var(--btn-outline-color-bg-success-active);
}
.mx-btn-outline.mx-btn-status-success:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--success-color-3);
}
.mx-btn-outline.mx-btn-status-success.mx-btn-disabled {
  color: var(--btn-outline-color-text-success-disabled);
  background-color: var(--btn-outline-color-bg-success-disabled);
  border: 1px solid var(--btn-outline-color-border-success-disabled);
}
.mx-btn-outline.mx-btn-status-default:not(.mx-btn-disabled) {
  background-color: var(--btn-outline-color-bg-default);
  color: var(--btn-outline-color-text-default);
  border-color: var(--btn-outline-color-border-default);
}
.mx-btn-outline.mx-btn-status-default:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-outline-color-border-default-hover);
  color: var(--btn-outline-color-text-default-hover);
  background-color: var(--btn-outline-color-bg-default-hover);
}
.mx-btn-outline.mx-btn-status-default:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-outline-color-border-default-active);
  color: var(--btn-outline-color-text-default-active);
  background-color: var(--btn-outline-color-bg-default-active);
}
.mx-btn-outline.mx-btn-status-default:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--gray-color-2);
}
.mx-btn-outline.mx-btn-status-default.mx-btn-disabled {
  color: var(--btn-outline-color-text-default-disabled);
  background-color: var(--btn-outline-color-bg-default-disabled);
  border: 1px solid var(--btn-outline-color-border-default-disabled);
}
.mx-btn-brand:not(.mx-btn-disabled) {
  background-color: var(--btn-brand-color-bg);
  color: var(--btn-brand-color-text);
  border: 1px solid var(--btn-brand-color-hover-border);
}
.mx-btn-brand:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-brand-color-border-hover);
  color: var(--btn-brand-color-text-hover);
  background-color: var(--btn-brand-color-bg-hover);
}
.mx-btn-brand:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-brand-color-border-active);
  color: var(--btn-brand-color-text-active);
  background-color: var(--btn-brand-color-bg-active);
}
.mx-btn-brand:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--brand-color-3);
}
.mx-btn-brand.mx-btn-disabled {
  background-color: var(--btn-brand-color-bg-disabled);
  color: var(--btn-brand-color-text-disabled);
  border: 1px solid var(--btn-brand-color-border-disabled);
  cursor: not-allowed;
}
.mx-btn-brand.mx-btn-status-warning:not(.mx-btn-disabled) {
  background-color: var(--btn-brand-color-bg-warning);
  color: var(--btn-brand-color-text-warning);
  border-color: var(--btn-brand-color-border-warning);
}
.mx-btn-brand.mx-btn-status-warning:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-brand-color-border-warning-hover);
  color: var(--btn-brand-color-text-warning-hover);
  background-color: var(--btn-brand-color-bg-warning-hover);
}
.mx-btn-brand.mx-btn-status-warning:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-brand-color-border-warning-active);
  color: var(--btn-brand-color-text-warning-active);
  background-color: var(--btn-brand-color-bg-warning-active);
}
.mx-btn-brand.mx-btn-status-warning:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--warning-color-3);
}
.mx-btn-brand.mx-btn-status-warning.mx-btn-disabled {
  color: var(--btn-brand-color-text-warning-disabled);
  background-color: var(--btn-brand-color-bg-warning-disabled);
  border: 1px solid var(--btn-brand-color-border-warning-disabled);
}
.mx-btn-brand.mx-btn-status-error:not(.mx-btn-disabled) {
  background-color: var(--btn-brand-color-bg-error);
  color: var(--btn-brand-color-text-error);
  border-color: var(--btn-brand-color-border-error);
}
.mx-btn-brand.mx-btn-status-error:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-brand-color-border-error-hover);
  color: var(--btn-brand-color-text-error-hover);
  background-color: var(--btn-brand-color-bg-error-hover);
}
.mx-btn-brand.mx-btn-status-error:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-brand-color-border-error-active);
  color: var(--btn-brand-color-text-error-active);
  background-color: var(--btn-brand-color-bg-error-active);
}
.mx-btn-brand.mx-btn-status-error:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--error-color-3);
}
.mx-btn-brand.mx-btn-status-error.mx-btn-disabled {
  color: var(--btn-brand-color-text-error-disabled);
  background-color: var(--btn-brand-color-bg-error-disabled);
  border: 1px solid var(--btn-brand-color-border-error-disabled);
}
.mx-btn-brand.mx-btn-status-success:not(.mx-btn-disabled) {
  background-color: var(--btn-brand-color-bg-success);
  color: var(--btn-brand-color-text-success);
  border-color: var(--btn-brand-color-border-success);
}
.mx-btn-brand.mx-btn-status-success:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-brand-color-border-success-hover);
  color: var(--btn-brand-color-text-success-hover);
  background-color: var(--btn-brand-color-bg-success-hover);
}
.mx-btn-brand.mx-btn-status-success:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-brand-color-border-success-active);
  color: var(--btn-brand-color-text-success-active);
  background-color: var(--btn-brand-color-bg-success-active);
}
.mx-btn-brand.mx-btn-status-success:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--success-color-3);
}
.mx-btn-brand.mx-btn-status-success.mx-btn-disabled {
  color: var(--btn-brand-color-text-success-disabled);
  background-color: var(--btn-brand-color-bg-success-disabled);
  border: 1px solid var(--btn-brand-color-border-success-disabled);
}
.mx-btn-brand.mx-btn-status-default:not(.mx-btn-disabled) {
  background-color: var(--btn-brand-color-bg-default);
  color: var(--btn-brand-color-text-default);
  border-color: var(--btn-brand-color-border-default);
}
.mx-btn-brand.mx-btn-status-default:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-brand-color-border-default-hover);
  color: var(--btn-brand-color-text-default-hover);
  background-color: var(--btn-brand-color-bg-default-hover);
}
.mx-btn-brand.mx-btn-status-default:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-brand-color-border-default-active);
  color: var(--btn-brand-color-text-default-active);
  background-color: var(--btn-brand-color-bg-default-active);
}
.mx-btn-brand.mx-btn-status-default:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--gray-color-2);
}
.mx-btn-brand.mx-btn-status-default.mx-btn-disabled {
  color: var(--btn-brand-color-text-default-disabled);
  background-color: var(--btn-brand-color-bg-default-disabled);
  border: 1px solid var(--btn-brand-color-border-default-disabled);
}
.mx-btn-text:not(.mx-btn-disabled) {
  background-color: var(--btn-text-color-bg);
  color: var(--btn-text-color-text);
  border: 1px solid var(--btn-text-color-border);
}
.mx-btn-text:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-text-color-border-hover);
  color: var(--btn-text-color-text-hover);
  background-color: var(--btn-text-color-bg-hover);
}
.mx-btn-text:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-text-color-border-active);
  color: var(--btn-text-color-text-active);
  background-color: var(--btn-text-color-bg-active);
}
.mx-btn-text:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--brand-color-3);
}
.mx-btn-text.mx-btn-disabled {
  background-color: var(--btn-text-color-bg-disabled);
  color: var(--btn-text-color-text-disabled);
  border: 1px solid var(--btn-text-color-border-disabled);
  cursor: not-allowed;
}
.mx-btn-text.mx-btn-status-warning:not(.mx-btn-disabled) {
  background-color: var(--btn-text-color-bg-warning);
  color: var(--btn-text-color-text-warning);
  border-color: var(--btn-text-color-border-warning);
}
.mx-btn-text.mx-btn-status-warning:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-text-color-border-warning-hover);
  color: var(--btn-text-color-text-warning-hover);
  background-color: var(--btn-text-color-bg-warning-hover);
}
.mx-btn-text.mx-btn-status-warning:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-text-color-border-warning-active);
  color: var(--btn-text-color-text-warning-active);
  background-color: var(--btn-text-color-bg-warning-active);
}
.mx-btn-text.mx-btn-status-warning:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--warning-color-3);
}
.mx-btn-text.mx-btn-status-warning.mx-btn-disabled {
  color: var(--btn-text-color-text-warning-disabled);
  background-color: var(--btn-text-color-bg-warning-disabled);
  border: 1px solid var(--btn-text-color-border-warning-disabled);
}
.mx-btn-text.mx-btn-status-error:not(.mx-btn-disabled) {
  background-color: var(--btn-text-color-bg-error);
  color: var(--btn-text-color-text-error);
  border-color: var(--btn-text-color-border-error);
}
.mx-btn-text.mx-btn-status-error:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-text-color-border-error-hover);
  color: var(--btn-text-color-text-error-hover);
  background-color: var(--btn-text-color-bg-error-hover);
}
.mx-btn-text.mx-btn-status-error:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-text-color-border-error-active);
  color: var(--btn-text-color-text-error-active);
  background-color: var(--btn-text-color-bg-error-active);
}
.mx-btn-text.mx-btn-status-error:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--error-color-3);
}
.mx-btn-text.mx-btn-status-error.mx-btn-disabled {
  color: var(--btn-text-color-text-error-disabled);
  background-color: var(--btn-text-color-bg-error-disabled);
  border: 1px solid var(--btn-text-color-border-error-disabled);
}
.mx-btn-text.mx-btn-status-success:not(.mx-btn-disabled) {
  background-color: var(--btn-text-color-bg-success);
  color: var(--btn-text-color-text-success);
  border-color: var(--btn-text-color-border-success);
}
.mx-btn-text.mx-btn-status-success:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-text-color-border-success-hover);
  color: var(--btn-text-color-text-success-hover);
  background-color: var(--btn-text-color-bg-success-hover);
}
.mx-btn-text.mx-btn-status-success:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-text-color-border-success-active);
  color: var(--btn-text-color-text-success-active);
  background-color: var(--btn-text-color-bg-success-active);
}
.mx-btn-text.mx-btn-status-success:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--success-color-3);
}
.mx-btn-text.mx-btn-status-success.mx-btn-disabled {
  color: var(--btn-text-color-text-success-disabled);
  background-color: var(--btn-text-color-bg-success-disabled);
  border: 1px solid var(--btn-text-color-border-success-disabled);
}
.mx-btn-text.mx-btn-status-default:not(.mx-btn-disabled) {
  background-color: var(--btn-text-color-bg-default);
  color: var(--btn-text-color-text-default);
  border-color: var(--btn-text-color-border-default);
}
.mx-btn-text.mx-btn-status-default:not(.mx-btn-disabled):not(.mx-btn-loading):hover {
  border-color: var(--btn-text-color-border-default-hover);
  color: var(--btn-text-color-text-default-hover);
  background-color: var(--btn-text-color-bg-default-hover);
}
.mx-btn-text.mx-btn-status-default:not(.mx-btn-disabled):not(.mx-btn-loading):active {
  border-color: var(--btn-text-color-border-default-active);
  color: var(--btn-text-color-text-default-active);
  background-color: var(--btn-text-color-bg-default-active);
}
.mx-btn-text.mx-btn-status-default:not(.mx-btn-disabled):focus-visible {
  box-shadow: 0 0 0 0.25em var(--gray-color-2);
}
.mx-btn-text.mx-btn-status-default.mx-btn-disabled {
  color: var(--btn-text-color-text-default-disabled);
  background-color: var(--btn-text-color-bg-default-disabled);
  border: 1px solid var(--btn-text-color-border-default-disabled);
}
.mx-btn-group {
  display: inline-block;
}
.mx-btn-group .mx-btn:first-child {
  border-radius: var(--btn-radius) 0 0 var(--btn-radius);
}
.mx-btn-group .mx-btn.mx-btn-outline:first-child:hover {
  border-right-color: transparent;
}
.mx-btn-group .mx-btn:not(:first-child):not(:last-child):hover {
  border-right-color: transparent;
}
.mx-btn-group .mx-btn:last-child {
  border-radius: 0 var(--btn-radius) var(--btn-radius) 0;
}
.mx-btn-group .mx-btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.mx-btn-group .mx-btn:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}