/* stylelint-disable no-invalid-position-at-import-rule */
// IDS Enterprise - High Contrast Theme , WCAGAAA
//================================================== //

// 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-contrast';

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

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

// Override Config
//================================================== //
// Form Background Color
$header-bg-color: $ids-color-palette-azure-60;
$header-bottom-border-color: $ids-color-palette-azure-80;
$subhead-bg-color: $ids-color-palette-azure-70;
$header-border-color: $ids-color-palette-slate-100;
$header-text-color: $ids-color-palette-slate-100;
$header-button-color: $ids-color-palette-slate-100;
$header-button-focus-color: $ids-color-palette-slate-100;
$header-button-disabled-color: rgba($ids-color-palette-white, 0.3);
$header-primary-btn-background-color: $ids-color-brand-primary-base;
$header-primary-btn-background-hover-color: $ids-color-palette-azure-50;
$header-disabled-color: $ids-color-palette-graphite-50;
$header-focus-box-shadow: 0 0 4px 3px rgba(255, 255, 255, 0.3);
$header-default-bg-color: $ids-color-palette-white;
$module-default-bg-color: $ids-color-palette-white;
$header-toolbar-searchfield-icon-color: $ids-color-palette-slate-100;

// 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-white;

$dropdown-search-bg-color: $ids-color-palette-white;
$panel-bg-color: $ids-color-palette-white;
$panel-border-color: $ids-color-palette-graphite-40;
$drop-shadow-depth: rgba(0, 0, 0, 0.2);
$focus-box-shadow-color: rgba(41, 41, 41, 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;

// Buttons
$button-disabled-background-color: transparent;
$button-color-tertiary-hover-background: $ids-color-palette-slate-20;
$button-color-secondary-initial-background: $ids-color-palette-graphite-70;

// Text Color
$font-color-extrahighcontrast: $ids-color-palette-graphite-100;
$font-color-highcontrast: $ids-color-palette-graphite-100;
$font-color: $ids-color-palette-graphite-90;
$font-color-lowcontrast: $ids-color-palette-graphite-70;
$label-disabled-color: $ids-color-palette-graphite-50;
$label-text-color: $ids-color-palette-graphite-80;
$disabled-color: $ids-color-palette-graphite-50;
$signin-title-color: $ids-color-palette-slate-100;
$count-font-color: $ids-color-palette-slate-10;

// New Text Colors
$font-color-default: $ids-color-palette-black;
$font-color-descriptive: $ids-color-palette-graphite-90;
$font-color-hyperlink: $ids-color-brand-primary-base;
$font-color-muted: $ids-color-palette-graphite-50;
$font-color-alert: $ids-color-status-danger;

// The hyperlink Style
$hyperlink-color: $link-color-initial-font;
$hyperlink-focus-border-color: $link-color-initial-font;
$hyperlink-visited-color: $ids-color-palette-amethyst-100;
$hyperlink-disabled-color: $disabled-color;
$hyperlink-hover-color: $ids-color-brand-primary-alt;

// Rules
$hr-top-color: $ids-color-palette-graphite-30;
$hr-bottom-color: transparent;

// Circle Pager
$circlepager-border-color: $ids-color-palette-graphite-60;
$circlepager-hover-bg-color: $ids-color-palette-white;
$circlepager-hover-border-color: $ids-color-palette-black;
$circlepager-focus-bg-color: $ids-color-palette-white;
$circlepager-focus-border-color: $ids-color-brand-primary-alt;

$circlepager-active-bg-color: $ids-color-brand-primary-base;
$circlepager-active-border-color: $ids-color-brand-primary-base;
$circlepager-active-hover-bg-color: $ids-color-brand-primary-base;
$circlepager-active-hover-border-color: $ids-color-brand-primary-base;
$circlepager-active-focus-bg-color: $ids-color-brand-primary-base;
$circlepager-active-focus-border-color: $ids-color-brand-primary-base;

$circlepager-disable-bg-color: transparent;
$circlepager-disable-border-color: $ids-color-brand-secondary-alt;
$circlepager-disable-hover-bg-color: transparent;
$circlepager-disable-hover-border-color: $ids-color-brand-secondary-alt;
$circlepager-disable-focus-bg-color: transparent;
$circlepager-disable-focus-border-color: $ids-color-brand-secondary-alt;

// Popovers
$popover-bg-color: $ids-color-palette-graphite-10;
$popover-border-color: $ids-color-palette-graphite-30;
$popover-box-shadow: 0 2px 5px $drop-shadow-depth;
$popover-arrow-border-color: $ids-color-palette-graphite-30;
$popover-color: $ids-color-font-base;
$popover-separator-color: $ids-color-palette-graphite-30;

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

// Badges
$badge-neutral-color: $ids-color-palette-black;
$badge-neutral-bg-color: $ids-color-palette-graphite-40;
$badge-neutral-hover-bg-color: $ids-color-palette-white;
$badge-neutral-hover-border-color: $ids-color-palette-black;
$badge-secondary-color: $ids-color-palette-black;
$badge-secondary-bg-color: $ids-color-palette-graphite-30;
$badge-secondary-border-color: $ids-color-palette-graphite-60;
$badge-secondary-hover-bg-color: $ids-color-palette-white;
$badge-secondary-disabled-border-color: $ids-color-palette-graphite-50;
$badge-error-color: $ids-color-palette-white;
$badge-error-icon-color: $ids-color-palette-white;
$badge-error-hover-bg-color: $ids-color-palette-ruby-40;
$badge-error-hover-icon-color: $ids-color-palette-graphite-40;
$badge-alert-color: $ids-color-palette-white;
$badge-alert-icon-color: $ids-color-palette-white;
$badge-alert-hover-icon-color: $ids-color-palette-graphite-40;
$badge-good-color: $ids-color-palette-white;
$badge-good-icon-color: $ids-color-palette-white;
$badge-good-hover-icon-color: $ids-color-palette-white;
$badge-good-hover-bg-color: $ids-color-palette-emerald-30;
$badge-info-color: $ids-color-palette-white;
$badge-info-icon-color: $ids-color-palette-white;
$badge-info-hover-icon-color: $ids-color-palette-graphite-40;
$badge-info-bg-color: $ids-color-brand-primary-base;
$badge-neutral-icon-color: $ids-color-palette-graphite-90;
$badge-neutral-hover-icon-color: $ids-color-palette-graphite-60;
$badge-disabled-text-color: $ids-color-palette-slate-60;
$badge-disabled-icon-color: $ids-color-palette-slate-60;
$badge-disabled-bg-color: $ids-color-palette-graphite-30;

.tag,
.badge {
  font-weight: $ids-number-font-weight-bold !important;
}

// Popup Menu
$popupmenu-color: $font-color-extrahighcontrast;
$popupmenu-icon-color: $ids-color-palette-graphite-60;
$popupmenu-bg-color: $ids-color-palette-white;
$popupmenu-border-color: $ids-color-palette-graphite-60;
$popupmenu-box-shadow: 0 2px 5px $drop-shadow-depth;
$popupmenu-heading-color: $ids-color-palette-graphite-70;
$popupmenu-hover-color: $ids-color-palette-graphite-30;
$popupmenu-checked-color: $ids-color-palette-azure-90;
$popupmenu-checked-color-inverse: $ids-color-brand-primary-base;

// Tertiary Buttons
$tertiary-btn-ripple-color: $ids-color-brand-primary-alt;

// Secondary with Border
$secondary-border-btn-color: $ids-color-palette-graphite-90;
$secondary-border-btn-border-color: $ids-color-palette-graphite-90;
$secondary-border-btn-hover-color: $ids-color-palette-graphite-100;
$secondary-border-btn-hover-border-color: $ids-color-palette-graphite-100;
$secondary-border-btn-ripple-color: $ids-color-brand-primary-alt;

// Input Fields
$input-color: $input-color-initial-font;
$input-disabled-color: $ids-color-palette-graphite-80;
$input-placeholder-color: $input-color-initial-placeholder;
$input-readonly-color: $input-color-readonly-font;

//States
$error-color: #b94e4a;
$error-icon-fill: #b94e4a;
$error-border-color: #b94e4a;
$alert-color: $ids-color-palette-amber-100;
$success-color: $ids-color-status-success;
$info-color: $status-05-color;
$error-focus-box-shadow: 0 0 4px 2px rgba(222, 129, 129, 0.3);
$dirty-icon-fill: $ids-color-palette-amber-50;
$success-icon-fill: $ids-color-status-success;
$info-icon-fill: $ids-color-palette-azure-80;
$selected-bg-color: rgba($ids-color-brand-primary-base, 0.3);

// Autocomplete
$autocomplete-light-text: $ids-color-palette-graphite-50;
$autocomplete-active-bg-color: $body-color-primary-background;
$autocomplete-box-shadow: 0 2px 5px 2px $focus-box-shadow-color;
$autocomplete-box-shadow-flipped: 0 -2px 5px 2px $focus-box-shadow-color;
$trigger-icon-fill-color: $ids-color-palette-graphite-90;
$trigger-icon-fill-light-color: $ids-color-palette-graphite-80;
$trigger-hover-color: $ids-color-palette-graphite-60;
$trigger-active-color: $ids-color-brand-primary-base;
$trigger-focus-color: $ids-color-brand-primary-base;

//List View
$listview-bg-color: $inverse-color;
$listview-bg-color-alternate: $ids-color-palette-graphite-20;
$listview-hover-bg-color: rgba(130, 185, 245, 0.2);
$listview-selected-bg-color: $ids-color-palette-azure-20;
$listview-border-color: $ids-color-palette-graphite-50;
$listview-color: $ids-color-palette-black;
$listview-secondary-color: $ids-color-palette-graphite-90;
$listview-tertiary-color: $ids-color-palette-graphite-70;
$listview-disabled-color: $disabled-color;
$listview-selected-text-color: $font-color-extrahighcontrast;
$listview-header-bg-color: $ids-color-brand-secondary-alt;
$listview-header-color: $font-color-extrahighcontrast;
$listview-subhead-color: $ids-color-palette-graphite-60;

$listview-search-border-color: $ids-color-palette-black;

$listview-toolbar-button-text-color: $button-color-tertiary-initial-font;
$listview-toolbar-button-icon-color: $button-color-tertiary-initial-font;
$listview-toolbar-button-text-hover-color: $ids-color-brand-primary-base;
$listview-toolbar-button-icon-hover-color: $ids-color-brand-primary-base;
$listview-toolbar-button-text-selected-color: $ids-color-brand-primary-base;
$listview-toolbar-button-icon-selected-color: $ids-color-brand-primary-base;

$listview-search-disabled-color: $ids-color-palette-black;
$listview-search-disabled-opacity: 0.8;
$listview-search-disabled-border-color: $ids-color-palette-graphite-60;
$listview-search-disabled-icon-color: $ids-color-palette-graphite-60;

// Link
$link-background-color: $ids-color-palette-white;

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

// Listbuilder
$listbuilder-bg-color: $input-color-initial-background;
$listbuilder-bg-color-hover: $ids-color-brand-secondary-alt;
$listbuilder-bg-color-selected: $ids-color-brand-primary-base;
$listbuilder-border-color: $input-color-initial-border;
$listbuilder-border-color-focus: $ids-color-brand-primary-alt;
$listbuilder-icon-color-hover: $font-color-highcontrast;
$listbuilder-text-color: $ids-color-palette-black;
$listbuilder-input-selection-bg-color: $ids-color-palette-azure-100;

// Toolbar
$toolbar-standalone-bg-color: $ids-color-palette-graphite-10;
$toolbar-standalone-border-color: $ids-color-palette-graphite-60;
$toolbar-standalone-disabled-color: $ids-color-palette-graphite-40;
$toolbar-separator-color: $ids-color-palette-graphite-60;
$toolbar-btn-actions-hover-bg-color: transparent;

// Field Filter
$fieldfilter-border-side-color: $input-color-initial-border;

// Formatter Toolbar
$formatter-toolbar-separator-color: $ids-color-palette-graphite-60;

//Contextual Toolbar
$contextual-toolbar-bg-color: $ids-color-brand-primary-base;
$contextual-toolbar-color: $inverse-color;
$contextual-toolbar-button-color: rgba($inverse-color, 1);
$contextual-toolbar-button-hover-color: rgba($inverse-color, 1);
$contextual-toolbar-button-disabled-color: rgba($inverse-color, 0.3);
$contextual-panel-separator-bg-color: $ids-color-palette-graphite-60;

// Drop down
$dropdown-menu-border-color: $ids-color-brand-primary-base;
$dropdown-selected-bg-color: $ids-color-brand-primary-base;
$dropdown-menu-separator-color: $ids-color-palette-slate-70;
$dropdown-menu-separator-border-color: $ids-color-palette-slate-60;
$dropdown-readonly-icon-color: $ids-color-palette-graphite-80;
$dropdown-placeholder-text-color: $ids-color-palette-slate-70;

// Date Picker
$datepicker-month-year-color: $ids-color-palette-black;
$datepicker-icon-active-color: $ids-color-palette-azure-90;
$datepicker-alternate-month-color: $ids-color-palette-graphite-50;
$datepicker-day-color: $ids-color-palette-black;
$datepicker-focus-border-color: $ids-color-brand-primary-alt;
$datepicker-selected-bg-color: $ids-color-brand-primary-base;
$datepicker-selected-color: $inverse-color;
$datepicker-today-color: $ids-color-palette-black;
$datepicker-hover-bg-color: $ids-color-palette-graphite-30;
$datepicker-disabled-border-color: $ids-color-brand-secondary-alt;
$datepicker-disabled-bg-color: $ids-color-palette-graphite-20;
$datepicker-disabled-color: $ids-color-brand-secondary-alt;
$datepicker-readonly-icon-color: $ids-color-palette-graphite-80;
$datepicker-calendar-icon-color: $ids-color-palette-graphite-80;

.calendar-table .is-today {
  text-decoration: underline;
}

//Time Picker
$timepicker-disabled-border-color: $ids-color-brand-secondary-alt;
$timepicker-disabled-color: $ids-color-brand-secondary-alt;
$timepicker-disabled-icon-color: $disabled-color;
$timepicker-readonly-icon-color: $ids-color-palette-graphite-80;

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

// Color Picker
$colorpicker-initial-bg-color: $ids-color-palette-graphite-60;
$colorpicker-swatch-border-color: $ids-color-palette-graphite-60;
$colorpicker-checkmark-one-color: $ids-color-palette-black;
$colorpicker-checkmark-two-color: $ids-color-palette-white;
$colorpicker-readonly-icon-color: $ids-color-palette-graphite-80;

// Fileupload
$fileupload-border-color: $ids-color-palette-graphite-50;
$fileupload-droparea-color: $ids-color-palette-graphite-50;
$fileupload-secondary-color: $ids-color-palette-graphite-70;
$fileupload-error-border-color: $ids-color-status-danger;
$fileupload-completed-color: #225800;
$fileupload-completed-border-color: #225800;
$fileupload-droparea-hover-color: $ids-color-palette-graphite-50;
$fileupload-droparea-hover-bg-color: $ids-color-palette-azure-20;
$fileupload-cancel-bg-color: $ids-color-palette-graphite-50;
$fileupload-cancel-hover-bg-color: $ids-color-palette-graphite-40;
$fileupload-droparea-bg-color: rgba($ids-color-palette-graphite-10, 0.5);
$fileupload-droparea-hover-bg-color: $ids-color-palette-graphite-10;
$fileupload-droparea-dd-hover-bg-color: rgba(200, 233, 244, 0.8);
$fileupload-droparea-dd-hover-border-color: $ids-color-brand-primary-base;

//Spinbox
$spinbox-active-color: $font-color-extrahighcontrast;
$spinbox-bg-color: $ids-color-palette-graphite-30;
$spinbox-button-color: $ids-color-palette-white;
$spinbox-readonly-icon-color: $ids-color-palette-graphite-80;

// Lookup
$lookup-readonly-icon-color: $ids-color-palette-graphite-80;

// Error Page
$error-page-bg-color: $ids-color-palette-graphite-20;
$error-page-content-bg-color: $ids-color-palette-graphite-10;
$error-page-title-color: $ids-color-font-base;
$error-page-info-color: $ids-color-font-base;
$error-page-border-color: $ids-color-palette-graphite-60;
$error-page-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);

