// --------------
//  Theme Colors
// --------------

$primary-color: hsl(162, 100%, 36%) !default;
$primary-color-dark: lighten($primary-color, 4%) !default;
$primary-text-color: textForBg($primary-color) !default;
$primary-text-color-dark: $text-dark !default;
$primary-hovered-color: darken($primary-color, 3%) !default;
$primary-hovered-color-dark: darken($primary-color-dark, 3%) !default;
$primary-color-light: transparentize($primary-color, 0.7) !default;
$primary-color-light-dark: transparentize($primary-color-dark, 0.7) !default;

$success-color: #70c51c !default;
$success-color-dark: lighten($success-color, 0%) !default;
$success-text-color: textForBg($success-color) !default;
$success-text-color-dark: $text-dark !default;
$success-hovered-color: darken($success-color, 3%) !default;
$success-hovered-color-dark: darken($success-color-dark, 3%) !default;
$success-color-light: transparentize($success-color, 0.7) !default;
$success-color-light-dark: transparentize($success-color-dark, 0.7) !default;

$warning-color: hsl(45, 100%, 51%) !default;
$warning-color-dark: lighten($warning-color, 4%) !default;
$warning-text-color: textForBg($warning-color) !default;
$warning-text-color-dark: $text-dark !default;
$warning-hovered-color: darken($warning-color, 3%) !default;
$warning-hovered-color-dark: darken($warning-color-dark, 8%) !default;
$warning-color-light: transparentize($warning-color, 0.7) !default;
$warning-color-light-dark: transparentize($warning-color-dark, 0.7) !default;

$error-color: #FF6348 !default;
$error-color-dark: lighten($error-color, 6%) !default;
$error-text-color: textForBg($error-color) !default;
$error-text-color-dark: $text-dark !default;
$error-hovered-color: darken($error-color, 6%) !default;
$error-hovered-color-dark: darken($error-color-dark, 5%) !default;
$error-color-light: transparentize($error-color, 0.7) !default;
$error-color-light-dark: transparentize($error-color-dark, 0.7) !default;

$link-color: hsl(210, 100%, 50%) !default;
$link-color-dark: lighten($link-color, 18%) !default;
$link-text-color: textForBg($link-color) !default;
$link-text-color-dark: $text-dark !default;
$link-hovered-color: darken($link-color, 4%) !default;
$link-hovered-color-dark: darken($link-color-dark, 5%) !default;
$link-color-light: transparentize($link-color, 0.7) !default;
$link-color-light-dark: transparentize($link-color-dark, 0.7) !default;

// Base
$text-color-primary: hsl(0, 0%, 25%) !default;
$text-color-primary-dark: hsl(0, 0%, 100%) !default;
$text-color-secondary: hsl(0, 0%, 35%) !default;
$text-color-secondary-dark: hsl(0, 0%, 85%) !default;
$text-color-tertiary: hsl(0, 0%, 45%) !default;
$text-color-tertiary-dark: hsl(0, 0%, 75%) !default;
$body-bg-color: hsl(0, 0%, 100%) !default;
$body-bg-color-dark: hsl(0, 0%, 13%) !default;
$body-text-color: $text-color-secondary !default;
$body-text-color-dark: $text-color-secondary-dark !default;
$blockquote-line-color: hsl(0, 0%, 85%) !default;
$blockquote-line-color-dark: hsl(0, 0%, 35%) !default;
$divider-color: hsl(0, 0%, 90%) !default;
$divider-color-dark: hsl(0, 0%, 30%) !default;
$dimmer-bg-color: hsla(0, 0%, 0%, 0.6) !default;
$dimmer-bg-color-dark: $dimmer-bg-color !default;
$light-color: rgba(144, 144, 144, 0.1) !default;
$light-color-dark: rgba(144, 144, 144, 0.1) !default;
$text-color-inverted: #FFFFFF !default;
$text-color-inverted-dark: #484848 !default;
$bg-color-inverted: hsl(0, 0%, 13%) !default;
$bg-color-inverted-dark: whitesmoke !default;
// Item Disabled
$item-disabled-bg-color: hsl(0, 0%, 93%) !default;
$item-disabled-bg-color-dark: hsl(0, 0%, 20%) !default;
$item-disabled-fg-color: hsl(0, 0%, 82%) !default;
$item-disabled-fg-color-dark: hsl(0, 0%, 30%) !default;

