$dark-theme: false !default;
$field-size: 2 !default;
$display-label-background: true !default;

/* ---------------------------------------
		Import library files
--------------------------------------- */
@import "mixins"; // Basic functions that compile into CSS
@import "functions"; // Functions that return a value (e.g. a value of a CSS property)
@import "customer-override";
@import "colors";
@import "configuration";

// Classlists - TreeGrid
$classlist-tree-grid-row-height: 35px;
$classlist-tree-grid-function-button-size: 26px;
$classlist-tree-grid-function-button-svg-size: 24px;

/* --------------------------------------- 
		Generic portal variables
--------------------------------------- */
// Temporary variables for update
$global-border-radius: 10px;
$global-padding: 15px;
$global-margin: 15px;

// Main colors
//$color-primary: color(primary);
//$color-secondary: color(secondary);
// $color-accent: color(accent);
// $color-subtle: color(subtle);

// Background colors
$global-background-color-default: color(background-color-default);
$background-color-translucent-default: color(background-color-translucent-default);
$background-item-color-default: color(background-item-color-default);
$background-item-color-read-only: color(background-item-color-read-only);

//Drop shadow
$global-box-shadow: 0px 0px 15px color(box-shadow-color);

// Foreground colors / Text colors
$text-color-default: color(text-color-default);
$text-color-inverse: color(text-color-inverse);
$text-color-placeholder: color(text-color-placeholder);

// Fonts
$line-height-default: 1.5;
$font-size-small: 12px !default;
$line-height-small: $line-height-default;
$font-size-base: 14px !default;
$line-height-base: $line-height-default;
$font-size-medium: 16px !default;
$line-height-medium: $line-height-default;
$font-size-medium-large: 18px !default;
$line-height-medium-large: $line-height-default;
$font-size-large: 20px !default;
$line-height-large: $line-height-default;
$font-size-xxl: 24px !default;
$line-height-xxl: $line-height-default;
$font-size-xxxl: 32px !default;
$line-height-xxxl: $line-height-default;
$font-family-default: "Red Hat Text", sans-serif;
//$font-family-default: "Open Sans", sans-serif;
$font-weight-default: normal !default;
$font-weight-bold: 600 !default;

$font-family-p: $font-family-default;
$font-size-p: $font-size-base;
$line-height-p: $line-height-default;
$font-weight-p: $font-weight-default;

$font-family-h1: $font-family-default;
$font-size-h1: $font-size-large;
$line-height-h1: $line-height-default;
$font-weight-h1: inherit;

$font-family-h2: $font-family-default;
$font-size-h2: $font-size-medium;
$line-height-h2: $line-height-default;
$font-weight-h2: inherit;

$font-text-decoration-a: underline;
$font-weight-a: inherit;

$dbq-element-header-5: color(dbq-element-header-5);

// Padding & margin
$padding-default: 15px;
$padding-horizontal-default: $padding-default * 2;
$padding-vertical-default: $padding-default * 2;
$margin-default: 15px;
$margin-horizontal-default: $margin-default * 2;
$margin-vertical-default: $margin-default * 2;

// SVG
$svg-icon-size: 24px;

// Borders
$global-border-color: color(border-color);
$global-border-color-light: color(neutral, 95);
$border-default: 2px solid color(neutral, 95);
$border-focus-default: 2px solid color(neutral, 90);
$border-radius-default: 10px !default;

// Forms
$height-input: 50px;
$font-size-input-default: $font-size-base;
$line-height-input: $line-height-default;
$background-button-default: color(primary);
$background-button-disabled: color(background-button-disabled);
$text-color-button-default: $color-white;
$border-radius-button-default: $border-radius-default;
$elevated-background-color: color(elevated-background-color);

// Select
$select-option-background: color(select-option-background);

// TO-DO: Determine of variables below should be moved to respective CSS-file

// Input list
$input-list-item-background: color(input-list-item-background);
$input-list-item-even-background: color(input-list-item-even-background);
$input-list-active-background: color(input-list-active-background);

// Modal
$modal-header-background: color(modal-header-background);
$modal-header-border-color: color(modal-header-border-color);
$modal-header-color: color(modal-header-color);
$modal-footer-background: color(modal-footer-background);
$modal-footer-color: color(modal-footer-color);
$modal-footer-border-color: color(modal-footer-border-color);
$modal-body-background: color(modal-body-background);
$modal-label-background: color(modal-label-background);
$modal-label-color: color(modal-label-color);
$modal-border-color: color(modal-border-color);
$modal-disabled-color: color(modal-disabled-color);
$modal-input-background: color(modal-input-background);
$modal-input-color: color(modal-input-color);
$modal-input-disabled-color: color(modal-input-disabled-color);
$modal-error-background: color(modal-error-background);
$modal-error-border: color(modal-error-border);
$modal-error-color: color(modal-error-color);