//Skip Link
$skip-link-border-color: $ids-color-palette-graphite-60;
$skip-link-bg-color: $ids-color-palette-graphite-10;
$skip-link-color: $ids-color-brand-primary-base;

// Icons
$icon-color: $font-color;
$icon-empty-bg-color: $font-color-lowcontrast;

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

// Expandable Area
$expandable-area-border-color: $ids-color-palette-graphite-60;
$expandable-area-title-color: $ids-color-palette-black;

// Cards
$card-selected-background-color: $selected-bg-color;
$card-expandable-sub-heading: $ids-color-palette-graphite-90;

// Cardlist
$cardlist-border-color: $ids-color-palette-graphite-60;
$cardlist-header-color: $ids-color-palette-black;
$cardlist-actions-color: $ids-color-palette-graphite-90;

// Switch
$radio-checked-color: $ids-color-brand-primary-base;
$switch-checked-bg-color: $ids-color-brand-primary-base;
$switch-unchecked-bg-color: $ids-color-palette-white;
$switch-unchecked-bar-color: $ids-color-palette-graphite-70;
$switch-unchecked-border-color: $ids-color-palette-graphite-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-30;
$switch-disabled-bg-color: $input-color-readonly-background;
$switch-disabled-border-color: $ids-color-brand-secondary-alt;
$switch-disabled-bar-color: $ids-color-brand-secondary-alt;
$switch-disabled-label-color: $disabled-color;
$switch-focus-box-shadow: 0 0 0 3px #3f505f, 0 0 0 4px $ids-color-brand-primary-base, 0 0 4px 6px rgba(41, 41, 41, 0.3);
$switch-hover-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);