// --------------
//    Elements
// --------------

// Avatar
$avatar-bg-color: hsl(0, 0%, 92%) !default;
$avatar-bg-color-dark: hsl(0, 0%, 22%) !default;
$avatar-text-color: #FFF !default;
$avatar-text-color-dark: #FFF !default;

// Button
$button-bg-color: hsl(0, 0%, 100%) !default;
$button-bg-color-dark: hsl(0, 0%, 15%) !default;
$button-border-color: hsl(0, 0%, 90%) !default;
$button-border-color-dark: hsl(0, 0%, 28%) !default;
$button-hovered-border-color: hsl(0, 0%, 84%) !default;
$button-hovered-border-color-dark: hsl(0, 0%, 35%) !default;
$button-text-color: hsl(0, 0%, 40%) !default;
$button-text-color-dark: hsl(0, 0%, 85%) !default;
$button-border-spread-color: hsla(291, 64%, 42%, 0.14) !default;
$button-border-spread-color-dark: hsla(291, 47%, 51%, 0.45) !default;
$button-shadow-color: hsla(0, 0%, 84%, 0.87) !default;
$button-shadow-color-dark: hsla(0, 0%, 30%, 0.87) !default;

// Chip
$chip-bg-color: hsl(0, 0%, 97%) !default;
$chip-bg-color-dark: hsl(0, 0%, 17%) !default;

// Note Block
$note-block-bg-color: $light-color !default;
$note-block-bg-color-dark: $light-color-dark !default;
$note-block-line-color: $primary-color !default;
$note-block-line-color-dark: $primary-color-dark !default;

// Table
$table-border-color: hsl(0, 0%, 90%) !default;
$table-border-color-dark: hsl(0, 0%, 25%) !default;
$table-bg-color: hsl(0, 0%, 97%) !default;
$table-bg-color-dark: hsl(0, 0%, 17%) !default;
$table-hovered-bg-color: $table-border-color !default;
$table-hovered-bg-color-dark: $table-border-color-dark !default;
$table-header-bg-color: $body-bg-color !default;
$table-header-bg-color-dark: $body-bg-color-dark !default;
$table-header-text-color: $body-text-color !default;
$table-header-text-color-dark: $body-text-color-dark !default;
$table-footer-bg-color: $body-bg-color !default;
$table-footer-bg-color-dark: $body-bg-color-dark !default;
$table-footer-text-color: $body-text-color !default;
$table-footer-text-color-dark: $body-text-color-dark !default;

// Tooltip
$tooltip-bg-color: #FFF !default;
$tooltip-bg-color-dark: hsl(0, 0%, 26%) !default;
$tooltip-text-color: $text-color-secondary !default;
$tooltip-text-color-dark: $text-color-secondary-dark !default;

// --------------
//     Form
// --------------

// Checkbox
$checkbox-border-color: hsl(0, 0%, 70%) !default;
$checkbox-border-color-dark: hsl(0, 0%, 50%) !default;
$checkbox-checked-border-color: $primary-color !default;
$checkbox-checked-border-color-dark: $primary-color-dark !default;
$checkbox-checkmark-color: $primary-text-color !default;
$checkbox-checkmark-color-dark: $primary-text-color-dark !default;
$checkbox-border-spread-color: $primary-color-light !default;
$checkbox-border-spread-color-dark: $primary-color-light-dark !default;

// Input
$input-bg-color: hsl(0, 0%, 97%) !default;
$input-bg-color-dark: hsl(0, 0%, 10%) !default;
$input-hovered-bg-color: hsl(0, 0%, 93%) !default;
$input-hovered-bg-color-dark: hsl(0, 0%, 7%) !default;
$input-text-color: hsl(0, 0%, 35%) !default;
$input-text-color-dark: hsl(0, 0%, 85%) !default;
$input-border-spread-color: hsl(187, 100%, 70%) !default;
$input-border-spread-color-dark: hsl(187, 100%, 42%) !default;
$input-placeholder-text-color: hsl(0, 0%, 46%) !default;
$input-placeholder-text-color-dark: hsl(0, 0%, 46%) !default;
// Input Append
$input-append-bg-color: hsl(0, 0%, 88%) !default;
$input-append-bg-color-dark: hsl(0, 0%, 25%) !default;
$input-append-fg-color: hsl(0, 0%, 50%) !default;
$input-append-fg-color-dark: hsl(0, 0%, 70%) !default;

