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;
}