@import "functions/_index.scss";
@import "_bootstrap-overrides.scss";
@import "../modules/bootstrap/scss/_functions.scss";
@import "../modules/bootstrap/scss/_variables.scss";


// Options
$enable-rounded: $enable-rounded !default;
$enable-shadows: $enable-shadows !default;
$enable-gradients: $enable-gradients !default;
$enable-transitions: $enable-transitions !default;
$enable-flex-classes: true !default;
$enable-grid-classes: true !default;

$use-background-clip: false !default;
$use-calc-badge-size: true !default;
$use-picker-select-width: false !default;


// Spacing
$spacer: $spacer !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;

$spacing: (
    0: 0,
    1: .25rem,
    2: .5rem,
    3: .75rem,
    4: 1rem,
    5: 1.25rem,
    6: 1.5rem,
    7: 1.75rem,
    8: 2rem,
    9: 2.25rem,
    10: 2.5rem,
    11: 2.75rem,
    12: 3rem,
    13: 3.25rem,
    14: 3.5rem,
    15: 3.75rem,
    16: 4rem,
    17: 4.25rem,
    18: 4.5rem,
    19: 4.75rem,
    20: 5rem,
    21: 5.25rem,
    22: 5.5rem,
    23: 5.75rem,
    24: 6rem,
    xs: .25rem,
    sm: .5rem,
    md: .75rem,
    lg: 1rem,
    xl: 1.5rem,
    thin: .125rem,
    hair: .0625rem
) !default;


// Icons
$icon-size: 16px !default;
$icon-size-lg: 32px !default;
$icon-spacing: ($spacer / 2) !default;

/// The URL to the icon font that will be used by the theme
/// The default value of `null` embeds the package font with a `data:` URL
/// @group icons
$icon-font-url: null !default;


// Metrics
$padding-x: $spacer !default;
$padding-y: $spacer / 2 !default;
$padding-x-sm: $padding-x / 2 !default;
$padding-y-sm: $padding-y / 2 !default;
$padding-x-lg: $padding-x * 1.5 !default;
$padding-y-lg: $padding-y * 1.5 !default;

/// Border radius for all components.
$border-radius: $border-radius !default;
$border-radius-sm: $border-radius-sm !default;
$border-radius-lg: $border-radius-lg !default;

$panel-padding-x: $card-spacer-x !default;
$panel-padding-y: $card-spacer-y !default;

$header-padding-x: $card-spacer-x !default;
$header-padding-y: $card-spacer-y !default;

$nav-item-margin: 0px !default;
$nav-item-padding-x: $nav-link-padding-x !default;
$nav-item-padding-y: $nav-link-padding-y !default;

$header-cell-padding-x: $table-cell-padding !default;
$header-cell-padding-y: $table-cell-padding !default;
$cell-padding-x: $table-cell-padding !default;
$cell-padding-y: $table-cell-padding !default;
$cell-padding: $table-cell-padding !default;
$cell-padding-sm: $table-cell-padding-sm !default;

$zindex-popup: 1 !default;
$zindex-window: 2 !default;


// Color settings
$is-dark-theme: false;

$white: #ffffff !default;
$black: #000000 !default;

// Deprecated
/// The color that focuses the user attention.
/// @deprecated Will be removed in v5. Use `$primary` variable instead.
/// @group color-system
/// @type Color
$accent: $primary !default;
/// The color used along with the primary color denoted by $primary.
/// @deprecated Will be removed in v5. Use `$primary-contrast` variable instead.
/// @group color-system
/// @type Color
$accent-contrast: contrast-wcag( $accent ) !default;


// Theme colors
/// The color that focuses the user attention.
/// Used for primary buttons and for elements of primary importance across the theme.
/// @group color-system
/// @type Color
$primary: $accent !default;
$primary-lighter: tint( $primary, 2 ) !default;
$primary-darker: shade( $primary, 2 ) !default;

/// The color used along with the primary color denoted by $primary.
/// Used to provide contrast between the background and foreground colors.
/// @group color-system
/// @type Color
$primary-contrast: $accent-contrast !default;

/// The secondary color of the theme.
/// @group color-system
/// @type Color
$secondary: $secondary !default;
$secondary-lighter: tint( $secondary, 2 ) !default;
$secondary-darker: shade( $secondary, 2 ) !default;

/// The color used along with the secondary color denoted by $secondary.
/// Used to provide contrast between the background and foreground colors.
/// @group color-system
/// @type Color
$secondary-contrast: contrast-wcag( $secondary ) !default;

