// IDS Enterprise - Dark Theme
//================================================== //

// Standard CSS reset
@import '../core/reset';
@import '../core/mixins';
@import '../core/css-utilities';

// ids-identity token vars
@import '../../node_modules/ids-identity/dist/theme-classic/tokens/web/theme-classic-dark';

// Enterprise color palette
@import '../components/colors/colorpalette';

// Local vars
@import '../core/config';

// Override Config
//================================================== //

$module-default-bg-color: $ids-color-palette-slate-60;
$header-default-bg-color: $ids-color-palette-slate-70;
$header-default-bg-border-color: $ids-color-palette-slate-100;

// Form Background Color
$header-bg-color: $ids-color-palette-slate-60;
$header-bottom-border-color: $ids-color-palette-slate-40;
$subhead-bg-color: $ids-color-palette-slate-50;
$header-text-color: $ids-color-palette-white;
$header-border-color: $ids-color-palette-slate-100;
$header-button-color: $ids-color-palette-white;
$header-button-focus-color: rgba($ids-color-palette-white, 1);
$header-button-disabled-color: rgba($ids-color-palette-white, 0.3);
$header-disabled-color: $ids-color-palette-slate-50;
$header-focus-box-shadow: 0 0 4px 3px rgba(255, 255, 255, 0.3);
$header-toolbar-searchfield-icon-color: $ids-color-palette-white;
$header-button-focus-border-color: $ids-color-palette-white;

// Homepages
$header-hero-text-color: $ids-color-palette-white;
$header-label-text-color: $ids-color-palette-white;
$homepage-button-color: $ids-color-palette-white;
$header-hero-widget-bg-color: $ids-color-palette-slate-90;

// Toolbar
$header-flex-toolbar-close-icon-color-hover: $ids-color-palette-white;

$input-color-focus-border: $ids-color-palette-slate-10;

$dropdown-search-bg-color: $ids-color-palette-slate-80;
$panel-bg-color: $ids-color-palette-slate-70;
$panel-border-color: $ids-color-palette-slate-50;
$drop-shadow-depth: rgba(0, 0, 0, 0.4);
$focus-box-shadow-color: rgba($ids-color-palette-slate-90, 0.3);
$focus-box-shadow: 0 0 4px 2px $focus-box-shadow-color;

$focus-box-shadow-spinbox: 0 3px 3px 0 $focus-box-shadow-color,
  0 -3px 3px 0 $focus-box-shadow-color;

$focus-box-shadow-spinbox-down: -3px 0 3px 0 $focus-box-shadow-color,
  0 3px 3px 0 $focus-box-shadow-color,
  0 -3px 3px 0 $focus-box-shadow-color;

$focus-box-shadow-spinbox-up: 3px 0 3px 0 $focus-box-shadow-color,
  0 3px 3px 0 $focus-box-shadow-color,
  0 -3px 3px 0 $focus-box-shadow-color;

// Base Colors
$inverse-color: $ids-color-palette-white;

// The hyperlink Style
$hyperlink-color: $ids-color-palette-azure-40;

// Text Color
$font-color-extrahighcontrast: $ids-color-palette-white;
$font-color-highcontrast: $ids-color-palette-slate-10;
$font-color: $ids-color-palette-slate-20;
$font-color-lowcontrast: $ids-color-palette-slate-30;
$label-disabled-color: $ids-color-palette-slate-40;
$label-text-color: $ids-color-palette-slate-30;
$disabled-color: $ids-color-palette-slate-30;
$signin-title-color: $ids-color-palette-slate-10;
$count-font-color: $ids-color-palette-slate-10;

// New Text Colors
$font-color-default: $ids-color-palette-white;
$font-color-descriptive: $ids-color-palette-slate-30;
$font-color-hyperlink: $ids-color-palette-azure-60;
$font-color-muted: $ids-color-palette-slate-40;
$font-color-alert: $ids-color-status-danger;

// The hyperlink Style
$hyperlink-color: $ids-color-palette-azure-40;
$hyperlink-focus-border-color: $ids-color-brand-primary-base;
$hyperlink-visited-color: $ids-color-palette-amethyst-30;
$hyperlink-disabled-color: $disabled-color;

// Rules
$hr-top-color: $ids-color-palette-slate-90;
$hr-bottom-color: transparent;

// Buttons
$button-color-primary-initial-background: $ids-color-palette-slate-50;
$button-color-primary-disabled-background: $ids-color-palette-slate-70;
$button-color-primary-disabled-border: $ids-color-palette-slate-70;
$button-color-primary-hover-background: $ids-color-palette-slate-70;
$button-color-primary-active-background: $ids-color-palette-slate-60;
$button-color-tertiary-hover-text-new: $ids-color-palette-white;
$button-color-tertiary-menu-open-new: $ids-color-palette-white;
$button-hyperlink-color: $ids-color-palette-slate-30;
$button-hyperlink-hover-color: $ids-color-palette-slate-40;
$button-color-tertiary-hover-background: $ids-color-palette-slate-50;
$button-color-tertiary-hover-background-new: rgba(0, 0, 0, 0.25);
$button-icon-disabled-color: $ids-color-palette-slate-10;
$button-color-secondary-initial-font: $ids-color-palette-slate-10;
$button-color-secondary-hover-background: $ids-color-palette-slate-50;
$button-color-secondary-initial-background: $ids-color-palette-slate-40;
$hero-button-color-tertiary-hover-background-new: rgba(0, 0, 0, 0.25);
$button-color-tertiary-hover-text: $ids-color-palette-slate-10;
$button-hyperlink-hover-color: $ids-color-palette-slate-10;
$button-color-primary-initial-background: $ids-color-palette-azure-60;

// Button Ripple
$secondary-btn-ripple-color: $ids-color-palette-slate-60;
$tertiary-btn-ripple-color: $ids-color-palette-slate-40;

// GenAI Buttons
$button-ai-sparkle-icon-color-fill: #c2a1f1;

// Circle Pager
$circlepager-border-color: $ids-color-palette-slate-40;
$circlepager-hover-border-color: $ids-color-palette-slate-20;
$circlepager-disable-border-color: $ids-color-palette-slate-50;
$circlepager-disable-hover-border-color: $ids-color-palette-slate-50;
$circlepager-disable-focus-border-color: $ids-color-palette-slate-50;

