/* ---------------------------------------
		Import library files
--------------------------------------- */
@use "sass:color";
@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";
@import "variables";

// Custom color sets
$document-editor-colors-light: (
    document-editor-background-color: $render-engine-background-color,
    document-editor-button-disabled-background-color: $color-neutral-90,
    document-editor-input-field-disabled-label-color: $color-neutral-90,
    document-editor-input-field-disabled-background-color: $color-neutral-95,
    document-editor-input-field-disabled-border-color: $color-neutral-90,
    document-editor-input-field-disabled-text-color: $color-neutral-70,
    document-editor-element-block-border: $color-neutral-90,
    document-editor-tab-bar-button-color-disabled: $color-neutral-40
);

$document-editor-colors-dark: (
    document-editor-background-color: $render-engine-background-color,
    document-editor-button-disabled-background-color: $color-neutral-30,
    document-editor-input-field-disabled-label-color: $color-neutral-30,
    document-editor-input-field-disabled-background-color: $color-neutral-25,
    document-editor-input-field-disabled-border-color: $color-neutral-30,
    document-editor-input-field-disabled-text-color: $color-neutral-50,
    document-editor-element-block-border: $color-neutral-20,
    document-editor-tab-bar-button-color-disabled: $color-neutral-70
);

$document-editor-error-color: #f40006; // This color was copied from _canvas-control.scss

// Z-indexes
$document-editor-layer-bottom-z-index: 0;
$document-editor-layer-middle-z-index: 1;
$document-editor-layer-top-z-index: 2;
$document-editor-layer-loading-view-z-index: 3;

// Layout and sizing variables
$document-editor-default-margin: $margin-default;
$document-editor-header-height: 52px; 
$document-editor-side-menu-width: 336px;
$document-editor-tab-bar-width: 56px;
$document-editor-button-height: 30px;
$document-editor-tab-bar-button-border-radius: $global-border-radius;
$document-editor-element-drop-indicator-height: 2px;

// Colors
$document-editor-background-color: $color-layer-1; //custom-color(document-editor-background-color, $document-editor-colors-light, $document-editor-colors-dark);
$document-editor-side-menu-background-color: $color-layer-2;
$document-editor-toolbar-background-color: $color-layer-2;
$document-editor-tab-bar-background-color: $color-layer-3;
$document-editor-button-background-color: $color-primary;
$document-editor-button-disabled-background-color: custom-color(document-editor-button-disabled-background-color, $document-editor-colors-light, $document-editor-colors-dark);
$document-editor-button-text-color: $color-white;
$document-editor-tab-bar-button-background-color-hover: $color-subtle;
$document-editor-tab-bar-button-background-color-active: color(primary-tone, 90);
$document-editor-tab-bar-button-color-disabled: custom-color(document-editor-tab-bar-button-color-disabled, $document-editor-colors-light, $document-editor-colors-dark);
$document-editor-input-field-label-color: $text-color-default;
$document-editor-input-field-background-color: $color-layer-0;
$document-editor-input-field-border-color: $global-border-color;
$document-editor-input-field-text-color: $text-color-default;
$document-editor-input-field-disabled-label-color: custom-color(document-editor-input-field-disabled-label-color, $document-editor-colors-light, $document-editor-colors-dark);
$document-editor-input-field-disabled-background-color: custom-color(document-editor-input-field-disabled-background-color, $document-editor-colors-light, $document-editor-colors-dark);
$document-editor-input-field-disabled-border-color: custom-color(document-editor-input-field-disabled-border-color, $document-editor-colors-light, $document-editor-colors-dark);
$document-editor-input-field-disabled-text-color: custom-color(document-editor-input-field-disabled-text-color, $document-editor-colors-light, $document-editor-colors-dark);
$document-editor-element-drop-indicator-color: #1a73e8;
$document-editor-element-function-buttons-container-background-color: $color-layer-3;
$document-editor-element-function-button-icon-color: $text-color-default;
$document-editor-element-function-button-icon-hover-color: $color-primary;
$document-editor-element-function-button-delete-icon-hover-color: $document-editor-error-color;
$document-editor-element-drag-button-background-color:$color-layer-3;
$document-editor-element-drag-button-icon-color: $text-color-default;
$document-editor-element-block-border: custom-color(document-editor-element-block-border, $document-editor-colors-light, $document-editor-colors-dark);


// Note KWI: Once all variables are set, reorganize them by type so that variables of the same type are grouped together (instead of, for example, listing only colors).