@use 'color-defaults' as *;
@use 'forms-vars' as *;

$palette-high: var(--c8y-palette-high);
$palette-low: var(--c8y-palette-low);
$black: black; // we need it as a color object

/* grays */
$gray-100: var(--c8y-palette-gray-100);
$gray-90: var(--c8y-palette-gray-90);
$gray-80: var(--c8y-palette-gray-80);
$gray-70: var(--c8y-palette-gray-70);
$gray-60: var(--c8y-palette-gray-60);
$gray-50: var(--c8y-palette-gray-50);
$gray-40: var(--c8y-palette-gray-40);
$gray-30: var(--c8y-palette-gray-30);
$gray-20: var(--c8y-palette-gray-20);
$gray-10: var(--c8y-palette-gray-10);

/* TYPOGRAPHY COLORS - Defined early as used throughout */
/* Text */
$text-color: var(--text-color, var(--c8y-text-color));
$text-muted: var(--text-muted, var(--c8y-text-muted));

/* Brand */
$brand-primary: var(--brand-primary, var(--c8y-brand-primary));
$brand-primary-light: var(--brand-light, var(--c8y-brand-light));
$brand-primary-dark: var(--brand-dark, var(--c8y-brand-dark));
$brand-complementary: var(--brand-complementary, var(--c8y-brand-complementary));
$brand-10: var(--brand-10, var(--c8y-brand-10));
$brand-20: var(--brand-20, var(--c8y-brand-20));
$brand-30: var(--brand-30, var(--c8y-brand-30));
$brand-40: var(--brand-40, var(--c8y-brand-40));
$brand-50: var(--brand-50, var(--c8y-brand-50));
$brand-60: var(--brand-60, var(--c8y-brand-60));
$brand-70: var(--brand-70, var(--c8y-brand-70));
$brand-80: var(--brand-80, var(--c8y-brand-80));
$brand-accent: var(--brand-accent, var(--c8y-brand-accent));
$brand-accent-dark: var(--brand-accent-dark, var(--c8y-brand-accent-dark));
$brand-accent-light: var(--brand-accent-light, var(--c8y-brand-accent-light));

/* Status, feedback states and alerts */
$status-success: var(--palette-status-success, var(--c8y-palette-status-success));
$status-info: var(--palette-status-info, var(--c8y-palette-status-info));
$status-danger: var(--palette-status-danger, var(--c8y-palette-status-danger));
$status-warning: var(--palette-status-warning, var(--c8y-palette-status-warning));
$status-success-light: var(--palette-status-success-light, var(--c8y-palette-status-success-light));
$status-success-dark: var(--palette-status-success-dark, var(--c8y-palette-status-success-dark));
$status-info-light: var(--palette-status-info-light, var(--c8y-palette-status-info-light));
$status-info-dark: var(--palette-status-info-dark, var(--c8y-palette-status-info-dark));
$status-danger-light: var(--palette-status-danger-light, var(--c8y-palette-status-danger-light));
$status-danger-dark: var(--palette-status-danger-dark, var(--c8y-palette-status-danger-dark));
$status-warning-light: var(--palette-status-warning-light, var(--c8y-palette-status-warning-light));
$status-warning-high: var(--c8y-palette-status-warning-high);
$status-warning-dark: var(--palette-status-warning-dark, var(--c8y-palette-status-warning-dark));
$status-system: var(--palette-status-system, var(--c8y-palette-status-system));

$state-success-text: $text-color;
$state-success-bg: transparent;
$state-success-border: var(--c8y-palette-status-success);

$state-info-text: $text-color;
$state-info-bg: transparent;
$state-info-border: var(--c8y-palette-status-info);

$state-system-text: $text-color;
$state-system-bg: transparent;
$state-system-border: var(--brand-primary, var(--c8y-brand-primary));

$state-warning-text: $text-color;
$state-warning-bg: transparent;
$state-warning-border: var(--c8y-palette-status-warning);

$state-danger-text: $text-color;
$state-danger-bg: transparent;
$state-danger-border: var(--c8y-palette-status-danger);

/* NAVIGATOR */
$navigator-background-default: var(--navigator-bg-color, var(--c8y-navigator-bg-color));
$navigator-header-background: var(--navigator-header-bg, var(--c8y-navigator-header-bg));
$navigator-text-color: var(--navigator-text-color, var(--c8y-navigator-text-color));
$navigator-header-color: var(--navigator-title-color, var(--c8y-navigator-title-color));
$navigator-separator-color: var(--navigator-separator-color, var(--c8y-navigator-separator-color));
$navigator-text-color-selected: var(--navigator-active-color, var(--navigator-color-active, var(--c8y-navigator-text-color-active, var(--c8y-navigator-text-color-selected))));
$navigator-background-selected: var(--navigator-active-bg, var(--c8y-navigator-active-bg));
$navigator-border-selected: var(--navigator-border-active, var(--c8y-navigator-border-active));
$navigator-background-active: var(--navigator-active-bg, var(--c8y-navigator-active-bg));
$navigator-scrollbar-track-color: var(--c8y-navigator-scrollbar-track);
$navigator-scrollbar-thumb-color: var(--c8y-navigator-scrollbar-thumb-default);
$navigator-scrollbar-thumb-color-hover: var(--c8y-navigator-scrollbar-thumb-hover);