// Popovers
$popover-bg-color: $ids-color-palette-slate-70;
$popover-border-color: $ids-color-palette-slate-50;
$popover-box-shadow: 0 2px 5px $drop-shadow-depth;
$popover-arrow-border-color: $ids-color-palette-slate-50;
$popover-color: $font-color;
$popover-separator-color: $ids-color-palette-slate-50;
$popover-alternate-color: inherit;
$popover-alternate-subheader-color: inherit;
$popover-alternate-bg-color: $ids-color-palette-slate-70;
$popover-alternate-arrow-color: $ids-color-palette-slate-70;
$popover-alternate-title-bg-color: $ids-color-palette-slate-60;
$popover-alternate-table-header: inherit;

// Progress
$progress-bg-color: transparent;
$progress-border-color: $ids-color-palette-slate-40;
$progress-bar-bg-color: $ids-color-brand-primary-base;

// Tooltips
$tooltip-bg-color: $ids-color-palette-white;
$tooltip-border-color: $ids-color-palette-white;
$tooltip-box-shadow: 0 2px 5px $drop-shadow-depth;
$tooltip-color: $ids-color-palette-slate-100;
$tooltip-error-bg-color: $ids-color-status-danger;
$tooltip-error-color: $ids-color-palette-white;

// Badges
$badge-neutral-color: $ids-color-palette-white;
$badge-neutral-bg-color: $ids-color-palette-slate-60;
$badge-neutral-hover-bg-color: $ids-color-palette-slate-50;
$badge-secondary-color: $ids-color-palette-white;
$badge-secondary-bg-color: $ids-color-palette-slate-90;
$badge-secondary-border-color: $ids-color-palette-slate-40;
$badge-secondary-icon-color: $ids-color-palette-white;
$badge-secondary-hover-bg-color: $ids-color-palette-slate-70;
$badge-secondary-hover-border-color: $ids-color-palette-graphite-40;
$badge-secondary-hover-icon-color: $ids-color-palette-graphite-20;
$badge-error-color: $ids-color-palette-white;
$badge-error-icon-color: $ids-color-palette-slate-20;
$badge-error-hover-icon-color: $ids-color-palette-white;
$badge-alert-color: $ids-color-palette-graphite-100;
$badge-alert-icon-color: $ids-color-palette-graphite-80;
$badge-alert-hover-icon-color: $ids-color-palette-graphite-100;
$badge-good-color: $ids-color-palette-graphite-100;
$badge-good-icon-color: $ids-color-palette-graphite-80;
$badge-good-hover-icon-color: $ids-color-palette-graphite-100;
$badge-info-color: $ids-color-palette-white;
$badge-info-icon-color: $ids-color-palette-slate-20;
$badge-info-hover-icon-color: $ids-color-palette-white;
$badge-info-bg-color: $ids-color-palette-azure-60;
$badge-neutral-icon-color: $ids-color-palette-slate-30;
$badge-neutral-hover-icon-color: $ids-color-palette-white;
$badge-disabled-text-color: $ids-color-palette-slate-30;
$badge-disabled-bg-color: $ids-color-palette-graphite-70;

// Busy Indicator
$busy-indicator-color: $ids-color-palette-azure-40;

// Cards
$card-content-button-color: $ids-color-palette-slate-10;
$card-content-status-success-color: $ids-color-palette-emerald-60;
$card-content-status-error-color: $ids-color-palette-ruby-60;
$card-content-status-alert-color: $ids-color-palette-amber-60;
$card-content-sub-color: $ids-color-palette-slate-30;
$card-content-header-color: $ids-color-palette-slate-20;
$card-content-header-status-available-color: $ids-color-palette-emerald-60;
$card-content-header-status-busy-color: $ids-color-palette-ruby-60;
$card-content-header-status-away-color: $ids-color-palette-amber-60;

$card-selected-background-color: rgba($ids-color-brand-primary-base, 0.3);
$card-expandable-sub-heading: $ids-color-palette-slate-20;

// Popup Menu
$popupmenu-color: $ids-color-palette-white;
$popupmenu-icon-color: $ids-color-palette-slate-10;
$popupmenu-heading-color: $ids-color-palette-slate-40;
$popupmenu-bg-color: $ids-color-palette-slate-70;
$popupmenu-border-color: $ids-color-palette-slate-50;
$popupmenu-box-shadow: 0 2px 5px $drop-shadow-depth;
$popupmenu-checked-color: $ids-color-palette-white;
$popupmenu-hover-color: $ids-color-palette-slate-50;
$popupmenu-checked-color-inverse: $ids-color-brand-primary-base;

// Secondary With Border
$secondary-border-btn-color: $ids-color-palette-slate-30;
$secondary-border-btn-border-color: $ids-color-palette-slate-40;
$secondary-border-btn-hover-color: $ids-color-palette-white;
$secondary-border-btn-hover-border-color: $ids-color-palette-white;
$secondary-border-btn-ripple-color: $ids-color-palette-white;

// Input Fields
$input-color-initial-border: $ids-color-palette-slate-30;
$input-default-border-color: $ids-color-palette-slate-30;
$input-border-color: $ids-color-palette-slate-30;
$input-color: $input-color-initial-font;
$input-disabled-color: $input-color-disabled-font;
$input-focus-border-color: $ids-color-brand-primary-base;
$input-placeholder-color: $input-color-initial-placeholder;
$input-readonly-color: $input-color-readonly-font;

// States
$error-color: #b94e4a;
$error-text-color: #b94e4a;
$error-border-color: #b94e4a;
$error-focus-box-shadow: 0 0 4px 2px rgba(222, 129, 129, 0.3);
$error-icon-fill: $ids-color-status-danger;
$dirty-icon-fill: $ids-color-status-caution;
$success-icon-fill: $ids-color-status-success;
$info-icon-fill: $ids-color-palette-slate-30;
$selected-bg-color: rgba($ids-color-brand-primary-base, 0.3);
$icon-neutral-color: $ids-color-palette-slate-10;