// Editor
$editor-bg-color: $input-color-initial-background;
$editor-border-color: $input-color-initial-border;
$editor-hover-border-color: $input-color-hover-border;
$editor-focus-border-color: $input-color-focus-border;
$editor-line-number-color: $ids-color-palette-graphite-50;
$editor-color: $input-color;
$editor-toolbar-bg-color: $ids-color-palette-graphite-20;
$editor-toolbar-bottom-border-color: $ids-color-palette-graphite-30;
$editor-btn-color: $ids-color-palette-graphite-80;
$editor-btn-hover-color: $ids-color-palette-graphite-50;
$editor-btn-active-color: $ids-color-palette-azure-60;
$editor-btn-disabled-color: $ids-color-palette-graphite-40;
$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(41, 41, 41, 0.3);
$editor-blockquote-color: $ids-color-palette-graphite-70;

// 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-highcontrast;
$pager-focus-border-color: $input-color-focus-border;
$pager-hover-color: $font-color-extrahighcontrast;
$pager-disabled-color: $ids-color-brand-secondary-alt;

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

//Modal
$modal-bg-color: $ids-color-palette-graphite-10;
$modal-border-color: $ids-color-palette-graphite-60;
$modal-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
$modal-btn-color: $ids-color-palette-graphite-80;
$modal-color: $ids-color-palette-graphite-90;
$modal-btn-border-color: $ids-color-palette-graphite-60;
$modal-btn-hover-color: $ids-color-palette-graphite-50;
$modal-btn-primary-color: $ids-color-palette-azure-90;
$modal-btn-primary-hover-color: $ids-color-palette-azure-90;
$modal-btn-disabled-color: $ids-color-palette-graphite-80;
$modal-btn-disabled-opacity: 0.5;
$modal-primary-color: $ids-color-palette-black;

