@use "sass:map";
@use "colors";
@use "sizes";

:root {

    --red-ui-primary-font: #{colors.$primary-font};
    --red-ui-primary-font-size: #{colors.$primary-font-size};
    --red-ui-monospace-font: #{colors.$monospace-font};

    --red-ui-primary-background: #{colors.$primary-background};

    --red-ui-secondary-background: #{colors.$secondary-background};
    --red-ui-secondary-background-selected: #{colors.$secondary-background-selected};
    --red-ui-secondary-background-inactive: #{colors.$secondary-background-inactive};
    --red-ui-secondary-background-hover: #{colors.$secondary-background-hover};
    --red-ui-secondary-background-disabled: #{colors.$secondary-background-disabled};

    --red-ui-tertiary-background: #{colors.$tertiary-background};

    --red-ui-shadow: #{colors.$shadow};

    // Header Height
    --red-ui-header-height: #{sizes.$header-height};

// Main body text
    --red-ui-primary-text-color: #{colors.$primary-text-color};
// UI control label text
    --red-ui-secondary-text-color: #{colors.$secondary-text-color};
    --red-ui-secondary-text-color-focus: #{colors.$secondary-text-color-focus};
    --red-ui-secondary-text-color-hover: #{colors.$secondary-text-color-hover};
    --red-ui-secondary-text-color-active: #{colors.$secondary-text-color-active};
    --red-ui-secondary-text-color-selected: #{colors.$secondary-text-color-selected};
    --red-ui-secondary-text-color-inactive: #{colors.$secondary-text-color-inactive};
    --red-ui-secondary-text-color-disabled: #{colors.$secondary-text-color-disabled};
    --red-ui-secondary-text-color-disabled-active: #{colors.$secondary-text-color-disabled-active};
    --red-ui-secondary-text-color-disabled-inactive: #{colors.$secondary-text-color-disabled-inactive};

// Sub label text
    --red-ui-tertiary-text-color: #{colors.$tertiary-text-color};
// Heading text
    --red-ui-header-text-color: #{colors.$header-text-color};

    --red-ui-text-color-error: #{colors.$text-color-error};
    --red-ui-text-color-warning: #{colors.$text-color-warning};
    --red-ui-text-color-success: #{colors.$text-color-success};
    --red-ui-text-color-code: #{colors.$text-color-code};
    --red-ui-text-color-link: #{colors.$text-color-link};


    --red-ui-primary-border-color: #{colors.$primary-border-color};
    --red-ui-secondary-border-color: #{colors.$secondary-border-color};
    --red-ui-tertiary-border-color: #{colors.$tertiary-border-color};

    --red-ui-border-color-error: #{colors.$border-color-error};
    --red-ui-border-color-warning: #{colors.$border-color-warning};
    --red-ui-border-color-success: #{colors.$border-color-success};

    --red-ui-form-background: #{colors.$form-background};
    --red-ui-form-placeholder-color: #{colors.$form-placeholder-color};
    --red-ui-form-text-color: #{colors.$form-text-color};
    --red-ui-form-text-color-disabled: #{colors.$form-text-color-disabled};
    --red-ui-form-input-focus-color: #{colors.$form-input-focus-color};
    --red-ui-form-input-border-color: #{colors.$form-input-border-color};
    --red-ui-form-input-border-selected-color: #{colors.$form-input-border-selected-color};
    --red-ui-form-input-border-error-color: #{colors.$form-input-border-error-color};
    --red-ui-form-input-background: #{colors.$form-input-background};
    --red-ui-form-input-background-disabled: #{colors.$form-input-background-disabled};
    --red-ui-form-button-background: #{colors.$form-button-background};

    --red-ui-form-tips-background: #{colors.$form-tips-background};


    --red-ui-text-editor-color: #{colors.$text-editor-color};
    --red-ui-text-editor-background: #{colors.$text-editor-background};
    --red-ui-text-editor-color-disabled: #{colors.$text-editor-color-disabled};
    --red-ui-text-editor-background-disabled: #{colors.$text-editor-background-disabled};
    --red-ui-text-editor-gutter-background: #{colors.$text-editor-gutter-background};
    --red-ui-text-editor-gutter-color: #{colors.$text-editor-gutter-color};
    --red-ui-text-editor-gutter-active-line-background: #{colors.$text-editor-gutter-active-line-background};
    --red-ui-text-editor-active-line-background: #{colors.$text-editor-active-line-background};
    --red-ui-text-editor-selection-background: #{colors.$text-editor-selection-background};

    --red-ui-event-log-background: #{colors.$event-log-background};
    --red-ui-event-log-color: #{colors.$event-log-color};
    --red-ui-event-log-active-line-background: #{colors.$event-log-active-line-background};
    --red-ui-event-log-selection-background: #{colors.$event-log-selection-background};




    --red-ui-list-item-color: #{colors.$list-item-color};
    --red-ui-list-item-secondary-color: #{colors.$list-item-secondary-color};
    --red-ui-list-item-background: #{colors.$list-item-background};
    --red-ui-list-item-background-disabled: #{colors.$list-item-background-disabled};
    --red-ui-list-item-background-hover: #{colors.$list-item-background-hover};
    --red-ui-list-item-background-selected: #{colors.$list-item-background-selected};
    --red-ui-list-item-border-selected: #{colors.$list-item-border-selected};

    --red-ui-tab-text-color-active: #{colors.$tab-text-color-active};
    --red-ui-tab-text-color-inactive: #{colors.$tab-text-color-inactive};
    --red-ui-tab-text-color-disabled-active: #{colors.$tab-text-color-disabled-active};
    --red-ui-tab-text-color-disabled-inactive: #{colors.$tab-text-color-disabled-inactive};

    --red-ui-tab-badge-color: #{colors.$tab-badge-color};
    --red-ui-tab-background: #{colors.$tab-background};
    --red-ui-tab-background-active: #{colors.$tab-background-active};
    --red-ui-tab-background-active-alpha: #{colors.$tab-background-active-alpha};
    --red-ui-tab-background-selected: #{colors.$tab-background-selected};
    --red-ui-tab-background-selected-alpha: #{colors.$tab-background-selected-alpha};
    --red-ui-tab-background-inactive: #{colors.$tab-background-inactive};
    --red-ui-tab-background-inactive-alpha: #{colors.$tab-background-inactive-alpha};
    --red-ui-tab-background-hover: #{colors.$tab-background-hover};
    --red-ui-tab-background-hover-alpha: #{colors.$tab-background-hover-alpha};

    --red-ui-palette-header-background: #{colors.$palette-header-background};
    --red-ui-palette-header-color: #{colors.$palette-header-color};
    --red-ui-palette-content-background: #{colors.$palette-content-background};


    --red-ui-workspace-button-background: #{colors.$workspace-button-background};
    --red-ui-workspace-button-background-hover: #{colors.$workspace-button-background-hover};
    --red-ui-workspace-button-background-active: #{colors.$workspace-button-background-active};

    --red-ui-workspace-button-color: #{colors.$workspace-button-color};
    --red-ui-workspace-button-color-disabled: #{colors.$workspace-button-color-disabled};
    --red-ui-workspace-button-color-focus: #{colors.$workspace-button-color-focus};
    --red-ui-workspace-button-color-hover: #{colors.$workspace-button-color-hover};
    --red-ui-workspace-button-color-active: #{colors.$workspace-button-color-active};
    --red-ui-workspace-button-color-selected: #{colors.$workspace-button-color-selected};

    --red-ui-workspace-button-color-primary: #{colors.$workspace-button-color-primary};
    --red-ui-workspace-button-background-primary: #{colors.$workspace-button-background-primary};
    --red-ui-workspace-button-background-primary-hover: #{colors.$workspace-button-background-primary-hover};

    --red-ui-workspace-button-color-focus-outline: #{colors.$workspace-button-color-focus-outline};

    --red-ui-shade-color: #{colors.$shade-color};

    --red-ui-popover-background: #{colors.$popover-background};
    --red-ui-popover-border: #{colors.$popover-border};
    --red-ui-popover-color: #{colors.$popover-color};
    --red-ui-popover-button-border-color: #{colors.$popover-button-border-color};
    --red-ui-popover-button-border-color-hover: #{colors.$popover-button-border-color-hover};



    --red-ui-diff-text-header-color: #{colors.$diff-text-header-color};
    --red-ui-diff-text-header-background: #{colors.$diff-text-header-background};
    --red-ui-diff-state-color: #{colors.$diff-state-color};
    --red-ui-diff-state-prefix-color: #{colors.$diff-state-prefix-color};
    --red-ui-diff-state-added: #{colors.$diff-state-added};
    --red-ui-diff-state-deleted: #{colors.$diff-state-deleted};
    --red-ui-diff-state-changed: #{colors.$diff-state-changed};
    --red-ui-diff-state-changed-background: #{colors.$diff-state-changed-background};
    --red-ui-diff-state-unchanged: #{colors.$diff-state-unchanged};
    --red-ui-diff-state-unchanged-background: #{colors.$diff-state-unchanged-background};

    --red-ui-diff-state-conflicted: #{colors.$diff-state-conflicted};
    --red-ui-diff-state-moved: #{colors.$diff-state-moved};
    --red-ui-diff-state-conflict: #{colors.$diff-state-conflict};
    --red-ui-diff-state-conflict-background: #{colors.$diff-state-conflict-background};

    --red-ui-diff-state-added-background: #{colors.$diff-state-added-background};
    --red-ui-diff-state-added-border: #{colors.$diff-state-added-border};
    --red-ui-diff-state-added-header-background: #{colors.$diff-state-added-header-background};
    --red-ui-diff-state-added-header-border: #{colors.$diff-state-added-header-border};

    --red-ui-diff-state-deleted-background: #{colors.$diff-state-deleted-background};
    --red-ui-diff-state-deleted-border: #{colors.$diff-state-deleted-border};
    --red-ui-diff-state-deleted-header-background: #{colors.$diff-state-deleted-header-background};
    --red-ui-diff-state-deleted-header-border: #{colors.$diff-state-deleted-header-border};

    --red-ui-diff-merge-header-color: #{colors.$diff-merge-header-color};
    --red-ui-diff-merge-header-background: #{colors.$diff-merge-header-background};
    --red-ui-diff-merge-header-border-color: #{colors.$diff-merge-header-border-color};

    --red-ui-menuBackground: #{colors.$menuBackground};
    --red-ui-menuDivider: #{colors.$menuDivider};
    --red-ui-menuColor: #{colors.$menuColor};
    --red-ui-menuActiveColor: #{colors.$menuActiveColor};
    --red-ui-menuActiveBackground: #{colors.$menuActiveBackground};
    --red-ui-menuDisabledColor: #{colors.$menuDisabledColor};
    --red-ui-menuHoverColor: #{colors.$menuHoverColor};
    --red-ui-menuHoverBackground: #{colors.$menuHoverBackground};
    --red-ui-menuCaret: #{colors.$menuCaret};

    --red-ui-view-navigator-background: #{colors.$view-navigator-background};

    --red-ui-view-lasso-stroke: #{colors.$view-lasso-stroke};
    --red-ui-view-lasso-fill: #{colors.$view-lasso-fill};

    --red-ui-view-background: #{colors.$view-background};
    --red-ui-view-grid-color: #{colors.$view-grid-color};

    --red-ui-node-label-color: #{colors.$node-label-color};
    --red-ui-node-port-label-color: #{colors.$node-port-label-color};
    --red-ui-node-border: #{colors.$node-border};
    --red-ui-node-border-unknown: #{colors.$node-border-unknown};
    --red-ui-node-border-placeholder: #{colors.$node-border-placeholder};
    --red-ui-node-background-placeholder: #{colors.$node-background-placeholder};

    --red-ui-node-port-background: #{colors.$node-port-background};
    --red-ui-node-port-background-hover: #{colors.$node-port-background-hover};
    --red-ui-node-icon-color: #{colors.$node-icon-color};
    --red-ui-node-icon-background-color: #{colors.$node-icon-background-color};
    --red-ui-node-icon-background-color-fill: #{colors.$node-icon-background-color-fill};
    --red-ui-node-icon-background-color-opacity: #{colors.$node-icon-background-color-opacity};
    --red-ui-node-icon-border-color: #{colors.$node-icon-border-color};
    --red-ui-node-icon-border-color-opacity: #{colors.$node-icon-border-color-opacity};

    --red-ui-node-config-background: #{colors.$node-config-background};
    --red-ui-node-config-icon-container-disabled: #{colors.$node-config-icon-container-disabled};

    --red-ui-node-link-port-background: #{colors.$node-link-port-background};

    --red-ui-node-status-error-border: #{colors.$node-status-error-border};
    --red-ui-node-status-error-background: #{colors.$node-status-error-background};
    --red-ui-node-status-changed-border: #{colors.$node-status-changed-border};
    --red-ui-node-status-changed-background: #{colors.$node-status-changed-background};

    @each $current-color in red green yellow blue grey gray {
        --red-ui-node-status-colors-#{"" + $current-color}: #{map.get(colors.$node-status-colors, $current-color)};
    }


    --red-ui-node-selected-color: #{colors.$node-selected-color};
    --red-ui-port-selected-color: #{colors.$port-selected-color};

    --red-ui-link-color: #{colors.$link-color};
    --red-ui-link-link-color: #{colors.$link-link-color};
    --red-ui-link-disabled-color: #{colors.$link-disabled-color};
    --red-ui-link-link-active-color: #{colors.$link-link-active-color};
    --red-ui-link-unknown-color: #{colors.$link-unknown-color};

    --red-ui-clipboard-textarea-background: #{colors.$clipboard-textarea-background};


    --red-ui-deploy-button-color: #{colors.$deploy-button-color};
    --red-ui-deploy-button-color-active: #{colors.$deploy-button-color-active};
    --red-ui-deploy-button-color-disabled: #{colors.$deploy-button-color-disabled};
    --red-ui-deploy-button-background: #{colors.$deploy-button-background};
    --red-ui-deploy-button-background-hover: #{colors.$deploy-button-background-hover};
    --red-ui-deploy-button-background-active: #{colors.$deploy-button-background-active};
    --red-ui-deploy-button-background-disabled: #{colors.$deploy-button-background-disabled};
    --red-ui-deploy-button-background-disabled-hover: #{colors.$deploy-button-background-disabled-hover};


    --red-ui-header-background: #{colors.$header-background};
    --red-ui-header-accent: #{colors.$header-accent};
    --red-ui-header-button-background-active: #{colors.$header-button-background-active};
    --red-ui-header-menu-color: #{colors.$header-menu-color};
    --red-ui-header-menu-color-disabled: #{colors.$header-menu-color-disabled};
    --red-ui-header-menu-heading-color: #{colors.$header-menu-heading-color};
    --red-ui-header-menu-sublabel-color: #{colors.$header-menu-sublabel-color};
    --red-ui-header-menu-background: #{colors.$header-menu-background};
    --red-ui-header-menu-item-hover: #{colors.$header-menu-item-hover};
    --red-ui-header-menu-item-border-active: #{colors.$header-menu-item-border-active};
    --red-ui-headerMenuItemDivider: #{colors.$headerMenuItemDivider};
    --red-ui-headerMenuCaret: #{colors.$headerMenuCaret};

    --red-ui-vcCommitShaColor: #{colors.$vcCommitShaColor};

    --red-ui-dnd-background: #{colors.$dnd-background};
    --red-ui-dnd-color: #{colors.$dnd-color};

    --red-ui-notification-border-default: #{colors.$notification-border-default};
    --red-ui-notification-border-success: #{colors.$notification-border-success};
    --red-ui-notification-border-warning: #{colors.$notification-border-warning};
    --red-ui-notification-border-error: #{colors.$notification-border-error};

    --red-ui-debug-message-background: #{colors.$debug-message-background};
    --red-ui-debug-message-background-hover: #{colors.$debug-message-background-hover};

    --red-ui-debug-message-text-color: #{colors.$debug-message-text-color};
    --red-ui-debug-message-text-color-meta: #{colors.$debug-message-text-color-meta};
    --red-ui-debug-message-text-color-object-key: #{colors.$debug-message-text-color-object-key};
    --red-ui-debug-message-text-color-msg-type-other: #{colors.$debug-message-text-color-msg-type-other};
    --red-ui-debug-message-text-color-msg-type-string: #{colors.$debug-message-text-color-msg-type-string};
    --red-ui-debug-message-text-color-msg-type-null: #{colors.$debug-message-text-color-msg-type-null};
    --red-ui-debug-message-text-color-msg-type-meta: #{colors.$debug-message-text-color-msg-type-meta};
    --red-ui-debug-message-text-color-msg-type-number: #{colors.$debug-message-text-color-msg-type-number};

    --red-ui-debug-message-border: #{colors.$debug-message-border};
    --red-ui-debug-message-border-hover: #{colors.$debug-message-border-hover};
    --red-ui-debug-message-border-warning: #{colors.$debug-message-border-warning};
    --red-ui-debug-message-border-error: #{colors.$debug-message-border-error};

    --red-ui-group-default-fill: #{colors.$group-default-fill};
    --red-ui-group-default-fill-opacity: #{colors.$group-default-fill-opacity};
    --red-ui-group-default-stroke: #{colors.$group-default-stroke};
    --red-ui-group-default-stroke-opacity: #{colors.$group-default-stroke-opacity};
    --red-ui-group-default-label-color: #{colors.$group-default-label-color};

    --red-ui-tourGuide-border: #{colors.$tourGuide-border};
    --red-ui-tourGuide-heading-color: #{colors.$tourGuide-heading-color};

    --red-ui-grip-color: #{colors.$grip-color};

    --red-ui-icons-flow-color: #{colors.$icons-flow-color};

    --red-ui-spinner-color: #{colors.$spinner-color};

    --red-ui-tab-icon-color: #{colors.$tab-icon-color};

    @each $current-color in 1 2 3 4 5 {
        --red-ui-user-profile-colors-#{"" + $current-color}: #{map.get(colors.$user-profile-colors, $current-color)};
    }
}