// Radio
$radio-border-color: hsl(0, 0%, 70%) !default;
$radio-border-color-dark: hsl(0, 0%, 50%) !default;
$radio-selected-color: $primary-color !default;
$radio-selected-color-dark: $radio-selected-color !default;
$radio-border-spread-color: $primary-color-light !default;
$radio-border-spread-color-dark: $primary-color-light-dark !default;

// Slider/Range
$range-bg-color: hsl(0, 0%, 93%) !default;
$range-bg-color-dark: hsl(0, 0%, 18%) !default;

// Switch
$switch-fg-color: hsl(0, 0%, 85%) !default;
$switch-fg-color-dark: hsl(0, 0%, 70%) !default;
$switch-active-fg-color: #FFF !default;
$switch-active-fg-color-dark: $switch-active-fg-color !default;
$switch-bg-color: hsl(0, 0%, 100%) !default;
$switch-bg-color-dark: hsl(0, 0%, 20%) !default;
$switch-active-bg-color: $primary-color !default;
$switch-active-bg-color-dark: $switch-active-bg-color !default;
$switch-border-color: hsl(0, 0%, 90%) !default;
$switch-border-color-dark: hsl(0, 0%, 30%) !default;
$switch-active-border-color: transparentize($switch-active-bg-color, 0.6) !default;
$switch-active-border-color-dark: $switch-active-border-color !default;
$switch-border-spread-color: transparentize($switch-active-bg-color, 0.3) !default;
$switch-border-spread-color-dark: $switch-border-spread-color !default;

// Select
$select-bg-color: $input-bg-color !default;
$select-bg-color-dark: $input-bg-color-dark !default;
$select-hovered-bg-color: $input-hovered-bg-color !default;
$select-hovered-bg-color-dark: $input-hovered-bg-color-dark !default;
$select-text-color: $input-text-color !default;
$select-text-color-dark: $input-text-color-dark !default;
$select-border-spread-color: $input-border-spread-color !default;
$select-border-spread-color-dark: $input-border-spread-color-dark !default;

// Textarea
$textarea-bg-color: $input-bg-color !default;
$textarea-bg-color-dark: $input-bg-color-dark !default;
$textarea-hovered-bg-color: $input-hovered-bg-color !default;
$textarea-hovered-bg-color-dark: $input-hovered-bg-color-dark !default;
$textarea-text-color: $input-text-color !default;
$textarea-text-color-dark: $input-text-color-dark !default;
$textarea-border-spread-color: $input-border-spread-color !default;
$textarea-border-spread-color-dark: $input-border-spread-color-dark !default;

// --------------
//   Components
// --------------

// Badge
$badge-only-part-bg-color: $primary-color !default;
$badge-only-part-bg-color-dark: $primary-color-dark !default;
$badge-only-part-text-color: $primary-text-color !default;
$badge-only-part-text-color-dark: $primary-text-color-dark !default;
$badge-first-part-bg-color: rgba(144, 144, 144, 0.1) !default;
$badge-first-part-bg-color-dark: $badge-first-part-bg-color !default;
$badge-first-part-text-color: $text-color-primary !default;
$badge-first-part-text-color-dark: $text-color-primary-dark !default;
$badge-last-part-bg-color: $badge-only-part-bg-color !default;
$badge-last-part-bg-color-dark: $badge-only-part-bg-color-dark !default;
$badge-last-part-text-color: $badge-only-part-text-color !default;
$badge-last-part-text-color-dark: $badge-only-part-text-color-dark !default;

// Breadcrumb
$breadcrumb-separator-color: hsl(0, 0%, 75%) !default;
$breadcrumb-separator-color-dark: hsl(0, 0%, 55%) !default;
$breadcrumb-item-color: $link-color !default;
$breadcrumb-item-color-dark: $link-color-dark !default;
$breadcrumb-item-hovered-color: $link-hovered-color !default;
$breadcrumb-item-hovered-color-dark: $link-hovered-color-dark !default;
$breadcrumb-item-active-color: $text-color-secondary !default;
$breadcrumb-item-active-color-dark: $text-color-secondary-dark !default;

// Cards
$card-bg-color: hsl(0, 0%, 100%) !default;
$card-bg-color-dark: hsl(0, 0%, 17%) !default;
$card-border-color: hsl(0, 0%, 88%) !default;
$card-border-color-dark: hsl(0, 0%, 42%) !default;