// Accordion
$accordion-bg-color: $ids-color-palette-graphite-10;
$accordion-border-color: $ids-color-palette-graphite-60;
$accordion-toplevel-border-color: $ids-color-palette-slate-40;
$accordion-pane-bg-color: $ids-color-brand-secondary-alt;
$accordion-text-color: $ids-color-palette-graphite-90;
$accordion-text-active-color: $ids-color-palette-black;
$accordion-icon-color: $ids-color-palette-graphite-90;
$accordion-icon-hover-color: $ids-color-palette-black;
$accordion-hover-border-color: $ids-color-palette-black;
$accordion-hover-text-color: $ids-color-palette-graphite-100;

$accordion-panel-border-color: $ids-color-brand-secondary-alt;

$accordion-alternate-bg-color: $ids-color-palette-white;
$accordion-alternate-border-color: $ids-color-brand-secondary-alt;
$accordion-alternate-pane-bg-color: $ids-color-brand-secondary-alt;

$accordion-inverse-bg-color: $ids-color-palette-slate-80;
$accordion-inverse-pane-bg-color: $ids-color-palette-black;
$accordion-inverse-border-color: $ids-color-palette-slate-100;
$accordion-inverse-border-hover-color: $ids-color-palette-white;
$accordion-inverse-text-color: $ids-color-palette-slate-30;
$accordion-inverse-text-hover-color: $ids-color-palette-white;
$accordion-inverse-focus-state-color: $ids-color-palette-white;