// Workflow
$workflow-grid-color: color(workflow-grid-color);
$workflow-node-border-color: color(workflow-node-border-color);
$workflow-background: color(workflow-background);


// Kanban
$kanban-background: color(kanban-background);
$kanban-column-item-background: color(kanban-column-item-background);
$kanban-tile-background: color(kanban-tile-background);
$kanban-tile-tag-background: color(kanban-tile-tag-background);
$kanban-tile-tag-extra-background: color(kanban-tile-tag-extra-background);

// Calendar
$calendar-background: color(calendar-background);

// Background image
$background-image: url(../images/background.jpg) !default;
$background-image-position: $background-image-position-x $background-image-position-y;
$login-background-image: url(/Includes/Images/bkg_login.jpg) !default;

// Background overlay
$background-image-overlay: color(background-body-image-overlay);
$background-has-gradient: color(background-body-has-gradient);
$background-gradient-first-color: color(background-body-gradient-first-color);
$background-gradient-second-color: color(background-body-gradient-second-color);
$background-overlay-transparency: color(background-body-overlay-transparency);
$background-gradient-direction: color(background-body-gradient-direction);
$background-overlay-blur: color(background-overlay-blur);

// Loader
$loader-image: url(/DbqLibraries/DbqDeveloperTools/img/dbq-logo-gif-light.gif) !default;
$loader-background: color(loader-background);

/* --------------------------------------- 
		Login screens
--------------------------------------- */
$login-container-width: 480px;
$login-container-padding: $padding-default * 4;
$login-container-form-label-font-size: 14px;
$login-container-form-label-text-color: color(gray-1);
$login-container-form-label-font-weight: 600;
$login-container-form-label-line-height: 20px;
$login-container-form-form-description-font-size: $font-size-medium;
$login-container-form-form-description-text-color: color(primary);
$login-container-form-form-description-font-weight: 600;
$login-container-form-input-height: 50px;
$login-container-form-input-font-size: $font-size-input-default;
$login-container-form-input-text-color: color(gray-1);
$login-container-form-input-font-weight: 600;
$login-container-form-input-line-height: 20px;
$login-container-form-input-border: $border-default;
$login-container-form-input-border-focus: $border-focus-default;
$login-container-form-input-border-radius: $border-radius-default;
$login-container-form-input-margin: 5px 0 15px 0;
$login-container-form-input-padding: $padding-default;
$login-container-form-button-background: $background-button-default;
$login-container-form-button-text-color: $text-color-button-default;
$login-container-form-error-text-color: color(text-color-error);
$login-container-form-error-text-weight: 500;
$login-container-portal-title-font-size: $font-size-medium;
$login-container-portal-title-line-height: $line-height-default;
$login-container-portal-title-color: color(text-color-default); // Default text color
$login-container-copyright-font-size: $font-size-small;
$login-container-copyright-line-height: $line-height-default;
$login-container-copyright-color: color(gray-3);
$login-container-copyright-color-a: color(gray-3);
$login-container-copyright-color-a-hover: color(text-color-a-hover);

/* --------------------------------------- 
		Navigation bar
--------------------------------------- */
$navbar-height: 60px !default;
$navbar-logo-img: color(navbar-logo-img);
$navbar-logo-img-small: color(navbar-logo-img-small);
$navbar-background-color: transparent;
$navbar-border-bottom: none; // default value: 1px solid $color-gray-lighter;
$navbar-logo-width: inherit;
$navbar-menu-item-size: $navbar-height / 3;
$navbar-menu-item-vertical-margin: ($navbar-height - $navbar-menu-item-size) / 2;
$navbar-dropdown-menu-background-color: color(background-pop-up);
$navbar-dropdown-menu-border-radius: $border-radius-default; 
$navbar-dropdown-menu-padding: $padding-default;
$navbar-dropdown-menu-text-color: color(text-color-default);
$navbar-dropdown-menu-text-color-a: color(text-color-default);
$navbar-dropdown-menu-text-color-a-hover: color(primary);
$navbar-dropdown-border-color: color(gray-6);
$navbar-dropdown-menu-icon-color: color(text-color-default);
$navbar-dropdown-menu-icon-size: 20px;

