$component-button-border-radius: 4px !default;
$component-button-border-color: transparent !default;

// =============================================================================
//      NEUTRAL BUTTONS
// =============================================================================
// Backgrounds
$component-button-background-color: #999 !default;
$component-button-background-color-visited: #888 !default;
$component-button-background-color-hover: #888 !default;
$component-button-background-color-active: #888 !default;
$component-button-background-color-focus: #888 !default;
$component-button-background-color-disabled: #ddd !default;

// Text
$component-button-text-color: #fff !default;
$component-button-text-color-visited: #fff !default;
$component-button-text-color-hover: #fff !default;
$component-button-text-color-active: #fff !default;
$component-button-text-color-focus: #fff !default;
$component-button-text-color-disabled: #666 !default;

// Border
$component-button-border: 1px solid transparent !default;
$component-button-border-visited: 1px solid transparent !default;
$component-button-border-hover: 1px solid transparent !default;
$component-button-border-active: 1px solid transparent !default;
$component-button-border-focus: 1px solid transparent !default;
$component-button-border-disabled: transparent !default;

// =============================================================================
//      PRIMARY BUTTONS
// =============================================================================
// Backgrounds
$component-button-primary-background-color: #555 !default;
$component-button-primary-background-color-visited: #444 !default;
$component-button-primary-background-color-hover: #444 !default;
$component-button-primary-background-color-active: #444 !default;
$component-button-primary-background-color-focus: #444 !default;
$component-button-primary-background-color-disabled: #ddd !default;

// Text
$component-button-primary-text-color: #fff !default;
$component-button-primary-text-color-visited: #fff !default;
$component-button-primary-text-color-hover: #fff !default;
$component-button-primary-text-color-active: #fff !default;
$component-button-primary-text-color-focus: #fff !default;
$component-button-primary-text-color-disabled: #666 !default;

// Borders
$component-button-primary-border: 1px solid transparent !default;
$component-button-primary-border-visited: 1px solid transparent !default;
$component-button-primary-border-hover: 1px solid transparent !default;
$component-button-primary-border-active: 1px solid transparent !default;
$component-button-primary-border-focus: 1px solid transparent !default;
$component-button-primary-border-disabled: transparent !default;

// =============================================================================
//      POSITIVE BUTTONS
// =============================================================================
// Backgrounds
$component-button-positive-background-color: #61a044 !default;
$component-button-positive-background-color-visited: #61a044 !default;
$component-button-positive-background-color-hover: #4a8a2c !default;
$component-button-positive-background-color-active: #3b781e !default;
$component-button-positive-background-color-focus: #61a044 !default;
$component-button-positive-background-color-disabled: #ddd !default;

// Text
$component-button-positive-text-color: #fff !default;
$component-button-positive-text-color-visited: #fff !default;
$component-button-positive-text-color-hover: #fff !default;
$component-button-positive-text-color-active: #fff !default;
$component-button-positive-text-color-focus: #fff !default;
$component-button-positive-text-color-disabled: #666 !default;

// Borders
$component-button-positive-border: 1px solid transparent !default;
$component-button-positive-border-visited: 1px solid transparent !default;
$component-button-positive-border-hover: 1px solid transparent !default;
$component-button-positive-border-active: 1px solid transparent !default;
$component-button-positive-border-focus: 1px solid transparent !default;
$component-button-positive-border-disabled: transparent !default;

// =============================================================================
//      NEGATIVE BUTTONS
// =============================================================================
// Backgrounds
$component-button-negative-background-color: #e75656 !default;
$component-button-negative-background-color-visited: #e75656 !default;
$component-button-negative-background-color-hover: #cd3e3e !default;
$component-button-negative-background-color-active: #b33535 !default;
$component-button-negative-background-color-focus: #e75656 !default;
$component-button-negative-background-color-disabled: #ddd !default;

// Text
$component-button-negative-text-color: #fff !default;
$component-button-negative-text-color-visited: #fff !default;
$component-button-negative-text-color-hover: #fff !default;
$component-button-negative-text-color-active: #fff !default;
$component-button-negative-text-color-focus: #fff !default;
$component-button-negative-text-color-disabled: #666 !default;

// Borders
$component-button-negative-border: 1px solid transparent !default;
$component-button-negative-border-visited: 1px solid transparent !default;
$component-button-negative-border-hover: 1px solid transparent !default;
$component-button-negative-border-active: 1px solid transparent !default;
$component-button-negative-border-focus: 1px solid transparent !default;
$component-button-negative-border-disabled: transparent !default;

// =============================================================================
//      GHOST BUTTONS
// =============================================================================
// Backgrounds
$component-button-ghost-background-color: transparent !default;
$component-button-ghost-background-color-visited: rgba(225, 225, 225, 1) !default;
$component-button-ghost-background-color-hover: rgba(255, 255, 255, 1) !default;
$component-button-ghost-background-color-active: rgba(255, 255, 255, 0.9) !default;
$component-button-ghost-background-color-focus: rgba(225, 225, 225, 1) !default;
$component-button-ghost-background-color-disabled: #ddd !default;

// Text
$component-button-ghost-text-color: #fff !default;
$component-button-ghost-text-color-visited: #333 !default;
$component-button-ghost-text-color-hover: #333 !default;
$component-button-ghost-text-color-active: #000 !default;
$component-button-ghost-text-color-focus: #333 !default;
$component-button-ghost-text-color-disabled: #666 !default;

// Borders
$component-button-ghost-border: 2px solid #fff !default;
$component-button-ghost-border-visited: 2px solid transparent !default;
$component-button-ghost-border-hover: 2px solid transparent !default;
$component-button-ghost-border-active: 2px solid transparent !default;
$component-button-ghost-border-focus: 2px solid transparent !default;
$component-button-ghost-border-disabled: transparent !default;

// =============================================================================
//      INVERSE GHOST BUTTONS
// =============================================================================
// Backgrounds
$component-button-ghost-inverse-background-color: transparent !default;
$component-button-ghost-inverse-background-color-visited: rgba(0, 0, 0, 0.7) !default;
$component-button-ghost-inverse-background-color-hover: rgba(0, 0, 0, 0.7) !default;
$component-button-ghost-inverse-background-color-active: #000 !default;
$component-button-ghost-inverse-background-color-focus: rgba(0, 0, 0, 0.3) !default;
$component-button-ghost-inverse-background-color-disabled: #ddd !default;

// Text
$component-button-ghost-inverse-text-color: #000 !default;
$component-button-ghost-inverse-text-color-visited: #fff !default;
$component-button-ghost-inverse-text-color-hover: #fff !default;
$component-button-ghost-inverse-text-color-active: #fff !default;
$component-button-ghost-inverse-text-color-focus: #fff !default;
$component-button-ghost-inverse-text-color-disabled: #666 !default;

// Borders
$component-button-ghost-inverse-border: 2px solid #000 !default;
$component-button-ghost-inverse-border-visited: 2px solid transparent !default;
$component-button-ghost-inverse-border-hover: 2px solid transparent !default;
$component-button-ghost-inverse-border-active: 2px solid transparent !default;
$component-button-ghost-inverse-border-focus: 2px solid transparent !default;
$component-button-ghost-inverse-border-disabled: transparent !default;