$accordion-focused-text-color: $ids-color-palette-azure-50;
$accordion-focused-border-color: $ids-color-palette-azure-50;

$accordion-selected-bg-color: $ids-color-palette-slate-100;
$accordion-selected-text-color: $ids-color-palette-graphite-20;

$accordion-highcontrast-text-decoration: underline;

$accordion-disabled-bg-color: transparent;
$accordion-disabled-border-color: $ids-color-palette-graphite-70;
$accordion-disabled-text-color: $ids-color-palette-graphite-60;
$accordion-disabled-pane-bg-color: transparent;
$accordion-disabled-pane-text-color: $ids-color-palette-graphite-60;

$accordion-header-filtered-children-background-color: $ids-color-palette-black;
$accordion-filtered-background-color: $ids-color-palette-black;
$accordion-filtered-text-color: $ids-color-palette-graphite-60;

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

// Contextual Action Panel
$contextual-panel-bg: $ids-color-palette-graphite-30;
$contextual-panel-border-color: $ids-color-palette-graphite-50;
$contextual-panel-color: $ids-color-palette-white;
$contextual-panel-button-hover-bg-color: $ids-color-palette-graphite-40;

//BreadCrumb
$breadcrumb-color: $ids-color-palette-graphite-80;
$breadcrumb-hover-color: $ids-color-palette-graphite-100;
$breadcrumb-disabled-color: $input-color-disabled-border;

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

// Tabs
$tab-text-color: $ids-color-palette-graphite-100;
$tab-selected-color: $ids-color-palette-azure-90;
$tab-border-color: $ids-color-brand-secondary-alt;
$tab-hover-color: $font-color-extrahighcontrast;

// Vertical Tabs
$vertical-tab-text-color: $font-color-extrahighcontrast;
$vertical-tab-text-hover-color: $font-color-extrahighcontrast;
$vertical-tab-text-hover-decoration: underline;
$vertical-tab-bg-hover-color: $ids-color-brand-secondary-alt;
$vertical-tab-focus-border-color: $ids-color-brand-primary-base;
$vertical-tab-active-text-color: $ids-color-palette-white;
$vertical-tab-active-bg-color: $ids-color-brand-primary-base;

$vertical-tab-panel-bg-color: $panel-bg-color;
$vertical-tab-sidebar-bg-color: $body-color-primary-background;
$vertical-tab-sidebar-border-color: $ids-color-palette-graphite-60;

//Multi-tabs
$mutlitabs-section-border-color: $ids-color-palette-graphite-60;
$mutlitabs-section-alt-bg-color: $ids-color-palette-white;
$mutlitabs-section-alt-border-color: $ids-color-palette-graphite-30;

//Charts
$chart-line-color: $ids-color-palette-graphite-30;
$chart-font-color: $font-color-extrahighcontrast;
$chart-font-color-inverse: $font-color-extrahighcontrast;
$chart-legend-border-color: $ids-color-palette-graphite-30;

// DataGrid
$datagrid-border-color: $ids-color-palette-graphite-60;
$datagrid-header-color: $ids-color-palette-white;
$datagrid-header-bg-color: $ids-color-palette-graphite-70;
$datagrid-header-dragging-bg-color: $ids-color-palette-graphite-60;
$datagrid-nested-header-bg-color: $ids-color-palette-graphite-60;
$datagrid-nested-header-border-color: $ids-color-brand-secondary-alt;
$datagrid-header-border-color: $ids-color-palette-graphite-40;
$datagrid-header-hover-color: $ids-color-palette-graphite-100;
$datagrid-header-active-color: $ids-color-palette-graphite-80;
$datagrid-header-checkbox-border-color: $ids-color-palette-graphite-50;
$datagrid-sort-icon-color: $ids-color-brand-secondary-alt;
$datagrid-list-alt-sorted-icon-color: $ids-color-palette-graphite-40;
$datagrid-sort-icon-sorted-color: $ids-color-palette-white;
$datagrid-required-icon-color: $ids-color-palette-white;

$datagrid-cell-color: $font-color;
$datagrid-cell-bg-color: $ids-color-palette-graphite-10;
$datagrid-cell-editing-bg-color: $ids-color-palette-white;
$datagrid-cell-readonly-bg-color: $input-color-readonly-background;
$datagrid-cell-readonly-color: $font-color;
$datagrid-cell-border-color: $ids-color-palette-graphite-60;
$datagrid-group-row-border-color: $ids-color-palette-graphite-60;
$datagrid-cell-focus-box-shadow: 0 0 4px 1px rgba(80, 83, 90, 0.4);
$datagrid-data-color: $font-color-extrahighcontrast;
$datagrid-row-selected-color: $ids-color-palette-azure-20;
$datagrid-row-selected-color-dark: #a2bbca;
$datagrid-row-hover-color: rgba(130, 185, 245, 0.2);
$datagrid-row-icon-color: $ids-color-palette-graphite-90;