// General
$wrapper-background: color(wrapper-background);
$switch-handle: color(switch-handle);

// Filters
$filter-tile-background: $global-background-color-default;


/* --------------------------------------- 
		Side bar
--------------------------------------- */
$sidebar-padding: $padding-default;
$sidebar-margin: $margin-default;
$sidebar-margin-vertical: $sidebar-margin / 2;
$sidebar-margin-horizontal: $sidebar-margin;
$sidebar-tile-border-radius: $border-radius-default;
$sidebar-tile-border-top: 0;
$sidebar-tile-border-bottom: 0;
$sidebar-tile-font-size: $font-size-base;
$sidebar-tile-font-weight: $font-weight-default;
$sidebar-tile-text-color: color(text-color-default);
$sidebar-tile-icon-size: 22px;
$sidebar-tile-icon-color: color(text-color-default);
$sidebar-tile-text-color-hover: color(text-color-default);
$sidebar-tile-icon-color-hover: color(text-color-default);
$sidebar-tile-text-color-active: color(text-color-sidebar-active);
$sidebar-tile-icon-color-active: color(text-color-sidebar-active);
$sidebar-scrollbar-border-radius: 10px;

// Variables for a non glass-effect side bar
$sidebar-background: color(sidebar-background);
$sidebar-overlay: color(sidebar-background);
$sidebar-background-sub-items: color(sidebar-background-sub-items);
$sidebar-tile-background: color(sidebar-tile-background);
$sidebar-tile-background-hover: color(sidebar-tile-background-hover);
$sidebar-tile-background-active: color(sidebar-tile-background-active);
$sidebar-tile-border: 0;
$sidebar-tile-drop-shadow: none;
$sidebar-tile-text-shadow: none;
$sidebar-scrollbar-width: 7.5px;
$sidebar-scrollbar-thumb-border-radius: $sidebar-scrollbar-width;
$sidebar-scrollbar-color: color(sidebar-scrollbar-color);
$sidebar-scrollbar-thumb-color: color(sidebar-scrollbar-thumb-color);
$sidebar-scrollbar-thumb-color-hover: color(sidebar-scrollbar-thumb-hover-color);

// Test to-do: remove
$sidebar-tile-background-hover: color(primary-tone, 95);

/* --------------------------------------- 
		Classlists
--------------------------------------- */
$classlist-header-background: color(classlist-header-background);
$classlist-background: color(classlist-background);
$classlist-background-active: color(classlist-background-active);
$classlist-background-highlight: color(classlist-background-highlight);
$classlist-color-active: color(classlist-color-active);
$classlist-row-border: 1px solid color(classlist-row-border);

/* --------------------------------------- 
		Classlists - TreeGrid
--------------------------------------- */
$classlist-tree-grid-scrollbar-background-color: color(classlist-tree-grid-scrollbar-background-color);
$classlist-tree-grid-scrollbar-navigation-button-color: color(classlist-tree-grid-scrollbar-navigation-button-color);
$classlist-tree-grid-scrollbar-track-background-color: color(classlist-tree-grid-scrollbar-track-background-color);
$classlist-tree-grid-scrollbar-thumb-background-color: color(classlist-tree-grid-scrollbar-thumb-background-color);
$classlist-tree-grid-scrollbar-thumb-border: color(classlist-tree-grid-scrollbar-thumb-border);

/* --------------------------------------- 
		Graphs
--------------------------------------- */
$graph-background: color(graph-background);
$graph-trans-background: color(graph-trans-background);
$graph-tile-background: color(graph-tile-background);
$graph-text: color(graph-text);
$graph-grid-line: color(graph-grid-line);
$graph-border-color: color(graph-border-color);
$graph-box-shadow: color(graph-box-shadow);