// Autocomplete
$autocomplete-light-text: $ids-color-palette-slate-40;
$autocomplete-active-bg-color: $body-color-primary-background;
$autocomplete-box-shadow: 0 2px 5px 1px $focus-box-shadow-color;
$autocomplete-box-shadow-flipped: 0 -2px 5px 1px $focus-box-shadow-color;
$trigger-icon-fill-color: $ids-color-palette-slate-30;
$trigger-icon-fill-light-color: $ids-color-palette-slate-40;
$trigger-hover-color: $ids-color-palette-white;
$trigger-active-color: $ids-color-brand-primary-base;
$trigger-focus-color: $ids-color-brand-primary-base;

// Link
$link-color-text-font: $ids-color-palette-white;
$link-icon-color: $ids-color-palette-amethyst-30;
$link-border-color: $ids-color-palette-slate-90;
$link-hover-color: $ids-color-palette-slate-70;
$link-selected-color: $ids-color-palette-azure-60;
$link-background-color: $ids-color-palette-slate-80;

// Link List
$linklist-color-text-font: $ids-color-palette-slate-10;
$linklist-color-visited-text-font: $ids-color-palette-amethyst-20;
$linklist-color-disabled-text-font: $ids-color-palette-slate-50;

// List View
$listview-bg-color: $ids-color-palette-slate-70;
$listview-bg-color-alternate: $ids-color-palette-slate-80;
$listview-search-border-color: $ids-color-palette-slate-10;
$listview-hover-bg-color: rgba(130, 185, 245, 0.2);
$listview-selected-bg-color: $ids-color-palette-azure-80;
$listview-border-color: $ids-color-palette-slate-50;
$listview-color: $inverse-color;
$listview-secondary-color: $ids-color-palette-slate-20;
$listview-tertiary-color: $ids-color-palette-slate-30;
$listview-disabled-color: $input-disabled-color;
$listview-selected-text-color: $ids-color-palette-white;
$listview-header-bg-color: $ids-color-palette-slate-60;
$listview-header-color: $ids-color-palette-white;

$listview-toolbar-button-text-color: $ids-color-palette-slate-30;
$listview-toolbar-button-icon-color: $ids-color-palette-slate-30;
$listview-toolbar-button-text-hover-color: $ids-color-palette-white;
$listview-toolbar-button-icon-hover-color: $ids-color-palette-white;
$listview-toolbar-button-text-selected-color: $ids-color-brand-primary-base;
$listview-toolbar-button-icon-selected-color: $ids-color-brand-primary-base;
$listview-full-width-bg-color: $ids-color-palette-slate-80;
$listview-full-width-hover-color: $ids-color-palette-slate-60;

$listview-search-disabled-color: $ids-color-palette-slate-40;
$listview-search-disabled-opacity: 0.5;
$listview-search-disabled-border-color: $ids-color-palette-slate-50;
$listview-search-disabled-icon-color: $ids-color-palette-slate-50;
$listview-search-placeholder-color: $ids-color-palette-slate-30;

// Listbuilder
$listbuilder-bg-color: $panel-bg-color;
$listbuilder-bg-color-hover: $ids-color-palette-slate-60;
$listbuilder-toolbar-btn-hover-bg-color: transparent;
$listbuilder-border-color: $ids-color-palette-slate-40;
$listbuilder-icon-color-hover: $ids-color-palette-white;
$listbuilder-text-color: $ids-color-palette-white;

// Toolbar
$toolbar-standalone-bg-color: $ids-color-palette-slate-60;
$toolbar-standalone-border-color: $ids-color-palette-slate-50;
$toolbar-standalone-disabled-color: $ids-color-palette-slate-50;
$toolbar-separator-color: $ids-color-palette-slate-50;
$toolbar-btn-actions-hover-bg-color: transparent;
$toolbar-standalone-popup-label-color: $ids-color-palette-white;

// Formatter Toolbar
$formatter-toolbar-separator-color: $ids-color-palette-slate-40;

// Contextual Toolbar
$contextual-toolbar-color: $inverse-color;
$contextual-toolbar-bg-color: $ids-color-brand-primary-base;
$contextual-panel-separator-bg-color: $ids-color-palette-slate-30;

// Drop down
$dropdown-menu-border-color: $ids-color-brand-primary-base;
$dropdown-menu-separator-color: $ids-color-palette-slate-40;
$dropdown-menu-separator-border-color: $ids-color-palette-slate-50;
$dropdown-readonly-icon-color: $ids-color-palette-slate-40;
$dropdown-swatch-border-color: $ids-color-palette-slate-40;
$dropdown-placeholder-text-color: $ids-color-palette-slate-40;
$dropdown-input-text-color: $ids-color-palette-white;
$dropdown-color-initial-icon: $ids-color-palette-slate-40;

// Date Picker
$datepicker-month-year-color: $inverse-color;
$datepicker-alternate-month-color: $ids-color-palette-slate-50;
$datepicker-day-color: $ids-color-palette-slate-30;
$datepicker-focus-border-color: $ids-color-brand-primary-base;
$datepicker-selected-bg-color: $ids-color-brand-primary-base;
$datepicker-selected-color: $inverse-color;
$datepicker-today-color: $inverse-color;
$datepicker-hover-bg-color: $ids-color-palette-slate-60;
$datepicker-disabled-icon-color: $ids-color-palette-slate-50;
$datepicker-disabled-border-color: $ids-color-palette-slate-50;
$datepicker-disabled-bg-color: $ids-color-palette-slate-60;
$datepicker-disabled-color: $ids-color-palette-slate-40;
$datepicker-readonly-icon-color: $ids-color-palette-slate-40;
$datepicker-monthview-week-table-border: $ids-color-palette-slate-40;
$datepicker-calendar-icon-color: $ids-color-palette-slate-20;

// Lookup
$lookup-readonly-icon-color: $ids-color-palette-slate-40;
$lookup-modal-searchfield-input-hover-border-color: $ids-color-palette-white;

// Time Picker
$timepicker-disabled-icon-color: $ids-color-palette-slate-50;
$timepicker-disabled-border-color: $ids-color-palette-slate-50;
$timepicker-disabled-color: $ids-color-palette-slate-40;
$timepicker-readonly-icon-color: $ids-color-palette-slate-40;