$datagrid-alternate-bg-color: $ids-color-palette-graphite-30;
$datagrid-alternate-row-hover-color: $ids-color-brand-secondary-alt;
$datagrid-list-header-bg-color: $ids-color-palette-graphite-20;
$datagrid-list-group-header-bg-color: $ids-color-palette-graphite-40;
$datagrid-list-group-header-border-color: $ids-color-palette-graphite-30;
$datagrid-list-header-active-color: $ids-color-palette-graphite-40;
$datagrid-list-header-focus-border-color: $ids-color-brand-primary-base;
$datagrid-list-header-box-shadow: 0 0 4px 1px rgba(80, 83, 90, 0.4);
$datagrid-list-header-border-color: transparent;
$datagrid-list-header-color: $ids-color-palette-graphite-100;
$datagrid-list-header-hover-color: $ids-color-brand-secondary-alt;
$datagrid-list-row-hover-color: transparent;
$datagrid-list-sort-icon-color: $ids-color-palette-graphite-50;
$datagrid-list-alt-sorted-icon-color: $ids-color-palette-graphite-50;
$datagrid-list-draggable-sorted-icon-color: $ids-color-palette-graphite-50;
$datagrid-list-sort-icon-hover-color: $ids-color-palette-graphite-60;
$datagrid-header-focus-bg-color: $ids-color-palette-graphite-80;
$datagrid-header-focus-border-color: $ids-color-palette-white;
$datagrid-list-header-checkbox-border-color: $ids-color-palette-slate-50;
$datagrid-list-row-group-hover-color: $datagrid-row-selected-color;

$datagrid-filter-border-color: $ids-color-palette-slate-40;
$datagrid-filter-hover-border-color: $ids-color-palette-white;
$datagrid-filter-color: $ids-color-palette-white;
$datagrid-filter-hover-color: $ids-color-palette-white;
$datagrid-filter-disabled-color: $ids-color-palette-slate-40;
$datagrid-filter-disabled-opacity: 0.5;
$datagrid-filter-icon-color: $ids-color-palette-slate-30;
$datagrid-filter-focus-color: $ids-color-palette-azure-40;
$datagrid-filter-active-color: $ids-color-palette-azure-40;

$datagrid-list-filter-border-color: $ids-color-palette-slate-60;
$datagrid-list-filter-hover-border-color: $ids-color-palette-slate-100;
$datagrid-list-filter-color: $ids-color-palette-slate-100;
$datagrid-list-filter-hover-color: $ids-color-palette-slate-100;
$datagrid-list-filter-icon-color: $ids-color-palette-slate-60;
$datagrid-list-filter-disabled-color: $ids-color-palette-slate-40;
$datagrid-list-filter-focus-color: $ids-color-palette-azure-90;
$datagrid-list-filter-active-color: $ids-color-palette-azure-90;

$datagrid-rowgroup-header: $ids-color-palette-graphite-20;
$datagrid-rowgroup-color: $font-color;
$datagrid-empty-bg-color: $ids-color-palette-graphite-10; //$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-black;
$tree-selected-bg-color: $ids-color-brand-secondary-alt;
$tree-focus-border-color: $ids-color-brand-primary-alt;
$tree-active-bg-color: $ids-color-palette-graphite-10;
$tree-icon-color: $ids-color-palette-graphite-90;
$tree-link-color: $ids-color-palette-graphite-90;
$tree-disabled-color: $ids-color-palette-graphite-50;
$tree-hover-color: $ids-color-palette-black;
$tree-hover-icon-color: $ids-color-palette-graphite-60;

//Progress
$progress-bg-color: $ids-color-palette-graphite-10;
$progress-border-color: $ids-color-palette-graphite-60;
$progress-bar-bg-color: $ids-color-palette-azure-90;

//Chart Progress Bar
$chart-progressbar-bg-color: $ids-color-palette-graphite-40;
$chart-progressbar-bg-color-dark: $ids-color-palette-graphite-50;
$chart-progressbar-completed-fill: #2f6b0a;
$chart-progressbar-target-fill: $ids-color-palette-graphite-50;
$chart-progressbar-primary-fill: $ids-color-brand-primary-base;
$chart-progressbar-dark-fill: $ids-color-palette-graphite-80;
$chart-targeted-achievement-bg-color: $ids-color-palette-graphite-40;

//Timeline
$timeline-indicator-color: $ids-color-palette-graphite-50;
$timeline-indicator-processing-color: $ids-color-brand-primary-base;
$timeline-indicator-complete-color: $ids-color-brand-primary-base;
$timeline-line-color: $ids-color-palette-graphite-50;
$timeline-header-color: $ids-color-palette-azure-90;