/* --------------------------------------- 
		Source Code Editor
--------------------------------------- */
$source-code-editor-background-color: color(source-code-editor-background-color);
$source-code-editor-border-color: color(source-code-editor-border-color);
$source-code-editor-line-number-background-color: color(source-code-editor-line-number-background-color);
$source-code-editor-line-number-text-color: color(source-code-editor-line-number-text-color);
$source-code-editor-default-text-color: color(source-code-editor-default-text-color);
$source-code-editor-selected-background-color: color(source-code-editor-selected-background-color);
$source-code-editor-selected-text-color: color(source-code-editor-selected-text-color);
$source-code-editor-selected-comment-text-color: color(source-code-editor-selected-comment-text-color);
$source-code-editor-tag-text-color: color(source-code-editor-tag-text-color);
$source-code-editor-attribute-text-color: color(source-code-editor-attribute-text-color);
$source-code-editor-property-text-color: color(source-code-editor-property-text-color);
$source-code-editor-atom-text-color: color(source-code-editor-atom-text-color);
$source-code-editor-number-text-color: color(source-code-editor-number-text-color);
$source-code-editor-bracket-text-color: color(source-code-editor-bracket-text-color);
$source-code-editor-keyword-text-color: color(source-code-editor-keyword-text-color);
$source-code-editor-builtin-text-color: color(source-code-editor-builtin-text-color);
$source-code-editor-comment-text-color: color(source-code-editor-comment-text-color);
$source-code-editor-string-text-color: color(source-code-editor-string-text-color);
$source-code-editor-cursor-color: color(source-code-editor-cursor-color);

/* --------------------------------------- 
		Popup Menu
--------------------------------------- */
$popup-menu-background: color(popup-menu-background);
$popup-menu-background-color: color(popup-menu-background);
$popup-menu-hover-background: color(popup-menu-background);
$popup-menu-border-color: color(popup-menu-border-color);
$popup-menu-box-shadow: color(popup-menu-box-shadow);

// Massive legend
$legend-background-color: unset;
$legend-background: color(popup-menu-trans-background);

/* --------------------------------------- 
		Class list nav tabs
--------------------------------------- */


/* --------------------------------------- 
		Breadcrumbs
--------------------------------------- */
$breadcrumbs-padding: $padding-default;
$breadcrumbs-margin: $margin-default;
$breadcrumbs-background: color(breadcrumbs-background-color);
$breadcrumbs-text-color: $color-white;
$breadcrumbs-text-color-hover: $color-white;
$breadcrumbs-font-size: $font-size-small;
$breadcrumbs-font-weight: $font-weight-bold;
$breadcrumbs-line-height: $line-height-default;
$breadcrumbs-icon-height: $padding-default;
$breadcrumbs-icon-width: $padding-default;

/* --------------------------------------- 
		Classlist
--------------------------------------- */
$classlists-header-document-padding: ($padding-default * 2) $padding-default;
$classlists-header-document-margin: 0;
$classlists-header-document-background: $color-primary;
$classlists-header-document-header-size: $font-size-xxxl;
$classlists-header-document-header-color: $color-white;
$classlists-header-document-intro-text-size: $font-size-medium;
$classlists-header-document-intro-text-color: $color-white;
$classlists-folders-padding: $padding-default;
$classlists-folders-margin: $margin-default;
$classlists-folders-background: transparent;
$classlists-folder-tile-background: color(classlist-folder-tile-background);
$classlists-folder-tile-background-hover: color(classlist-folder-tile-background-hover);
$classlists-folder-tile-drop-shadow: 0px 3px 7px RGBA(0, 24, 62, 0.05);
$classlists-folder-tile-border: color(classlists-folder-tile-border);
$classlists-folder-tile-icon-size: 24px;
$classlists-folder-tile-icon-padding: 0;
$classlists-folder-tile-icon-margin: $margin-default;
$classlists-folder-tile-icon-background: color(classlist-folder-tile-icon-background);
$classlists-folder-tile-icon-color: $color-white;
$classlists-folder-tile-header-color: $color-white;
$classlists-folder-tile-header-font-size: $font-size-medium;
$classlists-folder-tile-header-font-weight: $font-weight-bold;
$classlists-folder-tile-text-color: color(text-color-default);
$classlists-folder-tile-text-font-size: 12px;
$classlists-folder-tile-text-line-height: $line-height-default;
$classlists-folder-tile-text-font-weight: $font-weight-default;
$classlists-folder-tile-text-shadow: none;
$classlists-folder-tile-text-color-hover: color(text-color-default);

// Kennisbank
$dbqkbc-folder-tile-icon-size: 80px;
$dbqkbc-folder-tile-icon-padding: 0;
$dbqkbc-folder-tile-icon-margin: 15px;
$dbqkbc-folder-tile-icon-background: color(dbqkbc-folder-tile-icon-background);
$dbqkbc-folder-tile-header-color: color(text-color-default);
$dbqkbc-folder-tile-header-font-size: 16px;
$dbqkbc-folder-tile-header-font-weight: 700;
$dbqkbc-folder-tile-text-color: 12px;
$dbqkbc-folder-tile-text-shadow: 0px 0px 10px RGBA(0, 0, 0, 0.2);
$dbqkbc-folder-tile-text-line-height: 1.5;
$dbqkbc-folder-tile-drop-shadow: 0 0px 20px 0 RGBA(0, 0, 0, 0.1);