$navColor: $navigator-background-default;
$navColorHeader: $navigator-header-background;
$navigator-text-color-default: $navigator-text-color;
$navigator-title-color: $navigator-header-color;
$navigator-color-active: $navigator-text-color-selected;
$navigator-active-bg: $navigator-background-selected;

// when set, adds a gradient in navbar and header
$grad-top: "";
$grad-bottom: "";

/* RIGHT DRAWER */

$drawer-bg: var(--right-drawer-background-default, var(--navigator-bg-color, var(--c8y-right-drawer-background-default)));
$drawer-background-default: $drawer-bg;
$drawer-color: var(--right-drawer-text-color-default, var(--navigator-text-color, var(--c8y-right-drawer-text-color-default)));
$drawer-separator-color: var(--c8y-right-drawer-separator-color);
$drawer-background-active: var(--c8y-right-drawer-background-active);
$drawer-border-selected: var(--c8y-right-drawer-border-selected);
$drawer-legend: var(--right-drawer-text-muted, var(--c8y-right-drawer-text-color-muted));

/* change the used icons. Available options are:
-'white'for using the same colors as .c8y-icon-white
-'duo'for using the same colors as .c8y-icon-duocolor
-'none' to use the default $drawer-color
*/
$drawer-c8y-icon: 'none';


/* MAIN HEADER */
$headerColor: var(--header-color, var(--c8y-header-color));
$header-background-hover: var(--c8y-main-header-background-hover);
$header-background-active: var(--c8y-main-header-background-active);
$header-text-color: var(--header-text-color, var(--c8y-main-header-text-color-default));
$header-text-color-hover: var(--header-hover-color, var(--c8y-header-hover-color));
$header-border-color: var(--header-border-color, var(--c8y-main-header-border-color));
$header-shadow: var(--c8y-main-header-shadow);

/* TYPOGRAPHY COLORS */

/* Text - $text-color and $text-muted defined at top of file */
$headings-color: var(--c8y-headings-color);
$abbr-border-color: var(--c8y-abbr-border-color);
$blockquote-small-color: $text-muted;
$blockquote-border-color: var(--c8y-blockquote-border-color);

/* Headings */
$headings-small-color: $text-muted;

/* Links */
$link-color: var(--link-color, var(--c8y-component-color-link, var(--c8y-root-component-color-link)));
$link-color-hover: var(--link-hover-color, var(--c8y-component-color-link-hover, var(--c8y-root-component-color-link-hover)));

/* COMPONENTS */
$component-background-active: var(--c8y-component-background-active, var(--c8y-root-component-background-active));
$component-background-default: var(--c8y-component-background-default, var(--c8y-root-component-background-default));
$component-background-expanded: var(--c8y-component-background-expanded, var(--c8y-root-component-background-expanded));
$component-background-odd: var(--c8y-component-background-odd, var(--c8y-root-component-background-odd));
$component-background-expanded-gradient: var(--c8y-component-background-expanded-gradient, var(--c8y-root-component-background-expanded-gradient));
$component-background-disabled: var(--c8y-component-background-disabled, var(--c8y-root-component-background-disabled));
$component-background-hover: var(--c8y-component-background-hover, var(--c8y-root-component-background-hover));

$component-border-color: var(--c8y-component-border-color, var(--c8y-root-component-border-color));

$component-color-actions: var(--c8y-component-color-actions, var(--c8y-root-component-color-actions));
$component-color-actions-hover: var(--c8y-component-color-actions-hover, var(--c8y-root-component-color-actions-hover));
$component-color-active: var(--c8y-component-color-active, var(--c8y-root-component-color-active));
$component-color-default: var(--c8y-component-color-default, var(--c8y-root-component-color-default));
$component-color-expanded: var(--c8y-component-color-expanded, var(--c8y-root-component-color-expanded));
$component-color-link: $link-color;
$component-color-link-hover: $link-color-hover;
$component-color-odd: var(--c8y-component-color-odd, var(--c8y-root-component-color-odd));
$component-color-text-muted: var(--c8y-component-color-text-muted, var(--c8y-root-component-color-text-muted));
$component-color-accent: var(--c8y-component-color-accent, var(--c8y-root-component-color-accent));
$component-color-disabled: var(--c8y-component-color-disabled, var(--c8y-root-component-color-disabled));