//Wizard
$wizard-default-bg: $body-color-primary-background;
$wizard-bar-bg: $ids-color-palette-graphite-60;
$wizard-color: $ids-color-palette-graphite-90;
$wizard-disabled-color: $ids-color-brand-secondary-alt;
$wizard-active-color: $ids-color-brand-primary-base;
$wizard-active-text-color: $ids-color-brand-primary-base;
$wizard-focus-box-shadow: 0 0 0 1px $ids-color-brand-primary-alt;

//Org Chart
$hierarchy-line-color: $ids-color-palette-graphite-100;

// Searchfield Colors
$searchfield-bg-color: $ids-color-palette-white;
$searchfield-border-color: $ids-color-palette-graphite-30;
$searchfield-icon-color: $button-color-tertiary-initial-font;
$searchfield-text-color: $button-color-tertiary-initial-font;
$searchfield-placeholder-text-color: $ids-color-palette-graphite-40;
$searchfield-lighter-bg-color: $ids-color-palette-graphite-20;
$searchfield-lighter-text-color: $ids-color-palette-graphite-50;
$searchfield-lighter-placeholder-text-color: $ids-color-brand-secondary-alt;
$searchfield-active-icon-color: $ids-color-palette-azure-90;

$searchfield-alt-bg-color: $ids-color-palette-white;
$searchfield-alt-border-color: $ids-color-palette-graphite-50;

$searchfield-context-bg: $ids-color-palette-graphite-10;
$searchfield-context-alt-bg: $ids-color-palette-white;
$searchfield-context-border-color: $ids-color-palette-graphite-30;
$searchfield-context-box-shadow-color: $ids-color-palette-graphite-30;
$searchfield-context-icon-color: $ids-color-brand-secondary-alt;
$searchfield-context-text-color: $font-color;

$searchfield-card-bg-color: $ids-color-palette-white;
$searchfield-card-border-color: $ids-color-palette-graphite-30;
$searchfield-card-icon-color: $ids-color-palette-graphite-30;
$searchfield-card-text-color: $font-color;

$searchfield-header-bg-color: $ids-color-palette-white;
$searchfield-header-border-color: $ids-color-palette-graphite-90;
$searchfield-header-text-color: $ids-color-palette-white;
$searchfield-header-placeholder-text-color: $ids-color-palette-slate-60;
$searchfield-header-icon-color: $ids-color-palette-slate-60;
$searchfield-readonly-icon-color: $ids-color-palette-graphite-80;
$searchfield-header-inactive-icon-color: $ids-color-palette-white;

//Image Border Color
$image-border-color: $ids-color-palette-graphite-30;
$image-background-color: $ids-color-palette-graphite-30;

//Toast
$toast-bg-color: $ids-color-palette-white;
$toast-border-color: $ids-color-palette-graphite-30;
$toast-header-color: $ids-color-palette-graphite-100;
$toast-text-color: $ids-color-font-base;

$toast-shadow: none; //0 0 5px rgba(255, 255, 255, .2);

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

//About
$about-header-color: $ids-color-palette-black;
$about-text-color: $ids-color-palette-black;
$about-text-border-color: $ids-color-palette-graphite-60;
$about-text-hover-border-color: $ids-color-palette-black;

// Header Colors
$header-default-bg-color: $ids-color-palette-white;
$module-default-bg-color: $ids-color-palette-white;
$header-default-bg-border-color: $ids-color-palette-slate-30;

$header-border-color: $ids-color-palette-azure-80;
$header-text-default-color: $ids-color-palette-slate-100;
$header-text-actionable-color: $ids-color-palette-azure-80;
$header-button-normal-color: $ids-color-palette-slate-100;
$header-button-icon-color: $ids-color-palette-slate-100;
$header-button-focus-color: $ids-color-palette-slate-100;
$header-button-focus-border-color: $ids-color-palette-azure-80;

$counts-personalize-text-color: $header-text-default-color;
$label-personalize-text-color: $header-text-default-color;
$hyperlinks-personalize-actionable-text-color: $header-text-actionable-color;
$hyperlinks-personalize-text-color: $header-text-default-color;
$header-button-color: $header-button-normal-color;
$header-text-color: $header-text-default-color;
$header-toolbar-searchfield-icon-color: $header-button-icon-color;

// Header
$header-searchfield-btn-font-color: $ids-color-palette-slate-100;
$header-primary-btn-background-hover-color: $ids-color-palette-azure-100;
$input-placeholder-color: $ids-color-palette-slate-60;
$header-searchfield-input-border-color: $ids-color-palette-slate-80;

// Header Tabs
$header-tabcontainer-border-color: $ids-color-brand-secondary-alt;
$header-tab-separator: $ids-color-brand-secondary-alt;
$header-tab-selected-color: $ids-color-palette-azure-80;
$header-tab-focus-border-color: $ids-color-palette-azure-80;

$header-tab-alt-bg-color: $ids-color-palette-slate-100;
$header-tab-alt-separator: $header-tabcontainer-border-color;
$header-tab-alt-normal-color: $inverse-color;
$header-tab-alt-hover-color: $inverse-color;
$header-tab-alt-selected-color: $inverse-color;
$header-tab-alt-disabled-color: $ids-color-palette-slate-50;
$header-button-disabled-color: rgba(0, 0, 0, 0.3);

