$just-base-theme: false !default;
$main-selector: ':root, [#{$prefix}theme="light"]';

@if $just-base-theme {
  $main-selector: '[#{$prefix}theme="light"]';
}

#{$main-selector} {

  // --------------
  //  Theme Colors
  // --------------
  --primary-color: #{$primary-color};
  --primary-text-color: #{$primary-text-color};
  --primary-hovered-color: #{$primary-hovered-color};
  --primary-color-light: #{$primary-color-light};
  --success-color: #{$success-color};
  --success-text-color: #{$success-text-color};
  --success-hovered-color: #{$success-hovered-color};
  --success-color-light: #{$success-color-light};
  --warning-color: #{$warning-color};
  --warning-text-color: #{$warning-text-color};
  --warning-hovered-color: #{$warning-hovered-color};
  --warning-color-light: #{$warning-color-light};
  --error-color: #{$error-color};
  --error-text-color: #{$error-text-color};
  --error-hovered-color: #{$error-hovered-color};
  --error-color-light: #{$error-color-light};
  --link-color: #{$link-color};
  --link-text-color: #{$link-text-color};
  --link-hovered-color: #{$link-hovered-color};
  --link-color-light: #{$link-color-light};

  // Base
  --body-bg-color: #{$body-bg-color};
  --body-text-color: #{$body-text-color};
  --text-color-primary: #{$text-color-primary};
  --text-color-secondary: #{$text-color-secondary};
  --text-color-tertiary: #{$text-color-tertiary};
  --blockquote-line-color: #{$blockquote-line-color};
  --divider-color: #{$divider-color};
  --dimmer-bg-color: #{$dimmer-bg-color};
  --light-color: #{$light-color};
  --text-color-inverted: #{$text-color-inverted};
  --bg-color-inverted: #{$bg-color-inverted};
  // Item Disabled
  --item-disabled-bg-color: #{$item-disabled-bg-color};
  --item-disabled-fg-color: #{$item-disabled-fg-color};

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

  // Avatar
  --avatar-bg-color: #{$avatar-bg-color};
  --avatar-text-color: #{$avatar-text-color};

  // Button
  --button-bg-color: #{$button-bg-color};
  --button-border-color: #{$button-border-color};
  --button-hovered-border-color: #{$button-hovered-border-color};
  --button-text-color: #{$button-text-color};
  --button-border-spread-color: #{$button-border-spread-color};
  --button-shadow-color: #{$button-shadow-color};

  // Chip
  --chip-bg-color: #{$chip-bg-color};

  // Note Block
  --note-block-bg-color: #{$note-block-bg-color};
  --note-block-line-color: #{$note-block-line-color};

  // Table
  --table-border-color: #{$table-border-color};
  --table-bg-color: #{$table-bg-color};
  --table-hovered-bg-color: #{$table-hovered-bg-color};
  --table-header-bg-color: #{$table-header-bg-color};
  --table-header-text-color: #{$table-header-text-color};
  --table-footer-bg-color: #{$table-footer-bg-color};
  --table-footer-text-color: #{$table-footer-text-color};

  // Tooltip
  --tooltip-bg-color: #{$tooltip-bg-color};
  --tooltip-text-color: #{$tooltip-text-color};

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

  // Checkbox
  --checkbox-border-color: #{$checkbox-border-color};
  --checkbox-checked-border-color: #{$checkbox-checked-border-color};
  --checkbox-checkmark-color: #{$checkbox-checkmark-color};
  --checkbox-border-spread-color: #{$checkbox-border-spread-color};

  // Input
  --input-bg-color: #{$input-bg-color};
  --input-hovered-bg-color: #{$input-hovered-bg-color};
  --input-text-color: #{$input-text-color};
  --input-border-spread-color: #{$input-border-spread-color};
  --input-placeholder-text-color: #{$input-placeholder-text-color};
  // Input Append
  --input-append-bg-color: #{$input-append-bg-color};
  --input-append-fg-color: #{$input-append-fg-color};

  // Radio
  --radio-border-color: #{$radio-border-color};
  --radio-selected-color: #{$radio-selected-color};
  --radio-border-spread-color: #{$radio-border-spread-color};

  // Slider/Range
  --range-bg-color: #{$range-bg-color};

  // Switch
  --switch-bg-color: #{$switch-bg-color};
  --switch-active-bg-color: #{$switch-active-bg-color};
  --switch-fg-color: #{$switch-fg-color};
  --switch-active-fg-color: #{$switch-active-fg-color};
  --switch-border-color: #{$switch-border-color};
  --switch-active-border-color: #{$switch-active-border-color};
  --switch-border-spread-color: #{$switch-border-spread-color};

  // Select
  --select-bg-color: #{$select-bg-color};
  --select-hovered-bg-color: #{$select-hovered-bg-color};
  --select-text-color: #{$select-text-color};
  --select-border-spread-color: #{$select-border-spread-color};

  // Textarea
  --textarea-bg-color: #{$textarea-bg-color};
  --textarea-hovered-bg-color: #{$textarea-hovered-bg-color};
  --textarea-text-color: #{$textarea-text-color};
  --textarea-border-spread-color: #{$textarea-border-spread-color};

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

  // Badge
  --badge-only-part-bg-color: #{$badge-only-part-bg-color};
  --badge-only-part-text-color: #{$badge-only-part-text-color};
  --badge-first-part-bg-color: #{$badge-first-part-bg-color};
  --badge-first-part-text-color: #{$badge-first-part-text-color};
  --badge-last-part-bg-color: #{$badge-last-part-bg-color};
  --badge-last-part-text-color: #{$badge-last-part-text-color};

  // Breadcrumb
  --breadcrumb-separator-color: #{$breadcrumb-separator-color};
  --breadcrumb-item-color: #{$breadcrumb-item-color};
  --breadcrumb-item-hovered-color: #{$breadcrumb-item-hovered-color};
  --breadcrumb-item-active-color: #{$breadcrumb-item-active-color};

  // Cards
  --card-bg-color: #{$card-bg-color};
  --card-border-color: #{$card-border-color};

  // Progress Bar
  --progress-back-bg-color: #{$progress-back-bg-color};
  --progress-back-text-color: #{$progress-back-text-color};
  --progress-bar-bg-color: #{$progress-bar-bg-color};
  --progress-bar-text-color: #{$progress-bar-text-color};
  --progress-bar-stripe-color: #{$progress-bar-stripe-color};

  // Dialog
  --modal-bg-color: #{$modal-bg-color};

  // Dropdown
  --dropdown-bg-color: #{$dropdown-bg-color};
  --dropdown-border-color: #{$dropdown-border-color};
  --dropdown-text-color: #{$dropdown-text-color};
  --dropdown-option-hovered-color: #{$dropdown-option-hovered-color};
  --dropdown-active-item-bg-color: #{$dropdown-active-item-bg-color};
  --dropdown-active-item-text-color: #{$dropdown-active-item-text-color};

  // Navbar
  --navbar-bg-color: #{$navbar-bg-color};
  --navbar-shadow-color: #{$navbar-shadow-color};
  --navbar-item-hovered-color: #{$navbar-item-hovered-color};
  --navbar-selected-item-color: #{$navbar-selected-item-color};
  --navbar-selected-item-bg-color: #{$navbar-selected-item-bg-color};
  --navbar-selected-item-text-color: #{$navbar-selected-item-text-color};

  // Pagination
  --pagination-item-bg-color: #{$pagination-item-bg-color};
  --pagination-item-text-color: #{$pagination-item-text-color};
  --pagination-item-border-color: #{$pagination-item-border-color};
  --pagination-item-hovered-border-color: #{$pagination-item-hovered-border-color};
  --pagination-item-active-bg-color: #{$pagination-item-active-bg-color};
  --pagination-item-active-text-color: #{$pagination-item-active-text-color};
  --pagination-item-active-border-color: #{$pagination-item-active-border-color};

  // Placeholder
  --placeholder-color: #{$placeholder-color};
  --placeholder-holder-color: #{$placeholder-holder-color};

  // Tabs
  --tab-selected-item-color: #{$tab-selected-item-color};
  --tab-selected-item-text-color: #{$tab-selected-item-text-color};
  --tab-border-color: #{$tab-border-color};
}