$component-color-focus: var(--c8y-component-color-focus, var(--c8y-root-component-color-focus));
$component-background-focus: var(--c8y-component-background-focus, var(--c8y-root-component-background-focus));

$component-actions-opacity: var(--c8y-component-actions-opacity, var(--c8y-root-component-actions-opacity));

$component-form-label-color: var(--c8y-component-form-label-color, var(--c8y-form-label-color));
$component-form-legend-color: var(--c8y-component-form-legend-color, var(--c8y-form-legend-color));

$component-form-control-border-color: var(--c8y-component-form-control-border-color, var(--c8y-form-control-border-color-default));
$component-placeholder-color: var(--c8y-component-placeholder-color, var(--c8y-root-component-placeholder-color));

$component-accent-color: var(--c8y-component-accent-color, var(--c8y-root-component-accent-color));

$component-brand-primary: var(--c8y-component-brand-primary, var(--c8y-root-component-brand-primary));
$component-realtime-added: var(--c8y-component-realtime-added, var(--c8y-root-component-realtime-added));
$component-pulse-color: var(--c8y-component-pulse-color, var(--c8y-root-component-pulse-color));
$component-spinner-color: var(--c8y-component-spinner-color, var(--c8y-root-component-spinner-color));

$component-disabled-opacity: var(--c8y-component-disabled-opacity, var(--c8y-root-component-opacity-disabled));

$component-icon-white-color-light: var(--c8y-component-icon-white-color-light, var(--c8y-root-component-icon-white-color-light, $brand-primary-light));
$component-icon-white-color-dark: var(--c8y-component-icon-white-color-dark, var(--c8y-root-component-icon-white-color-dark, $palette-high));
$component-icon-dark-color-light: var(--c8y-component-icon-dark-color-light, var(--c8y-root-component-icon-dark-color-light, $brand-primary-light));
$component-icon-dark-color-dark: var(--c8y-component-icon-dark-color-dark, var(--c8y-root-component-icon-dark-color-dark, $brand-primary-dark));
$component-icon-color: var(--c8y-component-icon-color, var(--c8y-root-component-icon-color));

$component-scrollbar-thumb-default: var(--c8y-component-scrollbar-thumb-default, var(--c8y-root-component-scrollbar-thumb-default));
$component-scrollbar-thumb-hover: var(--c8y-component-scrollbar-thumb-hover, var(--c8y-root-component-scrollbar-thumb-hover));
$component-scrollbar-track: var(--c8y-component-scrollbar-track, var(--c8y-root-component-scrollbar-track));

/* Icons */
$icon-white-color-light: $component-icon-white-color-light;
$icon-white-color-dark: $component-icon-white-color-dark;
$icon-dark-color-light: $component-icon-dark-color-light;
$icon-dark-color-dark: $component-icon-dark-color-dark;

/* Page sticky header */
$page-sticky-header-background-default: var(--c8y-page-sticky-header-background-default);
$page-sticky-header-color-default: var(--c8y-page-sticky-header-color-default);
$page-sticky-header-color-hover: var(--c8y-page-sticky-header-color-hover);
$page-sticky-header-color-active: var(--c8y-page-sticky-header-color-active);

/* Layout */
$body-background-color: var(--body-background-color, var(--c8y-body-background-color));

$hr-border: $component-border-color;

$spinner-color: $component-spinner-color;

$expanded-bg-color: $component-background-expanded;

// realtime pulse color
$pulse-color: $component-pulse-color;

//SELECTIZE COLORS
// ** from selectize-vars.less
$selectize-color-text: $form-control-color-default;
$selectize-color-border: $form-control-border-color-default;
$selectize-color-highlight: var(--c8y-brand-7);
$selectize-color-input: $palette-high;
$selectize-color-input-full: $selectize-color-input;
$selectize-color-disabled: $gray-100;
$selectize-color-item: $gray-90;
$selectize-color-item-text: $selectize-color-text;
$selectize-color-item-border: $gray-80;
$selectize-color-item-active: $gray-90;
$selectize-color-item-active-text: $component-color-active;
$selectize-color-item-active-border: $gray-80;
$selectize-color-dropdown: $component-background-default;
$selectize-color-dropdown-border: $selectize-color-border;
$selectize-color-dropdown-border-top: $component-background-default;
$selectize-color-dropdown-item-active: $component-background-active;
$selectize-color-dropdown-item-active-text: $component-color-active;
$selectize-color-dropdown-item-create-text: $selectize-color-dropdown-item-active-text;
$selectize-color-dropdown-item-create-active-text: $selectize-color-dropdown-item-active-text;
$selectize-color-optgroup: $selectize-color-dropdown;
$selectize-color-optgroup-text: $selectize-color-text;
$selectize-arrow-color: $component-brand-primary;