// Header Breadcrumb
$header-breadcrumb-color: $ids-color-palette-white;
$header-breadcrumb-alt-bg-color: $ids-color-palette-white;
$header-breadcrumb-alt-color: $font-color-highcontrast;
$header-breadcrumb-border-color: $ids-color-palette-graphite-60;

// Module Tabs
$module-default-bg-color: $ids-color-palette-graphite-20;
$module-tabs-bg-color: $ids-color-palette-graphite-20;
$module-tabs-x-border-color: $ids-color-palette-graphite-40;
$module-tabs-y-border-color: $ids-color-palette-graphite-30;
$module-tabs-inactive-bg-color: $ids-color-palette-azure-90;
$module-tabs-active-bg-color: $ids-color-palette-white;
$module-tabs-hover-bg-color: $ids-color-palette-graphite-20;
$module-tabs-inactive-text-color: $ids-color-palette-graphite-80;
$module-tabs-hover-text-color: $ids-color-palette-graphite-80;
$module-tabs-disabled-bg-color: $ids-color-brand-primary-base;
$module-tabs-disabled-x-border-color: $ids-color-palette-azure-40;
$module-tabs-disabled-y-border-color: $ids-color-brand-primary-alt;
$module-tabs-disabled-text-color: $ids-color-palette-azure-40;
$module-tabs-list-container-bg-color: $ids-color-palette-white;
$module-tabs-normal-bg-color: $ids-color-palette-graphite-20;
$module-tabs-normal-text-color: $ids-color-palette-graphite-100;
$module-tabs-active-text-color: $ids-color-palette-azure-90;
$module-tabs-close-hover-color: $ids-color-palette-graphite-60;
$module-tabs-icon-normal-color: $ids-color-palette-graphite-100;
$module-tabs-icon-hover-color: $ids-color-palette-graphite-100;
$module-tabs-more-button-hover-color: $ids-color-palette-graphite-20;
$module-tabs-more-text-hover-color: $ids-color-palette-graphite-100;
$module-tabs-focus-border-color: $ids-color-palette-azure-90;

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

// Splitter
$splitter-border-color: $ids-color-palette-slate-40;
$splitter-focus-border-color: $ids-color-palette-azure-40;
$splitter-handle-background-color: $ids-color-palette-azure-80;
$splitter-expand-btn-background-color: $ids-color-palette-white;
$splitter-expand-btn-border-color: $ids-color-palette-graphite-60;
$splitter-expand-btn-arrow-color: $ids-color-palette-graphite-90;
$splitter-expand-btn-hover-background-color: $ids-color-palette-graphite-20;
$splitter-expand-btn-hover-border-color: $ids-color-palette-graphite-80;
$splitter-expand-btn-hover-arrow-color: $ids-color-palette-graphite-100;
$splitter-expand-btn-accent-color: $ids-color-brand-primary-base;

// Step Chart
$step-chart-bg-color: $ids-color-palette-graphite-20;
$step-chart-border-color: $ids-color-palette-graphite-10;
$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;

//Swaplist
$swaplist-bg-color-hover: $ids-color-brand-secondary-alt;
$swaplist-bg-color-selected: $ids-color-brand-primary-base;
$swaplist-border-color-focus: $ids-color-brand-primary-alt;
$swaplist-icon-color: $ids-color-palette-graphite-50;
$swaplist-icon-color-hover: $font-color-highcontrast;
$swaplist-border-color-hover: $font-color-highcontrast;
$swaplist-text-color: $ids-color-palette-black;
$swaplist-title-text-color: $ids-color-palette-black;

// 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-graphite-80;
$treemap-title-color: $ids-color-palette-white;

// Calendar
$calendar-bg-color: $ids-color-palette-graphite-10;
$calendar-event-color: $ids-color-palette-graphite-100;
$calendar-line-color: $ids-color-palette-graphite-90;
$calendar-line-color-light: $ids-color-palette-graphite-30;
$calendar-selected-border-color: $ids-color-palette-azure-60;
$calendar-selected-bg-color: $ids-color-palette-azure-30;
$calendar-hover-bg-color: $ids-color-palette-slate-20;
$calendar-disabled-bg-color: $input-color-readonly-background;
$calendar-disabled-color: $ids-color-palette-graphite-100;

// Swipe Action
$swipeaction-left-bg-color: $ids-color-palette-graphite-30;
$swipeaction-left-active-bg-color: $ids-color-palette-graphite-40;
$swipeaction-left-hover-bg-color: $ids-color-palette-graphite-40;
$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;

//================================================== //
// Special Component Overrides

@import '../core/controls';

//Swaplist
.swaplist {
  .audible {
    background-color: $ids-color-palette-graphite-70;
  }
}

// Tree - add a line
.tree a:not(.is-disabled):hover .tree-text {
  border-bottom: 1px solid;
}

// Override contrast text on high contrast
.datagrid-cell-wrapper .chart-targeted-text {
  color: $ids-color-palette-white;
}

// Override disabled border color when in hover state
.listview-search {
  .searchfield {
    &[disabled] {
      &:hover {
        border-bottom: 1px solid $ids-color-palette-graphite-60 !important;
        border-color: transparent;
      }
    }
  }
}

//Override background color when hover on high contrast
.listview {
  &.disable-hover {
    li:hover {
      background-color: $ids-color-palette-white;
    }
  }
}