// radius
@btn-radius: var(--btn-radius);
// padding
@btn-padding: var(--btn-padding);
// height
@btn-height: var(--btn-height);
// timing-function
@transition-timing-function-standard: var(--transition-timing-function-standard);

/***** Outline *****/
@btn-outline-color-text: var(--btn-outline-color-text);
@btn-outline-color-text-disabled: var(--btn-outline-color-text-disabled);
@btn-outline-color-text-hover: var(--btn-outline-color-text-hover);
@btn-outline-color-text-active: var(--btn-outline-color-text-active);
@btn-outline-color-bg: var(--btn-outline-color-bg);
@btn-outline-color-bg-disabled: var(--btn-outline-color-bg-disabled);
@btn-outline-color-bg-hover: var(--btn-outline-color-bg-hover);
@btn-outline-color-bg-active: var(--btn-outline-color-bg-active);
@btn-outline-color-border: var(--btn-outline-color-border);
@btn-outline-color-border-disabled: var(--btn-outline-color-border-disabled);
@btn-outline-color-border-hover: var(--btn-outline-color-border-hover);
@btn-outline-color-border-active: var(--btn-outline-color-border-active);

// warning
@btn-outline-color-text-warning: var(--btn-outline-color-text-warning);
@btn-outline-color-text-warning-disabled: var(--btn-outline-color-text-warning-disabled);
@btn-outline-color-text-warning-hover: var(--btn-outline-color-text-warning-hover);
@btn-outline-color-text-warning-active: var(--btn-outline-color-text-warning-active);
@btn-outline-color-bg-warning: var(--btn-outline-color-bg-warning);
@btn-outline-color-bg-warning-disabled: var(--btn-outline-color-bg-warning-disabled);
@btn-outline-color-bg-warning-hover: var(--btn-outline-color-bg-warning-hover);
@btn-outline-color-bg-warning-active: var(--btn-outline-color-bg-warning-active);
@btn-outline-color-border-warning: var(--btn-outline-color-border-warning);
@btn-outline-color-border-warning-disabled: var(--btn-outline-color-border-warning-disabled);
@btn-outline-color-border-warning-hover: var(--btn-outline-color-border-warning-hover);
@btn-outline-color-border-warning-active: var(--btn-outline-color-border-warning-active);
// error
@btn-outline-color-text-error: var(--btn-outline-color-text-error);
@btn-outline-color-text-error-disabled: var(--btn-outline-color-text-error-disabled);
@btn-outline-color-text-error-hover: var(--btn-outline-color-text-error-hover);
@btn-outline-color-text-error-active: var(--btn-outline-color-text-error-active);
@btn-outline-color-bg-error: var(--btn-outline-color-bg-error);
@btn-outline-color-bg-error-disabled: var(--btn-outline-color-bg-error-disabled);
@btn-outline-color-bg-error-hover: var(--btn-outline-color-bg-error-hover);
@btn-outline-color-bg-error-active: var(--btn-outline-color-bg-error-active);
@btn-outline-color-border-error: var(--btn-outline-color-border-error);
@btn-outline-color-border-error-disabled: var(--btn-outline-color-border-error-disabled);
@btn-outline-color-border-error-hover: var(--btn-outline-color-border-error-hover);
@btn-outline-color-border-error-active: var(--btn-outline-color-border-error-active);
// success
@btn-outline-color-text-success: var(--btn-outline-color-text-success);
@btn-outline-color-text-success-disabled: var(--btn-outline-color-text-success-disabled);
@btn-outline-color-text-success-hover: var(--btn-outline-color-text-success-hover);
@btn-outline-color-text-success-active: var(--btn-outline-color-text-success-active);
@btn-outline-color-bg-success: var(--btn-outline-color-bg-success);
@btn-outline-color-bg-success-disabled: var(--btn-outline-color-bg-success-disabled);
@btn-outline-color-bg-success-hover: var(--btn-outline-color-bg-success-hover);
@btn-outline-color-bg-success-active: var(--btn-outline-color-bg-success-active);
@btn-outline-color-border-success: var(--btn-outline-color-border-success);
@btn-outline-color-border-success-disabled: var(--btn-outline-color-border-success-disabled);
@btn-outline-color-border-success-hover: var(--btn-outline-color-border-success-hover);
@btn-outline-color-border-success-active: var(--btn-outline-color-border-success-active);
// default
@btn-outline-color-text-default: var(--btn-outline-color-text-default);
@btn-outline-color-text-default-disabled: var(--btn-outline-color-text-default-disabled);
@btn-outline-color-text-default-hover: var(--btn-outline-color-text-default-hover);
@btn-outline-color-text-default-active: var(--btn-outline-color-text-default-active);
@btn-outline-color-bg-default: var(--btn-outline-color-bg-default);
@btn-outline-color-bg-default-disabled: var(--btn-outline-color-bg-default-disabled);
@btn-outline-color-bg-default-hover: var(--btn-outline-color-bg-default-hover);
@btn-outline-color-bg-default-active: var(--btn-outline-color-bg-default-active);
@btn-outline-color-border-default: var(--btn-outline-color-border-default);
@btn-outline-color-border-default-disabled: var(--btn-outline-color-border-default-disabled);
@btn-outline-color-border-default-hover: var(--btn-outline-color-border-default-hover);
@btn-outline-color-border-default-active: var(--btn-outline-color-border-default-active);