// Tiled list
$dbqdcltl-folder-tile-icon-size: 80px;
$dbqdcltl-folder-tile-icon-padding: 0;
$dbqdcltl-folder-tile-icon-margin: 15px;
$dbqdcltl-folder-tile-icon-background: color(dbqdcltl-folder-tile-icon-background);
$dbqdcltl-folder-tile-header-color: color(text-color-default);
$dbqdcltl-folder-tile-header-font-size: 16px;
$dbqdcltl-folder-tile-header-font-weight: 700;
$dbqdcltl-folder-tile-text-color: 12px;
$dbqdcltl-folder-tile-text-shadow: 0px 0px 10px RGBA(0, 0, 0, 0.2);
$dbqdcltl-folder-tile-text-line-height: 1.5;
$dbqdcltl-folder-tile-drop-shadow: 0 0px 15px 0 color(dbqdcltl-folder-tile-drop-shadow);
$dbqdcltl-folder-tile-icon-color: $color-white;

// Sidebar Buttons
$sidebar-button-transparency: color(sidebar-button-transparency);
$sidebar-button-background-color: color(sidebar-button-background-color);
$sidebar-button-hover-background-color: color(sidebar-button-hover-background-color);
$sidebar-button-active-background-color: color(sidebar-button-active-background-color);
$sidebar-button-text-color: color(sidebar-button-text-color);
$sidebar-button-hover-text-color: color(sidebar-button-hover-text-color);
$sidebar-button-active-text-color: color(sidebar-button-active-text-color);
$sidebar-button-hover-transparency: color(sidebar-button-hover-transparency);
$sidebar-button-active-transparency: color(sidebar-button-active-transparency);

/* --------------------------------------- 
		Download Manager
--------------------------------------- */
$download-manager-background-color: color(background-color-default);
$download-manager-width: 400px;
$download-manager-offset: $margin-default;
$download-manager-border-radius: 25px;
$download-manager-divider-color: color(background-item-color-default);
$download-manager-title-color: color(text-color-default);

$download-manager-item-background-color: color(background-item-color-default);
$download-manager-item-progress-bar-color: $color-primary;

$download-manager-button-size: 30px;
$download-manager-button-background-color: $color-primary;
$download-manager-button-svg-color: $color-white;

/* --------------------------------------- 
		SelectTypePopup
--------------------------------------- */

$select-type-popup-output-background-color: $global-background-color-default;
$select-type-popup-output-border-color: $background-item-color-default;
$select-type-popup-output-border-color-hover: $color-gray-lighter;
$select-type-popup-output-max-height: 200px;

$select-type-popup-invalid-color: $modal-error-border; 

/* ---------------------------------------------------------
		Code below from variables-new - To-do: cleanup/merge
------------------------------------------------------------ */

// Light / Dark mode dependable variables
$text-color-default: color(text-color-default);
$text-color-inverse: color(text-color-inverse);
$switch-handle: color(switch-handle);

$dropdown-background-color: color(background-color);
$dropdown-text-color: color(dropdown-text-color);

$dbq-left-column-background-overlay: color(dbq-left-column-background-overlay);
$dbq-right-column-background-color: color(dbq-right-column-background-color);
@if ($background-image-full-screen == false) {
	$dbq-right-column-background-color: color(dbq-right-column-background-color-no-image);
}

$dbq-left-column-background-color: color(dbq-left-column-background-color);
@if ($background-mode == 0) {
	$dbq-left-column-background-color: color(dbq-left-column-background-color-no-transparency);
}

// Left menu list
$dbqft-list-collapse-button-background-color: color(dbqft-list-collapse-button-background-color);
$dbqft-list-item-color: color(dbqft-list-item-color);
$dbqft-list-item-hover-background-color: color(dbqft-list-item-hover-background-color);
$dbqft-list-item-active-background-color: color(dbqft-list-item-active-background-color);

// Logo
//$navbar-logo-img: color(navbar-logo-img);
//$navbar-logo-img-small: color(navbar-logo-img-small);