/// The tertiary color of the theme.
/// @group color-system
/// @type Color
$tertiary: $purple !default;
$tertiary-lighter: tint( $tertiary, 2 ) !default;
$tertiary-darker: shade( $tertiary, 2 ) !default;

/// The color used along with the tertiary color denoted by $tertiary.
/// Used to provide contrast between the background and foreground colors.
/// @group color-system
/// @type Color
$tertiary-contrast: contrast-wcag( $tertiary ) !default;

/// The color for informational messages and states.
/// @group color-system
/// @type Color
$info: $info !default;
$info-lighter: tint( $info, 2 ) !default;
$info-darker: shade( $info, 2 ) !default;

/// The color for success messages and states.
/// @group color-system
/// @type Color
$success: $success !default;
$success-lighter: tint( $success, 2 ) !default;
$success-darker: shade( $success, 2 ) !default;

/// The color for warning messages and states.
/// @group color-system
/// @type Color
$warning: $warning !default;
$warning-lighter: tint( $warning, 2 ) !default;
$warning-darker: shade( $warning, 2 ) !default;

/// The color for error messages and states.
/// @group color-system
/// @type Color
$error: $danger !default;
$error-lighter: tint( $error, 2 ) !default;
$error-darker: shade( $error, 2 ) !default;

/// The dark color of the theme.
/// @group color-system
/// @type Color
$dark: $dark !default;

/// The light color of the theme.
/// @group color-system
/// @type Color
$light: $light !default;

/// Inverse color of the theme. Depending on the theme luminance dark or lught, it will be light or dark
/// @group color-system
$inverse: if( $is-dark-theme, $light, $dark ) !default;


$theme-colors: () !default;
// sass-lint:disable indentation
$theme-colors: map-merge((
    "primary": $primary,
    "secondary": $secondary,
    "tertiary": $tertiary,
    "info": $info,
    "success": $success,
    "warning": $warning,
    "error": $error,
    "dark": $dark,
    "light": $light,
    "inverse": $inverse
), $theme-colors);
// sass-lint:enable indentation


// Cursor utility classes
$cursors: ( auto, default, none, context-menu, help, pointer, progress, wait, cell, crosshair, text,
    vertical-text, alias, copy, move, no-drop, not-allowed, e-resize, n-resize, ne-resize, nw-resize,
    s-resize, se-resize, sw-resize, w-resize, ew-resize, ns-resize, nesw-resize, nwse-resize, col-resize,
    row-resize, all-scroll, zoom-in, zoom-out, grab, grabbing ) !default;


// Color constants
$rgba-transparent: rgba( 0, 0, 0, 0 );

$gradient-transparent-to-black: rgba( black, 0), black;
$gradient-transparent-to-white: rgba( white, 0), white;
$gradient-black-to-transparent: black, rgba( black, 0);
$gradient-white-to-transparent: white, rgba( white, 0);

$gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000;

$bg-color: $body-bg !default;
$text-color: $body-color !default;
$border-color: $component-border-color !default;

/// The background of the components' chrome area.
$base-bg: try-darken( $component-bg, 3% ) !default;
/// The text color of the components' chrome area.
$base-text: $component-color !default;
/// The border color of the components' chrome area.
$base-border: try-darken( $base-bg, 3% ) !default;
/// The gradient background of the components' chrome area.
$base-gradient: null !default;

/// The background of hovered items.
$hovered-bg: try-darken( $base-bg, 3% ) !default;
/// The text color of hovered items.
$hovered-text: $base-text !default;
/// The border color of hovered items.
$hovered-border: try-darken( $base-border, 12% ) !default;
/// The gradient background of hovered items.
$hovered-gradient: null !default;

/// The background of selected items.
$selected-bg: $primary !default;
/// The text color of selected items.
$selected-text: contrast-wcag( $selected-bg ) !default;
/// The border color of selected items.
$selected-border: try-darken( $selected-bg, 12% ) !default;
/// The gradient background of selected items.
$selected-gradient: null !default;


// TODO: refactor
$focused-shadow: null !default;
$primary-focused-shadow: null !default;

$transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default;


// Disabled mixin variables
$disabled-filter: grayscale(.1) !default;
$disabled-opacity: .65 !default;


// Generic styles

// Root styles
$body-bg: $body-bg !default;
$body-text: $body-color !default;