/***** brand *****/
@btn-brand-color-text: var(--btn-brand-color-text);
@btn-brand-color-text-disabled: var(--btn-brand-color-text-disabled);
@btn-brand-color-text-hover: var(--btn-brand-color-text-hover);
@btn-brand-color-text-active: var(--btn-brand-color-text-active);
@btn-brand-color-bg: var(--btn-brand-color-bg);
@btn-brand-color-bg-disabled: var(--btn-brand-color-bg-disabled);
@btn-brand-color-bg-hover: var(--btn-brand-color-bg-hover);
@btn-brand-color-bg-active: var(--btn-brand-color-bg-active);
@btn-brand-color-border: var(--btn-brand-color-hover-border);
@btn-brand-color-border-hover: var(--btn-brand-color-border-hover);
@btn-brand-color-border-disabled: var(--btn-brand-color-border-disabled);
@btn-brand-color-border-active: var(--btn-brand-color-border-active);

// warning
@btn-brand-color-text-warning: var(--btn-brand-color-text-warning);
@btn-brand-color-text-warning-disabled: var(--btn-brand-color-text-warning-disabled);
@btn-brand-color-text-warning-hover: var(--btn-brand-color-text-warning-hover);
@btn-brand-color-text-warning-active: var(--btn-brand-color-text-warning-active);
@btn-brand-color-bg-warning: var(--btn-brand-color-bg-warning);
@btn-brand-color-bg-warning-disabled: var(--btn-brand-color-bg-warning-disabled);
@btn-brand-color-bg-warning-hover: var(--btn-brand-color-bg-warning-hover);
@btn-brand-color-bg-warning-active: var(--btn-brand-color-bg-warning-active);
@btn-brand-color-border-warning: var(--btn-brand-color-border-warning);
@btn-brand-color-border-warning-disabled: var(--btn-brand-color-border-warning-disabled);
@btn-brand-color-border-warning-hover: var(--btn-brand-color-border-warning-hover);
@btn-brand-color-border-warning-active: var(--btn-brand-color-border-warning-active);
// error
@btn-brand-color-text-error: var(--btn-brand-color-text-error);
@btn-brand-color-text-error-disabled: var(--btn-brand-color-text-error-disabled);
@btn-brand-color-text-error-hover: var(--btn-brand-color-text-error-hover);
@btn-brand-color-text-error-active: var(--btn-brand-color-text-error-active);
@btn-brand-color-bg-error: var(--btn-brand-color-bg-error);
@btn-brand-color-bg-error-disabled: var(--btn-brand-color-bg-error-disabled);
@btn-brand-color-bg-error-hover: var(--btn-brand-color-bg-error-hover);
@btn-brand-color-bg-error-active: var(--btn-brand-color-bg-error-active);
@btn-brand-color-border-error: var(--btn-brand-color-border-error);
@btn-brand-color-border-error-disabled: var(--btn-brand-color-border-error-disabled);
@btn-brand-color-border-error-hover: var(--btn-brand-color-border-error-hover);
@btn-brand-color-border-error-active: var(--btn-brand-color-border-error-active);
// success
@btn-brand-color-text-success: var(--btn-brand-color-text-success);
@btn-brand-color-text-success-disabled: var(--btn-brand-color-text-success-disabled);
@btn-brand-color-text-success-hover: var(--btn-brand-color-text-success-hover);
@btn-brand-color-text-success-active: var(--btn-brand-color-text-success-active);
@btn-brand-color-bg-success: var(--btn-brand-color-bg-success);
@btn-brand-color-bg-success-disabled: var(--btn-brand-color-bg-success-disabled);
@btn-brand-color-bg-success-hover: var(--btn-brand-color-bg-success-hover);
@btn-brand-color-bg-success-active: var(--btn-brand-color-bg-success-active);
@btn-brand-color-border-success: var(--btn-brand-color-border-success);
@btn-brand-color-border-success-disabled: var(--btn-brand-color-border-success-disabled);
@btn-brand-color-border-success-hover: var(--btn-brand-color-border-success-hover);
@btn-brand-color-border-success-active: var(--btn-brand-color-border-success-active);
// default
@btn-brand-color-text-default: var(--btn-brand-color-text-default);
@btn-brand-color-text-default-disabled: var(--btn-brand-color-text-default-disabled);
@btn-brand-color-text-default-hover: var(--btn-brand-color-text-default-hover);
@btn-brand-color-text-default-active: var(--btn-brand-color-text-default-active);
@btn-brand-color-bg-default: var(--btn-brand-color-bg-default);
@btn-brand-color-bg-default-disabled: var(--btn-brand-color-bg-default-disabled);
@btn-brand-color-bg-default-hover: var(--btn-brand-color-bg-default-hover);
@btn-brand-color-bg-default-active: var(--btn-brand-color-bg-default-active);
@btn-brand-color-border-default: var(--btn-brand-color-border-default);
@btn-brand-color-border-default-disabled: var(--btn-brand-color-border-default-disabled);
@btn-brand-color-border-default-hover: var(--btn-brand-color-border-default-hover);
@btn-brand-color-border-default-active: var(--btn-brand-color-border-default-active);

