@import "./colors";

@function set-color($color) {
  @if (lightness($color) > 50) {
    @return $black-100;
  } @else {
    @return $white;
  }
}

// Framework colors
$primary: $indigo !default;
$secondary: $pink !default;
$tertiary: mix($primary, $black-100, 50%) !default;

$primary-reverse: set-color($primary) !default;
$secondary-reverse: set-color($secondary) !default;
$tertiary-reverse: set-color($tertiary) !default;

$info: $blue !default;
$danger: $red !default;
$success: $green !default;
$warning: $orange !default;

$base-theme: $white !default;
$base-invert: $black !default;

$base-bg: $base-theme !default;
$base-color: mix($gray, $base-invert, 5%) !default;
$base-muted: mix($muted, $base-invert, 50%) !default;
$base-component-bg: $white !default;
$base-border-color: #e9e9e9 !default;
$base-shadow-color: rgba($shadow, 0.2) !default; //TODO Watch out $shadow changed

// Dividers
$divider-bg: rgba($primary, 0.5) !default;
$divider-hilight: rgba($gray-dark, 0.75) !default;

// Table/List
$row-odd-bg: mix($gray, $base-theme, 5%) !default;
$row-even-bg: mix($gray, $base-theme, 9%) !default;

// Drawer/Sidebar
$sidebar-bg: $base-component-bg !default;
$sidebar-resizer: mix($primary, $base-theme, 70%) !default;
$sidebar-shim: rgba($shadow, 0.2) !default;

// Menu
$menu-hover-bg: mix($secondary, $base-theme, 50%) !default;
$menu-hover-color: set-color($menu-hover-bg) !default;
$menu-active-bg: transparent !default;
$menu-active-color: $primary !default;
$menu-active-border-color: mix($primary, $base-color, 50%) !default;
$menubar-bg: mix($gray, $base-theme, 5%) !default;

// Tree
$tree-hover-bg: mix($secondary, $base-theme, 50%) !default;
$tree-hover-color: $white !default;
$tree-active-bg: $secondary !default;
$tree-active-color: $white !default;

// Datagrid
$datagrid-head-bg: #fafafa !default;
$datagrid-head-color: $base-invert !default;
$datagrid-row-border-color: mix($gray, $base-theme, 25%) !default;

// Tooltip
$tooltip-bg: mix($primary, $base-theme, 70%) !default;
$tooltip-color: $white !default;

// Dialog
$dlg-header-active-bg: mix($primary, $base-theme, 80%) !default;
$dlg-header-active-color: $base-theme;
$dlg-header-inactive-bg: mix($gray, $base-theme, 25%) !default;
$dlg-header-inactive-color: $gray;

// Form Controls
$input-bg: $base-theme !default;
$input-color: $base-invert !default;
$input-placeholder: $gray !default;
$input-focus-color: $black-100 !default;
$input-error-bg: mix($danger, $base-theme, 4%) !default;
$input-error-color: $danger !default;
$input-valid-color: $success !default;
$input-focus-border-color: mix($secondary, $base-theme, 25%) !default;

// List
$list-item-hover-bg: rgba($primary, 0.15) !default;
$list-item-hover-color: $primary !default;
$list-item-active-bg: $primary !default;
$list-item-active-color: $primary-reverse !default;

// Toggle
$toggle-bg: mix($gray, $base-theme, 40%) !default;
$toggle-color: $base-color !default;
$toggle-on-bg: $gray-dark !default;
$toggle-on-color: $gray-light !default;

// Toolbar
$toolbar-bg: mix($gray, $base-theme, 9%) !default;

// Inputs
$input-placeholder: mix($gray, $base-theme, 50%) !default;

// Scrollbar
$scrollbar-bg: mix($primary, $base-theme, 25%) !default;
$scrollbar-bg-hover: mix($primary, $base-theme, 60%) !default;

//Button
$btn-bg: mix($base-theme, $base-invert, 99%) !default;
$btn-color: mix($btn-bg, $base-color, 30%) !default;
$btn-active: rgba(mix($btn-bg, $btn-color, 65%), 0.5) !default;

$step-timeline-valid-text: $white !default;
$step-timeline-valid-background: mix($primary, $white, 75%) !default;
$step-timeline-text: $gray-light !default;
$step-timeline-background: mix($primary, $white, 5%);
$step-timeline-in-process: $primary !default;

$import-data-footer: mix($primary, $white, 5%);

:root {
  --primary: #{$primary};
  --secondary: #{$secondary};
  --tertiary: #{$tertiary};

  --primary-reverse: #{$primary-reverse};
  --secondary-reverse: #{$secondary-reverse};
  --tertiary-reverse: #{$tertiary-reverse};

  --base-theme: #{$base-theme};
  --base-invert: #{$base-invert};

  --base-component-bg: #{$base-component-bg};

  --menu-active-bg: #{$menu-active-bg};
  --menubar-bg: #{$menubar-bg};

  --btn-bg: #{$btn-bg};
}