// Color Palette Background
$color-border-color: rgba(255, 255, 255, 0.2);

// Color Picker
$colorpicker-initial-bg-color: $ids-color-palette-slate-40;
$colorpicker-swatch-border-color: $ids-color-palette-slate-50;
$colorpicker-readonly-icon-color: $ids-color-palette-slate-40;

// Fileupload
$fileupload-border-color: $ids-color-palette-slate-50;
$fileupload-primary-color: $ids-color-palette-slate-30;
$fileupload-secondary-color: $ids-color-palette-slate-40;
$fileupload-status-color: $ids-color-palette-slate-90;
$fileupload-status-hover-color: $ids-color-palette-slate-50;
$fileupload-hover-color: $ids-color-palette-slate-20;
$fileupload-droparea-color: $ids-color-palette-slate-40;
$fileupload-droparea-hover-color: $ids-color-palette-slate-40;
$fileupload-droparea-hover-bg-color: $ids-color-palette-azure-90;
$fileupload-droparea-bg-color: rgba($ids-color-palette-slate-70, 0.5);
$fileupload-droparea-hover-bg-color: $ids-color-palette-slate-70;
$fileupload-droparea-dd-hover-border-color: $ids-color-brand-primary-base;
$fileupload-droparea-dd-hover-bg-color: rgba($ids-color-palette-slate-100, 0.3);

// Spinbox
$spinbox-active-color: $font-color-extrahighcontrast;
$spinbox-bg-color: $ids-color-palette-slate-60;
$spinbox-button-color: $body-color-primary-background;
$spinbox-readonly-icon-color: $ids-color-palette-slate-40;

// Error Pge
$error-page-bg-color: $ids-color-palette-slate-100;
$error-page-content-bg-color: $ids-color-palette-slate-70;
$error-page-title-color: $ids-color-font-base;
$error-page-info-color: $ids-color-font-base;
$error-page-border-color: $ids-color-palette-slate-50;
$error-page-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

// Skip Link
$skip-link-border-color: $ids-color-palette-slate-50;
$skip-link-bg-color: $ids-color-palette-slate-70;
$skip-link-color: $ids-color-palette-azure-40;

// Swaplist
$swaplist-bg-color-hover: $ids-color-palette-slate-60;
$swaplist-border-color-card: $ids-color-palette-slate-50;
$swaplist-icon-color: $ids-color-palette-slate-30;
$swaplist-icon-color-hover: $ids-color-palette-white;
$swaplist-icon-color-disabled: $ids-color-palette-slate-50;
$swaplist-icon-svg-color-disabled: $ids-color-palette-slate-50;
$swaplist-icon-svg-color: $ids-color-palette-slate-10;
$swaplist-icon-svg-color-hover: $ids-color-palette-white;
$swaplist-border-color-hover: $ids-color-palette-white;
$swaplist-title-text-color: $ids-color-palette-white;
$swaplist-text-color: $ids-color-palette-white;

// Icons
$icon-color: $ids-color-palette-slate-30;
$icon-empty-bg-color: $font-color-lowcontrast;

// Field Set
$fieldset-border-top-color: $ids-color-palette-slate-60;
$fieldset-border-bottom-color: transparent;
$fieldset-title-color: $font-color-highcontrast;

// Empty Message
$emptymessage-icon-color: $ids-color-palette-slate-20;

// Expandable Area
$expandable-area-border-color: $ids-color-palette-slate-50;
$expandable-area-title-color: $ids-color-palette-white;

// Cardlist
$cardlist-bg-color: $ids-color-palette-slate-70;
$cardlist-border-color: $ids-color-palette-slate-50;
$cardlist-header-color: $ids-color-palette-white;
$cardlist-actions-color: $ids-color-palette-slate-30;

// Checkboxes
$checkbox-disabled-text-color: $checkbox-color-unchecked-disabled-font;
$checkbox-disabled-checked-bg-color: $checkbox-color-unchecked-disabled-border;

// Switch
$radio-checked-color: $ids-color-brand-primary-base;
$switch-checked-bg-color: $ids-color-palette-azure-30;
$switch-unchecked-bg-color: $ids-color-palette-slate-50;
$switch-unchecked-bar-color: $ids-color-palette-slate-40;
$switch-unchecked-border-color: $ids-color-palette-slate-60;
$switch-unchecked-color: $ids-color-palette-slate-50;
$switch-unchecked-pressed-bg-color: $ids-color-palette-slate-40;
$switch-checked-disabled-bar-color: $ids-color-palette-azure-20;
$switch-disabled-border-color: $ids-color-palette-slate-60;
$switch-disabled-bg-color: $ids-color-palette-slate-70;
$switch-disabled-bar-color: $ids-color-palette-slate-60;
$switch-disabled-label-color: $disabled-color;
$switch-focus-box-shadow: 0 0 0 3px #3f505f, 0 0 0 4px $ids-color-brand-primary-base;
$switch-hover-box-shadow: 0 2px 5px $drop-shadow-depth;

// Editor
$editor-bg-color: transparent;
$editor-border-color: $ids-color-palette-slate-40;
$editor-hover-border-color: $ids-color-palette-slate-20;
$editor-focus-border-color: $ids-color-brand-primary-base;
$editor-line-number-color: $ids-color-palette-slate-40;
$editor-color: $input-color;
$editor-toolbar-bg-color: $ids-color-palette-slate-60;
$editor-toolbar-bottom-border-color: $ids-color-palette-graphite-70;
$editor-btn-color: $ids-color-palette-graphite-30;
$editor-btn-hover-color: $ids-color-palette-white;
$editor-btn-active-color: $ids-color-brand-primary-lighter;
$editor-btn-disabled-color: $ids-color-palette-slate-50;
$editor-readonly-color: $input-readonly-color;
$editor-btn-active-box-shadow: 0 0 0 2px transparent, 0 0 0 1px $ids-color-brand-primary-base, $focus-box-shadow;
$editor-top-focus-box-shadow: -2px -2px 3px 0 rgba(141, 201, 230, 0.3);
$editor-blockquote-color: $ids-color-palette-slate-40;