/***** Text *****/
@btn-text-color-text: var(--btn-text-color-text);
@btn-text-color-text-disabled: var(--btn-text-color-text-disabled);
@btn-text-color-text-hover: var(--btn-text-color-text-hover);
@btn-text-color-text-active: var(--btn-text-color-text-active);
@btn-text-color-bg: var(--btn-text-color-bg);
@btn-text-color-bg-disabled: var(--btn-text-color-bg-disabled);
@btn-text-color-bg-hover: var(--btn-text-color-bg-hover);
@btn-text-color-bg-active: var(--btn-text-color-bg-active);
@btn-text-color-border: var(--btn-text-color-border);
@btn-text-color-border-disabled: var(--btn-text-color-border-disabled);
@btn-text-color-border-hover: var(--btn-text-color-border-hover);
@btn-text-color-border-active: var(--btn-text-color-border-active);
@btn-dashed-border-style: var(--btn-dashed-border-style);

// warning
@btn-text-color-text-warning: var(--btn-text-color-text-warning);
@btn-text-color-text-warning-disabled: var(--btn-text-color-text-warning-disabled);
@btn-text-color-text-warning-hover: var(--btn-text-color-text-warning-hover);
@btn-text-color-text-warning-active: var(--btn-text-color-text-warning-active);
@btn-text-color-bg-warning: var(--btn-text-color-bg-warning);
@btn-text-color-bg-warning-disabled: var(--btn-text-color-bg-warning-disabled);
@btn-text-color-bg-warning-hover: var(--btn-text-color-bg-warning-hover);
@btn-text-color-bg-warning-active: var(--btn-text-color-bg-warning-active);
@btn-text-color-border-warning: var(--btn-text-color-border-warning);
@btn-text-color-border-warning-disabled: var(--btn-text-color-border-warning-disabled);
@btn-text-color-border-warning-hover: var(--btn-text-color-border-warning-hover);
@btn-text-color-border-warning-active: var(--btn-text-color-border-warning-active);
@btn-text-border-style: var(--btn-text-border-style);
// error
@btn-text-color-text-error: var(--btn-text-color-text-error);
@btn-text-color-text-error-disabled: var(--btn-text-color-text-error-disabled);
@btn-text-color-text-error-hover: var(--btn-text-color-text-error-hover);
@btn-text-color-text-error-active: var(--btn-text-color-text-error-active);
@btn-text-color-bg-error: var(--btn-text-color-bg-error);
@btn-text-color-bg-error-disabled: var(--btn-text-color-bg-error-disabled);
@btn-text-color-bg-error-hover: var(--btn-text-color-bg-error-hover);
@btn-text-color-bg-error-active: var(--btn-text-color-bg-error-active);
@btn-text-color-border-error: var(--btn-text-color-border-error);
@btn-text-color-border-error-disabled: var(--btn-text-color-border-error-disabled);
@btn-text-color-border-error-hover: var(--btn-text-color-border-error-hover);
@btn-text-color-border-error-active: var(--btn-text-color-border-error-active);
// success
@btn-text-color-text-success: var(--btn-text-color-text-success);
@btn-text-color-text-success-disabled: var(--btn-text-color-text-success-disabled);
@btn-text-color-text-success-hover: var(--btn-text-color-text-success-hover);
@btn-text-color-text-success-active: var(--btn-text-color-text-success-active);
@btn-text-color-bg-success: var(--btn-text-color-bg-success);
@btn-text-color-bg-success-disabled: var(--btn-text-color-bg-success-disabled);
@btn-text-color-bg-success-hover: var(--btn-text-color-bg-success-hover);
@btn-text-color-bg-success-active: var(--btn-text-color-bg-success-active);
@btn-text-color-border-success: var(--btn-text-color-border-success);
@btn-text-color-border-success-disabled: var(--btn-text-color-border-success-disabled);
@btn-text-color-border-success-hover: var(--btn-text-color-border-success-hover);
@btn-text-color-border-success-active: var(--btn-text-color-border-success-active);
// default
@btn-text-color-text-default: var(--btn-text-color-text-default);
@btn-text-color-text-default-disabled: var(--btn-text-color-text-default-disabled);
@btn-text-color-text-default-hover: var(--btn-text-color-text-default-hover);
@btn-text-color-text-default-active: var(--btn-text-color-text-default-active);
@btn-text-color-bg-default: var(--btn-text-color-bg-default);
@btn-text-color-bg-default-disabled: var(--btn-text-color-bg-default-disabled);
@btn-text-color-bg-default-hover: var(--btn-text-color-bg-default-hover);
@btn-text-color-bg-default-active: var(--btn-text-color-bg-default-active);
@btn-text-color-border-default: var(--btn-text-color-border-default);
@btn-text-color-border-default-disabled: var(--btn-text-color-border-default-disabled);
@btn-text-color-border-default-hover: var(--btn-text-color-border-default-hover);
@btn-text-color-border-default-active: var(--btn-text-color-border-default-active);

/***** focus-visible *****/
@btn-box-shadow-radius: 0.25em;
@btn-brand-color-box-shadow: var(--brand-color-3);
@btn-outline-color-box-shadow: var(--brand-color-3);
@btn-text-color-box-shadow: var(--brand-color-3);
@btn-color-box-shadow_warning: var(--warning-color-3);
@btn-color-box-shadow_danger: var(--danger-color-3);
@btn-color-box-shadow_success: var(--success-color-3);
@btn-color-box-shadow_error: var(--error-color-3);
@btn-color-box-shadow_default: var(--gray-color-2);