// Dialog
$modal-bg-color: hsl(0, 0%, 100%) !default;
$modal-bg-color-dark: hsl(0, 0%, 26%) !default;

// Dropdown
$dropdown-bg-color: hsl(0, 0%, 100%) !default;
$dropdown-bg-color-dark: hsl(0, 0%, 17%) !default;
$dropdown-border-color: hsl(0, 0%, 88%) !default;
$dropdown-border-color-dark: hsl(0, 0%, 42%) !default;
$dropdown-text-color: hsl(0, 0%, 26%) !default;
$dropdown-text-color-dark: hsl(0, 0%, 88%) !default;
$dropdown-option-hovered-color: hsl(0, 0%, 93%) !default;
$dropdown-option-hovered-color-dark: hsl(0, 0%, 28%) !default;
$dropdown-active-item-bg-color: $primary-color !default;
$dropdown-active-item-bg-color-dark: $primary-color-dark !default;
$dropdown-active-item-text-color: $primary-text-color !default;
$dropdown-active-item-text-color-dark: $primary-text-color-dark !default;

// Navbar
$navbar-bg-color: #FFF !default;
$navbar-bg-color-dark: hsl(0, 0%, 16%) !default;
$navbar-shadow-color: hsla(0, 0%, 0%, 0.05) !default;
$navbar-shadow-color-dark: hsla(0, 0%, 0%, 0.12) !default;
$navbar-item-hovered-color: $primary-color !default;
$navbar-item-hovered-color-dark: $primary-color-dark !default;
$navbar-selected-item-color: $primary-color !default;
$navbar-selected-item-color-dark: $primary-color-dark !default;
$navbar-selected-item-bg-color: $primary-color !default;
$navbar-selected-item-bg-color-dark: $primary-color-dark !default;
$navbar-selected-item-text-color: $primary-text-color !default;
$navbar-selected-item-text-color-dark: $primary-text-color-dark !default;

// Pagination
$pagination-item-bg-color: $button-bg-color !default;
$pagination-item-bg-color-dark: $button-bg-color-dark !default;
$pagination-item-text-color: $button-text-color !default;
$pagination-item-text-color-dark: $button-text-color-dark !default;
$pagination-item-border-color: $button-border-color !default;
$pagination-item-border-color-dark: $button-border-color-dark !default;
$pagination-item-hovered-border-color: $button-hovered-border-color !default;
$pagination-item-hovered-border-color-dark: $button-hovered-border-color-dark !default;
$pagination-item-active-bg-color: $primary-color !default;
$pagination-item-active-bg-color-dark: $primary-color-dark !default;
$pagination-item-active-text-color: $primary-text-color !default;
$pagination-item-active-text-color-dark: $primary-text-color-dark !default;
$pagination-item-active-border-color: $transparent !default;
$pagination-item-active-border-color-dark: $transparent !default;

// Placeholder
$placeholder-color: transparentize($body-bg-color, 0.5) !default;
$placeholder-color-dark: transparentize($body-bg-color-dark, 0.5) !default;
$placeholder-holder-color: rgba(144, 144, 144, 0.2) !default;
$placeholder-holder-color-dark: rgba(144, 144, 144, 0.2) !default;

// Progress Bar
$progress-back-bg-color: hsl(0, 0%, 93%) !default;
$progress-back-bg-color-dark: hsl(0, 0%, 18%) !default;
$progress-back-text-color: $text-color-secondary !default;
$progress-back-text-color-dark: $text-color-secondary-dark !default;
$progress-bar-bg-color: $primary-color !default;
$progress-bar-bg-color-dark: $primary-color-dark !default;
$progress-bar-text-color: $primary-text-color !default;
$progress-bar-text-color-dark: $primary-text-color-dark !default;
$progress-bar-stripe-color: rgba(255, 255, 255, 0.15) !default;
$progress-bar-stripe-color-dark: rgba(0, 0, 0, 0.08) !default;

// Tabs
$tab-border-color: rgba(144, 144, 144, 0.2) !default;
$tab-border-color-dark: $tab-border-color !default;
$tab-selected-item-color: $primary-color !default;
$tab-selected-item-color-dark: $primary-color-dark !default;
$tab-selected-item-text-color: $primary-text-color !default;
$tab-selected-item-text-color-dark: $primary-text-color-dark !default;