$app-bg: $body-bg !default;
$app-text: $body-text !default;
$app-border: contrast-yiq( $app-bg, $gray-300, $gray-700 ) !default;


// Components

// Component
/// Background color of a component.
/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !defualt;`.
/// @group component
$component-bg: $component-bg !default;
/// Text color of a component.
/// Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$grid-text: component-text !default;`.
/// @group component
$component-text: $component-color !default;
/// Border color of a component.
/// Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$grid-border: component-border !default;`.
/// @group component
$component-border: $component-border-color !default;


// Widget
/// Background color of a component.
/// @deprecated Will be removed in v5. Use `$component-bg` variable instead.
/// @group component
$widget-bg: $component-bg !default;
/// Text color of a component.
/// @deprecated Will be removed in v5. Use `$component-text` variable instead.
/// @group component
$widget-text: $component-text !default;
/// Border color of a component.
/// @deprecated Will be removed in v5. Use `$component-border` variable instead.
/// @group component
$widget-border: $component-border !default;


// Drop Hint
$equilateral-index: 1.7320508076 !default;
$equilateral-height: .8660254038 !default;

$drop-hint-arrow-size: 8px !default;
$drop-hint-arrow-spacing: ($drop-hint-arrow-size / 2) !default;
$drop-hint-line-h-width: 20px !default;
$drop-hint-line-h-height: 1px !default;
$drop-hint-line-v-width: $drop-hint-line-h-height !default;
$drop-hint-line-v-height: $drop-hint-line-h-width !default;

$drop-hint-bg: $primary !default;


// Panel
$panel-bg: $component-bg !default;
$panel-text: $component-text !default;
$panel-border: $component-border !default;


// Grouping
$grouping-header-bg: $component-text !default;
$grouping-header-text: $component-bg !default;
$grouping-border: $component-border !default;
$frozen-grouping-header-text: #6c757d !default;
$frozen-grouping-header-border-width: 2px !default;


// Header
$header-bg: contrast-wcag( $component-bg, $gray-100, $gray-900 ) !default;
$header-text: $component-text !default;
$header-border: $component-border !default;
$header-gradient: null !default;


// Node
$node-text: $base-text !default;
$node-bg: $base-bg !default;
$node-border: $base-border !default;
$node-gradient: null !default;

$node-hovered-text: $list-group-hover-color !default;
$node-hovered-bg: $list-group-hover-bg !default;
$node-hovered-border: $node-hovered-bg !default;
$node-hovered-gradient: null !default;

$node-selected-text: $selected-text !default;
$node-selected-bg: $selected-bg !default;
$node-selected-border: $selected-border !default;
$node-selected-gradient: null !default;


// List item
$list-item-padding-x: $dropdown-item-padding-x !default;
$list-item-padding-y: 3px !default;

$list-item-bg: null !default;
$list-item-text: $component-text !default;

$list-item-hovered-bg: $dropdown-link-hover-bg !default;
$list-item-hovered-text: $dropdown-link-hover-color !default;

$list-item-selected-bg: $dropdown-link-active-bg !default;
$list-item-selected-text: $dropdown-link-active-color !default;

$list-item-focused-shadow: inset 0 0 0 3px rgba( $list-item-text, .15 ) !default;

$list-container-shadow: 0 5px 10px 0 rgba(0, 0, 0, .06) !default;
$list-container-no-data-text: rgba( $component-text, .5 ) !default;


// Loading


// Placeholder
$placeholder-line-width: 100% !default;
$placeholder-line-height: 10px !default;
$placeholder-bg: rgba(0, 0, 0, .1) !default;


// Table


// Validator
$invalid-bg: null !default;
$invalid-text: $error !default;
$invalid-border: $error !default;
$invalid-shadow: 0 0 0 .2rem rgba($invalid-border, .25) !default;


$drag-clue-opacity: null !default;
$drag-clue-line-height: null !default;
$drag-clue-border-radius: null !default;


// Layout
$grid-cols: 12 !default;
$grid-rows: 10 !default;
$grid-gap: 10px !default;


// Backdrop (Overlay)
$backdrop-bg: $modal-backdrop-bg !default;
$backdrop-opacity: $modal-backdrop-opacity !default;


// Disabled Styling maps
$disabled-styling: () !default;
// sass-lint:disable indentation
$disabled-styling: map-merge((
    opacity: $disabled-opacity,
    filter: $disabled-filter
), $disabled-styling);
// sass-lint:enable indentation