@if $just-base-theme == false {
  [#{$prefix}theme="dark"] {

    // --------------
    //  Theme Colors
    // --------------
    --primary-color: #{$primary-color-dark};
    --primary-text-color: #{$primary-text-color-dark};
    --primary-hovered-color: #{$primary-hovered-color-dark};
    --primary-color-light: #{$primary-color-light-dark};
    --success-color: #{$success-color-dark};
    --success-text-color: #{$success-text-color-dark};
    --success-hovered-color: #{$success-hovered-color-dark};
    --success-color-light: #{$success-color-light-dark};
    --warning-color: #{$warning-color-dark};
    --warning-text-color: #{$warning-text-color-dark};
    --warning-hovered-color: #{$warning-hovered-color-dark};
    --warning-color-light: #{$warning-color-light-dark};
    --error-color: #{$error-color-dark};
    --error-text-color: #{$error-text-color-dark};
    --error-hovered-color: #{$error-hovered-color-dark};
    --error-color-light: #{$error-color-light-dark};
    --link-color: #{$link-color-dark};
    --link-text-color: #{$link-text-color-dark};
    --link-hovered-color: #{$link-hovered-color-dark};
    --link-color-light: #{$link-color-light-dark};

    // Base
    --body-bg-color: #{$body-bg-color-dark};
    --body-text-color: #{$body-text-color-dark};
    --text-color-primary: #{$text-color-primary-dark};
    --text-color-secondary: #{$text-color-secondary-dark};
    --text-color-tertiary: #{$text-color-tertiary-dark};
    --blockquote-line-color: #{$blockquote-line-color-dark};
    --divider-color: #{$divider-color-dark};
    --dimmer-bg-color: #{$dimmer-bg-color-dark};
    --light-color: #{$light-color-dark};
    --text-color-inverted: #{$text-color-inverted-dark};
    --bg-color-inverted: #{$bg-color-inverted-dark};
    // Item Disabled
    --item-disabled-bg-color: #{$item-disabled-bg-color-dark};
    --item-disabled-fg-color: #{$item-disabled-fg-color-dark};

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

    // Avatar
    --avatar-bg-color: #{$avatar-bg-color-dark};
    --avatar-text-color: #{$avatar-text-color-dark};

    // Button
    --button-bg-color: #{$button-bg-color-dark};
    --button-border-color: #{$button-border-color-dark};
    --button-hovered-border-color: #{$button-hovered-border-color-dark};
    --button-text-color: #{$button-text-color-dark};
    --button-border-spread-color: #{$button-border-spread-color-dark};
    --button-shadow-color: #{$button-shadow-color-dark};

    // Chip
    --chip-bg-color: #{$chip-bg-color-dark};

    // Note Block
    --note-block-bg-color: #{$note-block-bg-color-dark};
    --note-block-line-color: #{$note-block-line-color-dark};

    // Table
    --table-border-color: #{$table-border-color-dark};
    --table-bg-color: #{$table-bg-color-dark};
    --table-hovered-bg-color: #{$table-hovered-bg-color-dark};
    --table-header-bg-color: #{$table-header-bg-color-dark};
    --table-header-text-color: #{$table-header-text-color-dark};
    --table-footer-bg-color: #{$table-footer-bg-color-dark};
    --table-footer-text-color: #{$table-footer-text-color-dark};

    // Tooltip
    --tooltip-bg-color: #{$tooltip-bg-color-dark};
    --tooltip-text-color: #{$tooltip-text-color-dark};

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

    // Checkbox
    --checkbox-border-color: #{$checkbox-border-color-dark};
    --checkbox-checked-border-color: #{$checkbox-checked-border-color-dark};
    --checkbox-checkmark-color: #{$checkbox-checkmark-color-dark};
    --checkbox-border-spread-color: #{$checkbox-border-spread-color-dark};

    // Input
    --input-bg-color: #{$input-bg-color-dark};
    --input-hovered-bg-color: #{$input-hovered-bg-color-dark};
    --input-text-color: #{$input-text-color-dark};
    --input-border-spread-color: #{$input-border-spread-color-dark};
    --input-placeholder-text-color: #{$input-placeholder-text-color-dark};
    // Input Append
    --input-append-bg-color: #{$input-append-bg-color-dark};
    --input-append-fg-color: #{$input-append-fg-color-dark};

    // Radio
    --radio-border-color: #{$radio-border-color-dark};
    --radio-selected-color: #{$radio-selected-color-dark};
    --radio-border-spread-color: #{$radio-border-spread-color-dark};

    // Slider/Range
    --range-bg-color: #{$range-bg-color-dark};

    // Switch
    --switch-bg-color: #{$switch-bg-color-dark};
    --switch-active-bg-color: #{$switch-active-bg-color-dark};
    --switch-fg-color: #{$switch-fg-color-dark};
    --switch-active-fg-color: #{$switch-active-fg-color-dark};
    --switch-border-color: #{$switch-border-color-dark};
    --switch-active-border-color: #{$switch-active-border-color-dark};
    --switch-border-spread-color: #{$switch-border-spread-color-dark};

    // Select
    --select-bg-color: #{$select-bg-color-dark};
    --select-hovered-bg-color: #{$select-hovered-bg-color-dark};
    --select-text-color: #{$select-text-color-dark};
    --select-border-spread-color: #{$select-border-spread-color-dark};

    // Textarea
    --textarea-bg-color: #{$textarea-bg-color-dark};
    --textarea-hovered-bg-color: #{$textarea-hovered-bg-color-dark};
    --textarea-text-color: #{$textarea-text-color-dark};
    --textarea-border-spread-color: #{$textarea-border-spread-color-dark};

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

    // Badge
    --badge-only-part-bg-color: #{$badge-only-part-bg-color-dark};
    --badge-only-part-text-color: #{$badge-only-part-text-color-dark};
    --badge-first-part-bg-color: #{$badge-first-part-bg-color-dark};
    --badge-first-part-text-color: #{$badge-first-part-text-color-dark};
    --badge-last-part-bg-color: #{$badge-last-part-bg-color-dark};
    --badge-last-part-text-color: #{$badge-last-part-text-color-dark};

    // Breadcrumb
    --breadcrumb-separator-color: #{$breadcrumb-separator-color-dark};
    --breadcrumb-item-color: #{$breadcrumb-item-color-dark};
    --breadcrumb-item-hovered-color: #{$breadcrumb-item-hovered-color-dark};
    --breadcrumb-item-active-color: #{$breadcrumb-item-active-color-dark};

    // Cards
    --card-bg-color: #{$card-bg-color-dark};
    --card-border-color: #{$card-border-color-dark};

    // Progress Bar
    --progress-back-bg-color: #{$progress-back-bg-color-dark};
    --progress-back-text-color: #{$progress-back-text-color-dark};
    --progress-bar-bg-color: #{$progress-bar-bg-color-dark};
    --progress-bar-text-color: #{$progress-bar-text-color-dark};
    --progress-bar-stripe-color: #{$progress-bar-stripe-color-dark};

    // Dialog
    --modal-bg-color: #{$modal-bg-color-dark};

    // Dropdown
    --dropdown-bg-color: #{$dropdown-bg-color-dark};
    --dropdown-border-color: #{$dropdown-border-color-dark};
    --dropdown-text-color: #{$dropdown-text-color-dark};
    --dropdown-option-hovered-color: #{$dropdown-option-hovered-color-dark};
    --dropdown-active-item-bg-color: #{$dropdown-active-item-bg-color-dark};
    --dropdown-active-item-text-color: #{$dropdown-active-item-text-color-dark};

    // Navbar
    --navbar-bg-color: #{$navbar-bg-color-dark};
    --navbar-shadow-color: #{$navbar-shadow-color-dark};
    --navbar-item-hovered-color: #{$navbar-item-hovered-color-dark};
    --navbar-selected-item-color: #{$navbar-selected-item-color-dark};
    --navbar-selected-item-bg-color: #{$navbar-selected-item-bg-color-dark};
    --navbar-selected-item-text-color: #{$navbar-selected-item-text-color-dark};

    // Pagination
    --pagination-item-bg-color: #{$pagination-item-bg-color-dark};
    --pagination-item-text-color: #{$pagination-item-text-color-dark};
    --pagination-item-border-color: #{$pagination-item-border-color-dark};
    --pagination-item-hovered-border-color: #{$pagination-item-hovered-border-color-dark};
    --pagination-item-active-bg-color: #{$pagination-item-active-bg-color-dark};
    --pagination-item-active-text-color: #{$pagination-item-active-text-color-dark};
    --pagination-item-active-border-color: #{$pagination-item-active-border-color-dark};

    // Placeholder
    --placeholder-color: #{$placeholder-color-dark};
    --placeholder-holder-color: #{$placeholder-holder-color-dark};

    // Tabs
    --tab-selected-item-color: #{$tab-selected-item-color-dark};
    --tab-selected-item-text-color: #{$tab-selected-item-text-color-dark};
    --tab-border-color: #{$tab-border-color-dark};
  }
}