// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
//      OVERLAY
//      used by modals and dialogs... and more things in the future
// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
$component-overlay-background-color: rgba($theme-black, 0.8) !default;

// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
//      DISABLED CURSOR
// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
$component-cursor-disabled: not-allowed !default; //is this helpful?

// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
//      COMPONENT BACKGROUNDS
// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
$component-body-background-color: $theme-base !default;
$component-body-background-color-secondary: $theme-primary-4 !default;
$component-body-background-color-em: theme-primary !default;

$component-border-color: $theme-text-tertiary !default;
$component-border-color-inverse: $theme-white !default;
$component-border-color-secondary: $theme-accent !default;
$component-border-color-disabled: $theme-primary !default;

$component-body-text-color: $theme-text-primary !default;
$component-body-text-color-secondary: $theme-text-secondary !default;
$component-body-text-color-inverse: $theme-text-inverse !default;
$component-body-text-color-disabled: $theme-base-4 !default;

$component-blockquote-text-color: $component-body-text-color !default;
$component-blockquote-font-weight: 600 !default;
$component-blockquote-border-color: $component-border-color-secondary !default;

$component-link-color: $theme-primary !default;
$component-link-color-hover: $theme-primary-2 !default;
$component-link-color-focus: $theme-primary !default;
$component-link-color-active: $theme-primary-3 !default;
$component-link-color-visited: $theme-primary !default;

$component-link-color-inverse: $theme-text-inverse !default;
$component-link-color-inverse-hover: $theme-text-inverse !default;
$component-link-color-inverse-focus: $theme-text-inverse !default;
$component-link-color-inverse-active: $theme-text-inverse !default;
$component-link-color-inverse-visited: $theme-text-inverse !default;

$component-table-header-background-color: $theme-primary !default;
$component-table-row-background-color-odd: $theme-base !default;
$component-table-row-background-color-even: $theme-base-2 !default;
$component-table-border-color: $theme-base-3 !default;
$component-table-body-text-color: $theme-text-primary !default;
$component-table-header-text-color: $theme-text-inverse !default;

// >>>>>>>>> Default Text Style Property Set
$component-body-style-default: $text-style-content-1 !default;

// >>>>>>>>> Highlighted Text
$component-highlighted-text-background-color: $theme-accent-2 !default;
$component-highlighted-text-color: $theme-text-tertiary !default;

// >>>>>>>>> Monospace Text
$component-body-text-monospace: $font-family-monospace !default;
$component-body-text-color-monospace: $theme-text-monospace !default;

// VARIABLES FOR SIZING COMPONENTS AND COMPONENT PARTS

// Borders
$component-border-radius: 4px !default;
$component-border-radius-small: 3px !default;
$component-border-radius-large: 5px !default;

$component-border-width: 1px !default;

$list-style-type: square !default;

//// FORMS ////////////////////////////////////////////////////////////////////////////////////////////////
$component-form-background-color: transparent !default;
$component-form-padding: 0 !default;

$component-input-border-color: $theme-base-3 !default;
$component-input-border-color-disabled: $theme-base-3 !default;
$component-input-border-color-invalid: $theme-feedback-negative-5 !default;
$component-input-border-color-valid: $theme-feedback-positive-3 !default;

$component-input-border-width: 2px !default;

$component-input-background-color: $theme-base !default;
$component-input-background-color-checked: $theme-feedback-3 !default;
$component-input-background-color-disabled: transparent !default;
$component-input-background-color-invalid: rgba(
    $theme-feedback-negative-3,
    0.15
) !default;
$component-input-background-color-valid: rgba(
    $theme-feedback-positive-3,
    0.15
) !default;

$component-input-box-shadow-color: rgba($theme-black, 0.4) !default;

$component-dropdown-height: 45px !default;
$component-input-height: 25px !default;
$component-input-width: 25px !default;