// Radio Buttons
$radio-border-hover-color: $radio-color-unchecked-hover-border;
$radio-checked-color: $ids-color-brand-primary-base;
$radio-checked-bg-color: $radio-color-checked-initial-background;
$radio-disabled-checked-bg-color: $radio-color-checked-disabled-background;

// Pager
$pager-text-color: $ids-color-brand-primary-base;
$pager-selected-color: $font-color-extrahighcontrast;
$pager-focus-border-color: $input-color-focus-border;
$pager-hover-color: $font-color-extrahighcontrast;
$pager-disabled-color: $ids-color-palette-slate-60;

// Slider
$slider-bg-color: $ids-color-palette-slate-40;
$slider-active-bg-color: $ids-color-brand-primary-base;
$slider-labels-color: $ids-color-palette-slate-30;
$slider-disabled-color: $ids-color-palette-slate-60;
$slider-disabled-active-bg-color: $ids-color-palette-slate-30;
$slider-disabled-handle-color: $ids-color-palette-slate-30;
$slider-disabled-range-color: $ids-color-palette-slate-30;
$slider-readonly-color: $ids-color-palette-graphite-80;
$slider-readonly-active-bg-color: $ids-color-palette-graphite-70;
$slider-readonly-labels-color: $ids-color-palette-graphite-60;
$slider-readonly-handle-color: $ids-color-palette-graphite-70;
$slider-readonly-range-color: $ids-color-palette-graphite-70;
$slider-hover-shadow: 0 2px 5px 0 rgba($ids-color-palette-black, 0.4);

// Modal
$modal-bg-color: $ids-color-palette-slate-70;
$modal-border-color: $ids-color-palette-slate-50;
$modal-box-shadow: 0 2px 5px $drop-shadow-depth;
$modal-btn-color: $ids-color-palette-slate-30;
$modal-color: $ids-color-palette-white;
$modal-btn-border-color: $ids-color-palette-slate-50;
$modal-btn-hover-color: $ids-color-palette-white;
$modal-btn-primary-color: $ids-color-palette-azure-40;
$modal-btn-primary-hover-color: $ids-color-palette-azure-30;
$modal-btn-disabled-color: $ids-color-palette-white;
$modal-btn-disabled-opacity: 0.3;
$modal-btn-primary-disabled-color: $ids-color-palette-slate-50;
$modal-btn-primary-disabled-opacity: 1;
$modal-primary-color: $ids-color-palette-white;

// Accordion
$accordion-bg-color: $ids-color-palette-slate-80;
$accordion-border-color: $ids-color-palette-slate-90;
$accordion-toplevel-border-color: $ids-color-palette-slate-50;
$accordion-pane-bg-color: $ids-color-palette-slate-90;
$accordion-text-color: $ids-color-palette-slate-20;
$accordion-text-active-color: $ids-color-palette-white;
$accordion-icon-color: $ids-color-palette-slate-20;
$accordion-icon-hover-color: $ids-color-palette-white;
$accordion-hover-border-color: $ids-color-palette-white;
$accordion-hover-text-color: $ids-color-palette-white;

$accordion-panel-border-color: $ids-color-palette-slate-90;

$accordion-alternate-bg-color: $ids-color-palette-slate-90;
$accordion-alternate-border-color: $ids-color-palette-slate-100;
$accordion-alternate-pane-bg-color: $ids-color-palette-slate-100;

$accordion-inverse-bg-color: $ids-color-palette-slate-80;
$accordion-inverse-pane-bg-color: $ids-color-palette-slate-90;
$accordion-inverse-border-color: $ids-color-palette-slate-90;
$accordion-inverse-border-hover-color: $ids-color-palette-white;
$accordion-inverse-text-color: $ids-color-palette-slate-20;
$accordion-inverse-text-hover-color: $ids-color-palette-white;
$accordion-inverse-focus-state-color: $ids-color-palette-white;

$accordion-focused-text-color: $ids-color-brand-primary-base;
$accordion-focused-border-color: $ids-color-brand-primary-base;
$accordion-selected-bg-color: $ids-color-palette-slate-50;
$accordion-selected-text-color: $ids-color-palette-white;

$accordion-highcontrast-text-decoration: none;

$accordion-disabled-bg-color: transparent;
$accordion-disabled-border-color: $ids-color-palette-slate-80;
$accordion-disabled-text-color: $ids-color-palette-slate-50;
$accordion-disabled-pane-bg-color: transparent;
$accordion-disabled-pane-text-color: $ids-color-palette-slate-50;

// Application Menu (extends Accordion)
$application-menu-border-color: $ids-color-palette-slate-100;
$application-menu-trigger-icon-fill-color: $trigger-icon-fill-color;

// Contextual Action Panel
$contextual-panel-bg: $ids-color-palette-slate-60;
$contextual-panel-border-color: $ids-color-palette-slate-50;
$contextual-panel-color: $ids-color-palette-slate-20;
$contextual-panel-button-hover-bg-color: $ids-color-palette-graphite-80;

// BreadCrumb
$breadcrumb-color: $ids-color-palette-slate-40;
$breadcrumb-hover-color: $ids-color-palette-slate-20;
$breadcrumb-disabled-color: $input-color-disabled-border;

// Rating (Stars)
$rating-bg-color: $ids-color-palette-amber-40;
$rating-border-color: $ids-color-palette-slate-40;
$rating-hover-color: $ids-color-brand-primary-base;

// Tabs
$tab-text-color: $ids-color-palette-slate-20;
$tab-selected-color: $ids-color-palette-azure-60;
$tab-border-color: $ids-color-palette-slate-50;
$tab-hover-color: $font-color-extrahighcontrast;
$tab-text-color-horizontal: $ids-color-palette-slate-20;
$tab-add-tab-color: $ids-color-palette-slate-20;

$tab-alt-bg-color: $ids-color-palette-slate-100;
$tab-alt-border-color: $ids-color-palette-slate-80;

// Vertical Tabs
$vertical-tab-text-color: $ids-color-palette-white;
$vertical-tab-text-hover-color: $ids-color-palette-white;
$vertical-tab-bg-hover-color: $ids-color-palette-slate-60;

