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

// =============================================================================
//      NEUTRAL BUTTONS
// =============================================================================
// Backgrounds
$component-button-background-color: $theme-action !default;
$component-button-background-color-visited: $theme-action !default;
$component-button-background-color-hover: $theme-action-2 !default;
$component-button-background-color-active: $theme-action-3 !default;
$component-button-background-color-focus: $theme-action !default;
$component-button-background-color-disabled: $theme-action-disabled !default;

// Text
$component-button-text-color: $theme-text-tertiary !default;
$component-button-text-color-visited: $theme-text-tertiary !default;
$component-button-text-color-hover: $theme-text-tertiary !default;
$component-button-text-color-active: $theme-text-tertiary !default;
$component-button-text-color-focus: $theme-text-tertiary !default;
$component-button-text-color-disabled: $component-body-text-color-disabled !default;

// Borders
$component-button-border: $component-border-width solid
    $component-button-border-color !default;
$component-button-border-visited: $component-border-width solid
    $component-button-border-color !default;
$component-button-border-hover: $component-border-width solid
    $component-button-border-color !default;
$component-button-border-active: $component-border-width solid
    $component-button-border-color !default;
$component-button-border-focus: $component-border-width solid
    $component-button-border-color !default;
$component-button-border-disabled: transparent !default;

// =============================================================================
//      PRIMARY BUTTONS
// =============================================================================
// Backgrounds
$component-button-primary-background-color: $theme-action-primary !default;
$component-button-primary-background-color-visited: $theme-action-primary !default;
$component-button-primary-background-color-hover: $theme-action-primary-2 !default;
$component-button-primary-background-color-active: $theme-action-primary-3 !default;
$component-button-primary-background-color-focus: $theme-action-primary !default;
$component-button-primary-background-color-disabled: $theme-action-disabled !default;

// Text
$component-button-primary-text-color: $theme-text-inverse !default;
$component-button-primary-text-color-visited: $theme-text-inverse !default;
$component-button-primary-text-color-hover: $theme-text-inverse !default;
$component-button-primary-text-color-active: $theme-text-inverse !default;
$component-button-primary-text-color-focus: $theme-text-inverse !default;
$component-button-primary-text-color-disabled: $component-body-text-color-disabled !default;

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

// =============================================================================
//      POSITIVE BUTTONS
// =============================================================================
// Backgrounds
$component-button-positive-background-color: $theme-action-positive !default;
$component-button-positive-background-color-visited: $theme-action-positive !default;
$component-button-positive-background-color-hover: $theme-action-positive-2 !default;
$component-button-positive-background-color-active: $theme-action-positive-3 !default;
$component-button-positive-background-color-focus: $theme-action-positive !default;
$component-button-positive-background-color-disabled: $theme-action-disabled !default;

// Text
$component-button-positive-text-color: $theme-text-inverse !default;
$component-button-positive-text-color-visited: $theme-text-inverse !default;
$component-button-positive-text-color-hover: $theme-text-inverse !default;
$component-button-positive-text-color-active: $theme-text-inverse !default;
$component-button-positive-text-color-focus: $theme-text-inverse !default;
$component-button-positive-text-color-disabled: $component-body-text-color-disabled !default;

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

// =============================================================================
//      NEGATIVE BUTTONS
// =============================================================================
// Backgrounds
$component-button-negative-background-color: $theme-action-negative !default;
$component-button-negative-background-color-visited: $theme-action-negative !default;
$component-button-negative-background-color-hover: $theme-action-negative-2 !default;
$component-button-negative-background-color-active: $theme-action-negative-3 !default;
$component-button-negative-background-color-focus: $theme-action-negative !default;
$component-button-negative-background-color-disabled: $theme-action-disabled !default;

// Text
$component-button-negative-text-color: $theme-text-inverse !default;
$component-button-negative-text-color-visited: $theme-text-inverse !default;
$component-button-negative-text-color-hover: $theme-text-inverse !default;
$component-button-negative-text-color-active: $theme-text-inverse !default;
$component-button-negative-text-color-focus: $theme-text-inverse !default;
$component-button-negative-text-color-disabled: $component-body-text-color-disabled !default;

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

//=============================================================================
//    GHOST BUTTONS
//=============================================================================
// Backgrounds
$component-button-ghost-background-color: rgba($theme-primary, 0.05) !default;
$component-button-ghost-background-color-visited: rgba(
    $theme-primary,
    0.05
) !default;
$component-button-ghost-background-color-hover: $theme-base !default;
$component-button-ghost-background-color-active: $theme-base-2 !default;
$component-button-ghost-background-color-focus: $theme-base !default;
$component-button-ghost-background-color-disabled: $theme-action-disabled !default;

// Text
$component-button-ghost-text-color: $theme-text-inverse !default;
$component-button-ghost-text-color-visited: $theme-text-inverse !default;
$component-button-ghost-text-color-hover: $theme-primary !default;
$component-button-ghost-text-color-active: $theme-primary !default;
$component-button-ghost-text-color-focus: $theme-primary !default;
$component-button-ghost-text-color-disabled: $component-body-text-color-disabled !default;

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

// =============================================================================
//      INVERSE GHOST BUTTONS
// =============================================================================
// Backgrounds
$component-button-ghost-inverse-background-color: rgba(
    $theme-action-primary,
    0.05
) !default;
$component-button-ghost-inverse-background-color-visited: rgba(
    $theme-action-primary,
    0.05
) !default;
$component-button-ghost-inverse-background-color-hover: $theme-base !default;
$component-button-ghost-inverse-background-color-active: $theme-base-2 !default;
$component-button-ghost-inverse-background-color-focus: $theme-base !default;
$component-button-ghost-inverse-background-color-disabled: $theme-action-disabled !default;

// Text
$component-button-ghost-inverse-text-color: $theme-text-inverse !default;
$component-button-ghost-inverse-text-color-visited: $theme-text-inverse !default;
$component-button-ghost-inverse-text-color-hover: $theme-action-primary !default;
$component-button-ghost-inverse-text-color-active: $theme-action-primary !default;
$component-button-ghost-inverse-text-color-focus: $theme-action-primary !default;
$component-button-ghost-inverse-text-color-disabled: $component-body-text-color-disabled !default;

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