$vertical-tab-panel-bg-color: $ids-color-palette-slate-80;
$vertical-tab-sidebar-bg-color: $ids-color-palette-slate-70;
$vertical-tab-sidebar-border-color: $ids-color-palette-slate-50;

// Multi-tabs
$mutlitabs-section-border-color: $ids-color-palette-slate-50;
$mutlitabs-section-alt-bg-color: $ids-color-palette-black;
$mutlitabs-section-alt-border-color: $ids-color-palette-slate-90;

// Charts
$chart-line-color: $ids-color-palette-slate-40;
$chart-line-color-axis: $ids-color-palette-slate-30;
$chart-font-color: $ids-color-palette-slate-10;
$chart-font-color-inverse: $ids-color-palette-slate-60;
$chart-arc-stroke: $ids-color-palette-slate-70;
$chart-legend-border-color: $ids-color-palette-slate-60;
$chart-legend-title-color: $ids-color-palette-slate-10;
$chart-legend-item-text-color: $chart-legend-title-color;
$chart-container-text-color: $chart-legend-title-color;

// DataGrid
$datagrid-border-color: $ids-color-palette-slate-50;
$datagrid-header-color: $ids-color-palette-slate-100;
$datagrid-header-bg-color: $ids-color-palette-slate-30;
$datagrid-header-dragging-bg-color: $ids-color-palette-slate-40;
$datagrid-nested-header-bg-color: $ids-color-palette-slate-40;
$datagrid-nested-header-border-color: $ids-color-palette-slate-50;
$datagrid-header-border-color: $ids-color-palette-slate-50;
$datagrid-header-hover-color: $ids-color-palette-slate-20;
$datagrid-header-active-color: $ids-color-palette-slate-40;
$datagrid-header-checkbox-border-color: $ids-color-palette-slate-90;
$datagrid-sort-icon-color: $ids-color-palette-slate-40;
$datagrid-list-alt-sorted-icon-color: $ids-color-palette-slate-40;
$datagrid-list-draggable-sorted-icon-color: $ids-color-palette-slate-50;
$datagrid-sort-icon-sorted-color: $ids-color-palette-slate-100;
$datagrid-required-icon-color: $ids-color-palette-slate-100;
$datagrid-header-drag-arrow-color: $ids-color-palette-slate-10;

$datagrid-cell-color: $ids-color-palette-white;
$datagrid-cell-bg-color: $ids-color-palette-slate-80;
$datagrid-cell-editing-bg-color: $panel-bg-color;
$datagrid-cell-readonly-bg-color: $ids-color-palette-slate-70;
$datagrid-cell-readonly-color: $ids-color-palette-white;
$datagrid-cell-border-color: $ids-color-palette-slate-50;
$datagrid-group-row-border-color: $ids-color-palette-slate-50;
$datagrid-cell-focus-box-shadow: 0 0 4px 1px rgba(85, 163, 243, .8);
$datagrid-cell-focus-border-color: $ids-color-palette-azure-40;
$datagrid-data-color: $font-color-extrahighcontrast;
$datagrid-row-selected-color: $ids-color-palette-azure-80;
$datagrid-row-selected-color-dark: #3e586c;
$datagrid-row-hover-color: rgba(130, 185, 245, 0.2);
$datagrid-row-icon-color: $ids-color-palette-slate-30;

$datagrid-header-focus-bg-color: $ids-color-brand-primary-base;
$datagrid-alternate-bg-color: #414348;
$datagrid-alternate-row-hover-color: $ids-color-palette-slate-60;
$datagrid-list-header-bg-color: $ids-color-palette-graphite-80;
$datagrid-list-group-header-bg-color: $ids-color-palette-slate-90;
$datagrid-list-group-header-border-color: $ids-color-palette-graphite-70;
$datagrid-list-header-focus-border-color: $ids-color-brand-primary-base;
$datagrid-list-header-box-shadow: 0 0 4px 1px rgba(101, 104, 113, 0.4);
$datagrid-list-header-border-color: $ids-color-palette-slate-50;
$datagrid-list-header-color: $ids-color-palette-slate-30;
$datagrid-list-header-hover-color: $ids-color-palette-slate-90;
$datagrid-list-row-hover-color: transparent;
$datagrid-list-sort-icon-color: $ids-color-palette-slate-40;
$datagrid-list-sort-icon-hover-color: $ids-color-palette-slate-10;
$datagrid-header-focus-bg-color: $datagrid-header-bg-color;
$datagrid-header-focus-border-color: $ids-color-palette-white;
$datagrid-list-header-checkbox-border-color: $ids-color-palette-slate-50;
$datagrid-list-header-active-color: $ids-color-palette-slate-100;
$datagrid-list-row-group-hover-color: $datagrid-row-selected-color;

$datagrid-filter-border-color: $ids-color-palette-slate-50;
$datagrid-filter-hover-border-color: $ids-color-palette-slate-100;
$datagrid-filter-color: $ids-color-palette-slate-100;
$datagrid-filter-hover-color: $ids-color-palette-slate-100;
$datagrid-filter-disabled-color: $ids-color-palette-slate-50;
$datagrid-filter-disabled-opacity: 0.6;
$datagrid-filter-icon-color: $ids-color-palette-slate-50;
$datagrid-filter-focus-color: $ids-color-brand-primary-alt;
$datagrid-filter-active-color: $ids-color-brand-primary-alt;

$datagrid-list-filter-border-color: $ids-color-palette-slate-30;
$datagrid-list-filter-hover-border-color: $ids-color-palette-white;
$datagrid-list-filter-color: $ids-color-palette-white;
$datagrid-list-filter-hover-color: $ids-color-palette-white;
$datagrid-list-filter-icon-color: $ids-color-palette-slate-30;
$datagrid-list-filter-disabled-color: $ids-color-palette-slate-60;
$datagrid-list-filter-focus-color: $ids-color-brand-primary-base;
$datagrid-list-filter-active-color: $ids-color-brand-primary-base;

$datagrid-rowgroup-header: $ids-color-palette-slate-70;
$datagrid-rowgroup-color: $font-color;
$datagrid-empty-bg-color: $ids-color-palette-slate-70; // $datagrid-cell-bg-color
$datagrid-badges-azure-font-color: $ids-color-palette-white;

// Search Results
$sr-masthead-text-color: $font-color;
$sr-result-bottom-border-color: $hr-top-color;
$sr-masthead-item-color: $font-color-lowcontrast;

// Tree
$tree-selected-color: $ids-color-palette-white;
$tree-selected-bg-color: $ids-color-palette-slate-60;
$tree-isover-bg-color: $ids-color-palette-azure-100;
$tree-isover-border-color: $ids-color-palette-azure-80;
$tree-focus-border-color: $ids-color-brand-primary-base;
$tree-active-bg-color: #3e586c;
$tree-icon-color: $ids-color-palette-slate-30;
$tree-link-color: $ids-color-palette-slate-30;
$tree-disabled-color: $ids-color-palette-slate-50;
$tree-hover-color: $ids-color-palette-white;
$tree-hover-icon-color: $ids-color-palette-white;

// Chart Progress Bar
$chart-progressbar-bg-color: $ids-color-palette-slate-40;
$chart-progressbar-bg-color-dark: $ids-color-palette-slate-20;
$chart-progressbar-completed-fill: $ids-color-palette-emerald-80;
$chart-progressbar-target-fill: $ids-color-palette-slate-60;
$chart-progressbar-primary-fill: $ids-color-brand-primary-base;
$chart-progressbar-dark-fill: $ids-color-brand-primary-base;
$chart-targeted-achievement-bg-color: $ids-color-palette-slate-40;

// Timeline
$timeline-indicator-color: $ids-color-palette-slate-30;
$timeline-indicator-processing-color: $ids-color-brand-primary-base;
$timeline-indicator-complete-color: $ids-color-brand-primary-base;
$timeline-line-color: $ids-color-palette-slate-40;
$timeline-header-color: $ids-color-brand-primary-base;

// Themable Variables in config.scss
$wizard-default-bg: $body-color-primary-background;
$wizard-bar-bg: $ids-color-palette-slate-40;
$wizard-color: $ids-color-palette-slate-30;
$wizard-disabled-color: $ids-color-palette-slate-40;
$wizard-active-color: $ids-color-brand-primary-base;
$wizard-active-text-color: $ids-color-palette-azure-40;
$wizard-focus-box-shadow: 0 0 0 1px $ids-color-brand-primary-base;

// Themable Variables in config.scss
$hierarchy-line-color: $ids-color-palette-slate-40;

// Searchfield Colors
$searchfield-bg-color: $ids-color-palette-slate-70;
$searchfield-border-color: $ids-color-palette-slate-100;
$searchfield-icon-color: $button-color-tertiary-initial-font;
$searchfield-text-color: $ids-color-palette-white;
$searchfield-placeholder-text-color: $ids-color-palette-slate-40;
$searchfield-lighter-bg-color: $ids-color-palette-slate-80;
$searchfield-lighter-text-color: $ids-color-palette-slate-40;
$searchfield-lighter-placeholder-text-color: $ids-color-brand-secondary-alt;
$searchfield-active-icon-color: $ids-color-brand-primary-alt;
$searchfield-icon-hover-color: $ids-color-palette-white;
$searchfield-header-color: $ids-color-palette-white;

$searchfield-toolbar-bg-color: $ids-color-palette-slate-100;
$searchfield-toolbar-border-color: $ids-color-palette-slate-40;
$searchfield-header-hover-icon-color: $ids-color-palette-white;
$searchfield-toolbar-focus-color: $ids-color-palette-slate-10;

$searchfield-alt-bg-color: $ids-color-palette-slate-70;
$searchfield-alt-border-color: $ids-color-palette-slate-80;

$searchfield-context-bg: $ids-color-palette-slate-80;
$searchfield-context-alt-bg: $ids-color-palette-slate-100;
$searchfield-context-border-color: $ids-color-palette-slate-90;
$searchfield-context-box-shadow-color: $ids-color-palette-slate-90;
$searchfield-context-icon-color: $ids-color-palette-slate-60;
$searchfield-context-text-color: $font-color;

$searchfield-card-bg-color: $ids-color-palette-slate-80;
$searchfield-card-border-color: $ids-color-palette-slate-90;
$searchfield-card-icon-color: $ids-color-palette-slate-60;
$searchfield-card-text-color: $font-color;

$searchfield-header-bg-color: $ids-color-palette-slate-100;
$searchfield-header-border-color: $ids-color-palette-slate-70;
$searchfield-header-text-color: $ids-color-palette-white;
$searchfield-header-placeholder-text-color: rgba(255, 255, 255, 0.5);
$searchfield-header-icon-color: $header-button-color;
$searchfield-header-inactive-icon-color: $ids-color-palette-white;
$searchfield-readonly-icon-color: $ids-color-palette-slate-40;

// Image Border Color
$image-border-color: $ids-color-palette-slate-40;
$image-background-color: $ids-color-palette-slate-40;

// Toast
$toast-bg-color: $ids-color-palette-slate-70;
$toast-progress-color: $ids-color-palette-azure-40;
$toast-border-color: $ids-color-palette-slate-50;
$toast-header-color: $ids-color-palette-white;
$toast-text-color: $ids-color-palette-white;
$toast-shadow: none; //0 0 5px rgba(255, 255, 255, .2);

// Builder Pattern
$builder-header-bg-color: $ids-color-palette-slate-80;

// About
$about-header-color: $ids-color-palette-white;
$about-text-color: $ids-color-palette-white;
$about-text-border-color: $ids-color-palette-slate-50;
$about-text-hover-border-color: $ids-color-palette-slate-30;

// Header
$header-primary-btn-background-color: $ids-color-palette-slate-70;
$header-primary-btn-background-hover-color: $ids-color-palette-slate-80;
$header-searchfield-input-border-color: $ids-color-palette-slate-40;
$header-searchfield-btn-font-color: $ids-color-palette-slate-30;
$subheader-searchfield-context-bg: $ids-color-palette-slate-100;
$header-flex-toolbar-input-searchfield-color: $ids-color-palette-white;
$header-flex-toolbar-close-icon-color: $ids-color-palette-white;

// Header Tabs
$header-tabcontainer-border-color: $ids-color-palette-slate-90;
$header-tab-separator: rgba(255, 255, 255, 0.4);
$header-tab-selected-color: $ids-color-palette-azure-60;
$header-tab-normal-color: $ids-color-palette-white;
$header-tab-hover-color: $ids-color-palette-white;
$header-tab-indicator-hover-color: $ids-color-palette-white;
$header-tab-focus-border-color: $ids-color-palette-white;
$header-tab-background-hover-color: $ids-color-palette-slate-80;
$header-tab-alt-bg-color: $ids-color-palette-slate-60;
$header-tab-alt-separator: $ids-color-palette-white;
$header-tab-alt-normal-color: $ids-color-palette-slate-30;
$header-tab-alt-hover-color: $inverse-color;
$header-tab-alt-selected-color: $inverse-color;
$header-tab-alt-disabled-color: $ids-color-palette-slate-40;

// Header Breadcrumb
$header-breadcrumb-color: $ids-color-palette-slate-10;
$header-breadcrumb-alt-bg-color: $ids-color-palette-slate-50;
$header-breadcrumb-alt-color: $ids-color-palette-white;
$header-breadcrumb-border-color: $ids-color-palette-slate-50;

// Module Tabs
$module-tabs-bg-color: $header-bg-color;
$module-tabs-x-border-color: $ids-color-palette-slate-80;
$module-tabs-y-border-color: $ids-color-palette-slate-100;
$module-tabs-inactive-bg-color: $header-border-color;
$module-tabs-active-bg-color: $ids-color-palette-slate-80;
$module-tabs-hover-bg-color: $ids-color-palette-slate-70;
$module-tabs-inactive-text-color: rgba($ids-color-palette-white, 0.85);
$module-tabs-active-text-color: $ids-color-palette-white;
$module-tabs-hover-text-color: $ids-color-palette-white;
$module-tabs-disabled-bg-color: $ids-color-palette-slate-60;
$module-tabs-disabled-x-border-color: $ids-color-palette-slate-40;
$module-tabs-disabled-y-border-color: $ids-color-palette-slate-70;
$module-tabs-disabled-text-color: $ids-color-palette-slate-40;
$module-tabs-icon-normal-color: $ids-color-palette-white;

// Composite Tabs
$composite-tabs-panel-bg-color: $ids-color-palette-slate-100;

// Form Compact
$formcompact-field-bg-color: $panel-bg-color;
$formcompact-field-bg-focus-color: $ids-color-palette-azure-90;
$formcompact-field-border-color: $ids-color-palette-white;

// Splitter
$splitter-border-color: $ids-color-palette-slate-60;
$splitter-focus-border-color: $ids-color-palette-azure-30;
$splitter-handle-background-color: $ids-color-palette-azure-60;
$splitter-expand-btn-background-color: $ids-color-palette-slate-70;
$splitter-expand-btn-border-color: $ids-color-palette-slate-50;
$splitter-expand-btn-arrow-color: $ids-color-palette-slate-30;
$splitter-expand-btn-hover-background-color: $ids-color-palette-slate-60;
$splitter-expand-btn-hover-border-color: $ids-color-palette-slate-40;
$splitter-expand-btn-hover-arrow-color: $ids-color-palette-slate-20;
$splitter-expand-btn-accent-color: $ids-color-palette-azure-60;

// Step Chart
$step-chart-bg-color: $ids-color-palette-slate-70;
$step-chart-border-color: $ids-color-palette-slate-50;
$step-chart-inprogress-bg-color: $ids-color-palette-ruby-20;
$step-chart-completed-bg-color: $ids-color-brand-primary-base;
$step-chart-totally-completed-bg-color: $ids-color-status-success;

// Block Grid
$blockgrid-selected-bg-color: $selected-bg-color;
$blockgrid-selected-border-color: $button-color-secondary-focus-border;
$blockgrid-hover-color: $listview-hover-bg-color;
$blockgrid-focus-border-color: $ids-color-brand-primary-base;

// Tree Map
$treemap-title-bg-color: $ids-color-palette-slate-30;
$treemap-title-color: $ids-color-palette-slate-100;

// Calendar
$calendar-bg-color: $panel-bg-color;
$calendar-event-color: $ids-color-palette-slate-100;
$calendar-line-color: $ids-color-palette-slate-50;
$calendar-line-color-light: $ids-color-palette-slate-60;
$calendar-selected-border-color: $ids-color-palette-azure-60;
$calendar-selected-bg-color: $ids-color-palette-azure-10;
$calendar-hover-bg-color: $ids-color-palette-slate-70;
$calendar-disabled-bg-color: $ids-color-palette-slate-80;
$calendar-disabled-color: $ids-color-palette-slate-40;

// Builder
$builder-actions-bg-color: $panel-bg-color;
$builder-sidebar-bg-color: $panel-bg-color;

// Multi Select
.dropdown-list.multiple li:hover:not(.group-label)::before {
  border: 1px solid $ids-color-palette-slate-40;
}

// Swipe Action
$swipeaction-left-bg-color: $ids-color-palette-graphite-60;
$swipeaction-left-active-bg-color: $ids-color-palette-graphite-70;
$swipeaction-left-hover-bg-color: $ids-color-palette-graphite-70;
$swipeaction-right-bg-color: $ids-color-palette-azure-50;
$swipeaction-right-color: $ids-color-palette-white;
$swipeaction-right-active-bg-color: $ids-color-palette-azure-60;
$swipeaction-right-hover-bg-color: $ids-color-palette-azure-60;
$swipeaction-right-hover-color: $ids-color-palette-white;

// Stats
$stats-title-color: $ids-color-palette-graphite-30;
$stats-subtitle-color: $ids-color-palette-graphite-40;
$stats-value-color: $ids-color-palette-slate-10;
$stats-selected-border-color: $ids-color-palette-azure-60;

//================================================== //
// Core Components

/* stylelint-disable-next-line no-invalid-position-at-import-rule */
@import '../core/controls';