// out: "../../../Default.qss"

//! The above line is for EasyLESS (VSCode extension) compile output location

// -----------------------------------------------------------------------------
// DEFAULT THEME
// All other themes derive from this, since LESS prioritizes the most recent
// variable definitions we can override only ones necessary.
// -----------------------------------------------------------------------------

// Includes
@import '../../_main.less';

// Image path relative to where this *.qss is output
@img-url: 'imgs/white';

// SETTINGS --------------------------------------------------------------------

@ui-contrast: 1.0; // multiplier
@border-contrast: 1.0; // multiplier

@hover-adjust-amount: 1.0; // multiplier
@pressed-adjust-amount: 1.0; // multiplier
@disabled-amount: 40%; // percentage range: 0-100%

@bold-titlebar-text: true; // bool
@bold-label-text: true; // bool
@bold-fxlabel-text: false; // bool

// COLORS ----------------------------------------------------------------------

@bg-color: #484848;

// Border
@border-color: darken(@bg-color, 16% * @border-contrast);
@dock-color: darken(@bg-color, 22%);
@dock-placeholder-color: #1aff00;

// Text
@text-color: #dfdfdf;
@text-color-active: rgb(239, 239, 239);
@text-color-inactive: fade(@text-color, 60%);
@text-color-disabled: fade(@text-color, @disabled-amount);

// Highlight
@hl-color: #4f7bc7;
@hl-text-color: white;
@lock-color: #d44a4a;
@preview-color: #C8C864;

// Label
@normal-label-color: #7fdbfc;
@success-label-color: #00ff00;
@error-label-color: #ff7b7b;
@fx-settings-label-color: #a0e680;

// Tooltip
@tooltip-bg-color: rgb(24, 24, 24);
@tooltip-border-color: rgb(130, 130, 130);
@tooltip-text-color: rgb(210, 210, 210);
@tooltip-padding: 2px;

// Icon Theme Colors
@icon-base-opacity: 0.8;
@icon-disabled-opacity: 0.3;
@icon-base-color: @text-color;
@icon-active-color: white;
@icon-selected-color: @icon-active-color;
@icon-on-color: @icon-active-color;

// Individual Icon Colors
@icon-preview-color: if(lightness(@preview-color) > 50%, black, white);
@icon-view-check-color: @icon-on-color;
@icon-lock-color: @icon-active-color;
@icon-keyframe-color: @icon-active-color;
@icon-keyframe-modified-color: @icon-active-color;
@icon-close-color: @icon-active-color;

// -----------------------------------------------------------------------------
// Tabs
// -----------------------------------------------------------------------------
@tabbar-bg-color: darken(@bg-color, 5% * @ui-contrast);

// Tab
@tab-bg-color: @tabbar-bg-color;
@tab-text-color: @text-color-inactive;
@tab-border-color: @border-color;

// Hover
@tab-bg-color-hover: lighten(@tab-bg-color, 8% * @hover-adjust-amount);
@tab-text-color-hover: @text-color-active;

// Selected
@tab-bg-color-selected: @bg-color;
@tab-text-color-selected: @text-color-active;

// -----------------------------------------------------------------------------
// Top Menubar / Rooms
// -----------------------------------------------------------------------------
@topbar-bg-color: @bg-color;

@menubar-item-bg-color-selected: @hl-color;
@menubar-item-bg-color-hover: lighten(@topbar-bg-color, 8% * @hover-adjust-amount);

// Rooms
@rooms-tab-bg-color: @tab-bg-color;
@rooms-tab-border-color: @tab-border-color;
@rooms-tab-text-color: @tab-text-color;

// Hover
@rooms-tab-bg-color-hover: lighten(@rooms-tab-bg-color, 8% * @hover-adjust-amount);
@rooms-tab-text-color-hover: @tab-text-color-hover;

// Selected
@rooms-tab-bg-color-selected: @hl-color;
@rooms-tab-text-color-selected: @hl-text-color;
@rooms-tab-bg-color-selected-hover: lighten(@rooms-tab-bg-color-selected, 8% * @hover-adjust-amount);

// -----------------------------------------------------------------------------
// Context Menu
// -----------------------------------------------------------------------------
@menu-bg-color: @bg-color;
@menu-border-color: @border-color;
@menu-separator-color: @menu-border-color;

// Item
@menu-text-color: @text-color;
@menu-checkbox-border-color: @checkbox-border-color;

// Hover
@menu-item-bg-color-selected: @hl-color;
@menu-item-text-color-selected: @hl-text-color;
@menu-checkbox-border-color-hover: @checkbox-bg-color;

// Checked
@menu-item-bg-color-checked: @menu-bg-color;
@menu-item-text-color-checked: @normal-label-color;
@menu-checkbox-border-color-checked: @checkbox-border-color-checked;
@menu-checkbox-text-color-selected: @text-color;

// Checked Hover
@menu-checkbox-border-color-checked-selected: @checkbox-border-color-checked;

// Checked Icon
@menu-icon-checked-bg-color: @hl-color;
@menu-icon-checked-border-color: @menu-icon-checked-bg-color;

// -----------------------------------------------------------------------------
// GroupBox
// -----------------------------------------------------------------------------
@groupbox-border-color: @border-color;
@groupbox-border-radius: 2px;

// -----------------------------------------------------------------------------
// Button
// -----------------------------------------------------------------------------
@button-h-padding: 12px;
@button-v-padding: 2px;

@button-text-color: @text-color;
@button-bg-color: lighten(@bg-color, 10%);

@button-border-color: @button-bg-color;
@button-border-radius: 2px;

// Hover
@button-text-color-hover: @button-text-color;
@button-bg-color-hover: lighten(@button-bg-color, 8% * @hover-adjust-amount);
@button-border-color-hover: @button-bg-color-hover;

// Pressed
@button-text-color-pressed: @button-text-color;
@button-bg-color-pressed: darken(@bg-color, 8% * @pressed-adjust-amount);
@button-border-color-pressed: @button-border-color;

// Checked
@button-text-color-checked: @normal-label-color;
@button-bg-color-checked: darken(@bg-color, 8% * @pressed-adjust-amount);
@button-border-color-checked: @button-border-color;

// Checked Hover
@button-bg-color-checked-hover: lighten(@button-bg-color-checked, 8% * @hover-adjust-amount);

// Focus
@button-text-color-focus: @hl-text-color;
@button-bg-color-focus: @hl-color;
@button-border-color-focus: @button-bg-color-focus;

// Focus Hover
@button-bg-color-focus-hover: lighten(@button-bg-color-focus, 8% * @hover-adjust-amount);
@button-border-color-focus-hover: @button-bg-color-focus-hover;

// Disabled
@button-bg-color-disabled: mix(@bg-color, @button-bg-color, @disabled-amount);
@button-border-color-disabled: fade(@button-bg-color-disabled, @disabled-amount);

// Scroll Buttons
@scroll-button-border-color: @border-color;
@scroll-button-border-color-hover: @scroll-button-border-color;
@scroll-button-border-color-pressed: @scroll-button-border-color;
@scroll-button-border-color-disabled: @scroll-button-border-color;

// Dialog Popup
@popup-dialog-button-frame-bg-color: @tabbar-bg-color;

// -----------------------------------------------------------------------------
// ComboBox
// -----------------------------------------------------------------------------
@combobox-border-color-focus: @hl-color;

// -----------------------------------------------------------------------------
// Tool Buttons
// -----------------------------------------------------------------------------
@toolbar-separator-color: @border-color;

@toolbutton-text-color: @button-text-color;
@toolbutton-bg-color: transparent;
@toolbutton-border-color: @toolbutton-bg-color;

// Hover
@toolbutton-text-color-hover: @button-text-color-hover;
@toolbutton-bg-color-hover: @button-bg-color-hover;
@toolbutton-border-color-hover: @button-border-color-hover;

// Pressed
@toolbutton-text-color-pressed: @hl-text-color;
@toolbutton-bg-color-pressed: @button-bg-color-pressed;
@toolbutton-border-color-pressed: @button-border-color-pressed;

// Checked
@toolbutton-text-color-checked: @hl-text-color;
@toolbutton-bg-color-checked: @hl-color;
@toolbutton-border-color-checked: @toolbutton-bg-color-checked;

// Checked Hover
@toolbutton-bg-color-checked-hover: lighten(@toolbutton-bg-color-checked, 8% * @hover-adjust-amount);
@toolbutton-border-color-checked-hover: @toolbutton-bg-color-checked-hover;

// Checked Pressed
@toolbutton-bg-color-checked-pressed: darken(@toolbutton-bg-color-checked, 8% * @pressed-adjust-amount);

// Disabled
@toolbutton-bg-color-disabled: @toolbutton-bg-color;
@toolbutton-bg-color-checked-disabled: mix(@toolbutton-bg-color-checked, @bg-color, @disabled-amount);
@toolbutton-border-color-checked-disabled: @toolbutton-bg-color-checked-disabled;

// -----------------------------------------------------------------------------
// Lock Button
// Inherits @toolbutton for base colors, we only override the checked state
// -----------------------------------------------------------------------------
@lockbutton-bg-color-checked: @lock-color;
@lockbutton-border-color-checked: @lockbutton-bg-color-checked;

// Hover
@lockbutton-bg-color-checked-hover: lighten(@lockbutton-bg-color-checked, 8% * @hover-adjust-amount);
@lockbutton-border-color-checked-hover: @lockbutton-bg-color-checked-hover;

// Hover Pressed
@lockbutton-bg-color-checked-pressed: darken(@lockbutton-bg-color-checked, 8% * @hover-adjust-amount);

// Img
@lock-img-on: 'lock_on.svg';

// -----------------------------------------------------------------------------
// Scrollbars [sb]
// -----------------------------------------------------------------------------
@sb-bg-color: darken(@bg-color, 8% * @ui-contrast);

// Handle
@sb-handle-radius: 5px;
@sb-handle-margin: 2px;

@sb-handle-bg-color: @button-bg-color;
@sb-handle-bg-color-hover: lighten(@sb-handle-bg-color, 8% * @hover-adjust-amount);
@sb-handle-bg-color-pressed: lighten(@sb-handle-bg-color-hover, 8% * @hover-adjust-amount);
@sb-handle-border-color: @sb-handle-bg-color;
@sb-handle-border-color-hover: @sb-handle-bg-color-hover;
@sb-handle-border-color-pressed: @sb-handle-bg-color-pressed;

// -----------------------------------------------------------------------------
// Textfield
// -----------------------------------------------------------------------------
@input-text-color: @text-color;
@input-bg-color: darken(@bg-color, 15%);
@input-border-color: @input-bg-color;
@input-border-radius: 2px;

// Hover
@input-text-color-hover: @input-text-color;
@input-bg-color-hover: @input-bg-color;
@input-border-color-hover: @input-border-color;

// Focus
@input-text-color-focus: white;
@input-bg-color-focus: @input-bg-color;
@input-border-color-focus: @hl-color;

// Disabled
@input-text-color-disabled: mix(@input-text-color, @input-bg-color-disabled, @disabled-amount);
@input-bg-color-disabled: mix(@input-bg-color, @bg-color, @disabled-amount);
@input-border-color-disabled: fade(@input-border-color, @disabled-amount);

// Text Selection
@input-selection-text-color: @input-text-color-focus;
@input-selection-bg-color: fade(@hl-color, 80%);

// Tooloptions
@tooloptions-input-text-color: @input-text-color;
@tooloptions-input-text-color-disabled: fade(@tooloptions-input-text-color, @disabled-amount);

// -----------------------------------------------------------------------------
// CheckBox
// -----------------------------------------------------------------------------
@checkbox-text-color-hover: white;
@checkbox-text-bg-color-hover: lighten(@bg-color, 8% * @hover-adjust-amount);

// Checkbox
@checkbox-bg-color: @input-bg-color;
@checkbox-border-color: @border-color;
@checkbox-border-radius: 2px;

// Hover
@checkbox-bg-color-hover: lighten(@checkbox-bg-color, 8% * @hover-adjust-amount);
@checkbox-border-color-hover: @checkbox-bg-color-hover;

// Checked
@checkbox-img-checked: 'checkmark/checkmark.svg';
@checkbox-img-disabled: 'checkmark/checkmark_disabled.svg';
@checkbox-img-partially: 'checkmark/checkpartially.svg';
@checkbox-img-partially-disabled: 'checkmark/checkpartially_disabled.svg';

@checkbox-bg-color-checked: @hl-color;
@checkbox-border-color-checked: @checkbox-bg-color-checked;

// Checked Hover
@checkbox-bg-color-checked-hover: lighten(@checkbox-bg-color-checked, 8% * @hover-adjust-amount);
@checkbox-border-color-checked-hover: @checkbox-bg-color-checked-hover;

// Disabled
@checkbox-bg-color-checked-disabled: mix(@bg-color, @checkbox-bg-color-checked, @disabled-amount);
@checkbox-border-color-checked-disabled: @checkbox-bg-color-checked-disabled;

// -----------------------------------------------------------------------------
// Sliders
// -----------------------------------------------------------------------------
// Single Slider: Groove
@slider-v-margin: 8px;
@slider-groove-img: 'slider/slider-groove.svg'; // viewer fps slider
@slider-groove-color: darken(@bg-color, 20%);
@slider-groove-value-color: @slider-groove-color;
@slider-groove-border-color: @slider-groove-color;

// Handles
@slider-handle-margin: -1px;
@slider-handle-size: 10px;

// Horizontal Handle
@slider-handle-img: 'slider/slider-handle-rectangle.svg';
@slider-handle-img-disabled: 'slider/slider-handle-rectangle_disabled.svg';

// Vertical Handle
@slider-v-handle-img: 'slider/slider-handle-v-rectangle.svg';
@slider-v-handle-img-disabled: 'slider/slider-handle-v-rectangle_disabled.svg';

// Only for #ViewerFpsSlider (should mimic the slider-handle images)
@slider-handle-bg-color: lighten(@bg-color, 35%);
@slider-handle-border-color: @slider-handle-bg-color;

// -----------------------------------------------------------------------------
// Titlebars
// -----------------------------------------------------------------------------

@titlebar-border-radius: 0px;
@titlebar-bg-color: @tabbar-bg-color;
@titlebar-bg-color-hover: @titlebar-bg-color;
@titlebar-text-color: @text-color-inactive;
@titlebar-text-color-active: @text-color-active;

// Icon BG Colors
@titlebar-button-off-bg-color: @titlebar-bg-color;
@titlebar-button-rollover-bg-color: lighten(@titlebar-bg-color, 15% * @hover-adjust-amount);
@titlebar-button-pressed-bg-color: @hl-color;
@titlebar-button-freeze-bg-color: @lock-color;
@titlebar-button-preview-bg-color: @preview-color;

// Close Button BG Color
@titlebar-close-bg-color: @lock-color;

// -----------------------------------------------------------------------------
// Palette Window
// -----------------------------------------------------------------------------
// All Views (except list view)
@palette-SelectedBorderColor: rgb(255, 255, 255);
@palette-NumpadShortcutBgColor: rgba(0, 0, 0, 0.3);
@palette-NumpadShortcutBorderColor: rgb(141, 141, 141);

// List View
@palette-SeparatorColor: @border-color;
@palette-SelectedCellColor: @hl-color;
@palette-CurrentCellColor: rgba(@hl-color, 0.5);
@palette-ListNumpadShortcutBorderColor: rgb(175, 175, 175);

// StyleChooserPage Chips
@palette-CommonChipBoxColor: black;
@palette-PinnedChipBoxColor: rgb(160, 160, 160);
@palette-SolidChipBoxColor: rgb(228, 16, 0);
@palette-SelectedChipBoxColor: white;
@palette-SelectedChipBox2Color: rgb(199, 202, 50);

// -----------------------------------------------------------------------------
// File Browser / Treeviews / Lists
// -----------------------------------------------------------------------------
@browser-window-bg-color: @bg-color;
@browser-right-pane-bg-color: @bg-color;

// Treeviews
@tree-bg-color: darken(@bg-color, 5% * @ui-contrast);
@tree-bg-color-alt-row: rgba(0, 0, 0, 0.15);

@tree-item-bg-color-hover: lighten(@bg-color, 8% * @hover-adjust-amount);

// Lists
@list-bg-color: @tree-bg-color;

// All Panes
@browser-selected-item-bg-color: @hl-color;
@browser-selected-text-color: @hl-text-color;
@browser-text-color: @text-color;
@browser-folder-text-color: @normal-label-color;
@browser-folder-text-color-selected: @hl-text-color;

// Right Pane Column Bar
@browser-itemview-col-color: @tree-bg-color;
@browser-itemview-col-color-sorted: @browser-itemview-col-color;
@browser-itemview-col-text-color: @text-color;
@browser-itemview-col-border-color: @border-color;
@browser-itemview-col-relief-color: @browser-itemview-col-color;

// -----------------------------------------------------------------------------
// Flip Slider/Marker
// -----------------------------------------------------------------------------
@flipmarker-img: 'flipslider/flipmarker.svg';
@flipslider-img: 'flipslider/flipslider.svg';
@flipslider-base-color: darken(@bg-color, 10% * @ui-contrast);
@flipslider-notstarted-color: hsl(0, 32%, 42%);
@flipslider-started-color: hsl(118, 38%, 45%);
@flipslider-finished-color: @flipslider-base-color;

// -----------------------------------------------------------------------------
// Viewer Window
// -----------------------------------------------------------------------------
@viewer-ruler-bg-color: @bg-color;
@viewer-ruler-scale-color: rgba(@text-color, 0.7);
@viewer-ruler-tool-options-text-color: #000;
@viewer-ruler-border-color: @border-color;
@viewer-ruler-handle-color: rgb(255, 132, 255);
@viewer-ruler-handle-drag-color: cyan;

// -----------------------------------------------------------------------------
// Progress Bar
// -----------------------------------------------------------------------------
@progressbar-bg-color: @flipslider-base-color;
@progressbar-border-color: @border-color;
@progressbar-chunk-bg-color: rgb(57, 151, 57);
@progressbar-chunk-border-color: @border-color;

// -----------------------------------------------------------------------------
// Custom Panels
// -----------------------------------------------------------------------------
@custompanel-scroller-bg-color: darken(@bg-color, 16% * @ui-contrast);
@custompanel-scroller-border-color: lighten(@custompanel-scroller-bg-color, 30% * @border-contrast);

// [xsh] =======================================================================
//       :::    :::  ::::::::  :::    ::: :::::::::: :::::::::: ::::::::::: 
//      :+:    :+: :+:    :+: :+:    :+: :+:        :+:            :+:      
//      +:+  +:+  +:+        +:+    +:+ +:+        +:+            +:+       
//      +#++:+   +#++:++#++ +#++:++#++ +#++:++#   +#++:++#       +#+        
//    +#+  +#+         +#+ +#+    +#+ +#+        +#+            +#+         
//  #+#    #+# #+#    #+# #+#    #+# #+#        #+#            #+#          
// ###    ###  ########  ###    ### ########## ##########     ###  
// -----------------------------------------------------------------------------

// SETTINGS --------------------------------------------------------------------

@xsh-color: @bg-color;

@xsh-contrast: 1.0; // multiplier
@xsh-border-contrast: 1.0; // multiplier
@xsh-mono-icons: false; // bool

// Cell
@xsh-cell-lighten-amount: 0%;
@xsh-cell-sat-amount: 0%;

@xsh-border-darken-amount: 12%;
@xsh-border-sat-amount: 0%;

@xsh-hl-mix-color: hsl(hue(@hl-color), 50%, 50%);
@xsh-hl-mix-amount: 74%;
@xsh-hl-lighten-amount: 10%;

// -----------------------------------------------------------------------------

// Level Colors
@xsh-toonzraster-color: hsl(134, 25%, 33%);
@xsh-raster-color: hsl(206, 25%, 42%);
@xsh-vector-color: hsl(60, 25%, 39%);
@xsh-fx-color: hsl(32, 23%, 34%);
@xsh-palette-color: hsl(170, 27%, 38%);
@xsh-sub-color: hsl(285, 20%, 36%);
@xsh-mesh-color: hsl(246, 22%, 41%);
@xsh-assistants-color: @xsh-palette-color;
@xsh-reference-color: rgb(114, 114, 114);

// Notes
@xsh-notes-color: #9e9e9e;
@xsh-notes-border-color: darken(@xsh-notes-color, 22%);
@xsh-notes-hl-color: mix(lighten(@xsh-notes-color, @xsh-hl-lighten-amount), @xsh-hl-mix-color, @xsh-hl-mix-amount);

// Sound Level
@xsh-sound-color: @xsh-palette-color;
@xsh-sound-track-color: hsl(0, 0%, 0%);

// Other
@xsh-camera-active-color: hsl(209, 55%, 42%);
@xsh-camera-other-color: hsl(179, 37%, 36%);
@xsh-xsheet-color: hsl(240, 27%, 49%);
@xsh-peg-color: hsl(30, 42%, 41%);

// -----------------------------------------------------------------------------

// Spreadsheet Lines
@xsh-horizontal-row-line-color: rgba(0, 0, 0, min(max(0.3 * @xsh-border-contrast, 0), 1));
@xsh-vertical-column-line-color: rgba(0, 0, 0, min(max(0.4 * @xsh-border-contrast, 0), 1));

// Marker Lines
@xsh-marker-line-color: rgba(255, 255, 255, 0.2);
@xsh-selected-marker-line-color: rgba(255, 255, 255, 0.5);
@xsh-sec-marker-line-color: rgba(255, 255, 255, 0.4);
@xsh-current-time-indicator-color: hsl(0, 100%, 64%);

// Folded Columns
@xsh-folded-column-bg-color: rgba(255, 255, 255, 0.45);

// -----------------------------------------------------------------------------

// Spreadsheet Cells
@xsh-empty-column-color: darken(@xsh-color, 5% * @xsh-contrast);
@xsh-empty-column-range-color: @xsh-color;
@xsh-empty-cell-color-selected: fade(mix(lighten(@xsh-empty-column-range-color, (@xsh-hl-lighten-amount * 2)), @xsh-hl-mix-color, @xsh-hl-mix-amount), 50%);

@xsh-cell-text-color: rgba(255, 255, 255, 0.85);
@xsh-cell-text-color-selected: rgba(@xsh-cell-text-color, 1.0);

@xsh-current-cell-border-color: cyan;

// Onion Skin Area
@xsh-onionskin-column-bg-color: @xsh-empty-column-color;

// Framenumber Area
@xsh-framenumber-column-text-color: @xsh-cell-text-color;
@xsh-framenumber-column-bg-color: @xsh-color;

@xsh-framenumber-column-range-text-color: @normal-label-color;
@xsh-framenumber-column-range-bg-color: lighten(@xsh-framenumber-column-bg-color, 5% * @xsh-contrast);

@xsh-framenumber-current-text-color: rgb(255, 255, 255);
@xsh-framenumber-current-bg-color: fade(@hl-color, 60%);

// Column Header Colors
@xsh-column-header-empty-color: @bg-color;
@xsh-column-header-border-color: @border-color;
@xsh-column-header-selected-color: fade(tint(@xsh-hl-mix-color, 70%), 50%);
@xsh-column-header-dragbar-hl-color: @xsh-column-header-selected-color;

@xsh-button-preview-bg-on-color: #C8C864;
@xsh-button-camstand-bg-on-color: #EB906B;
@xsh-button-lock-bg-on-color: @lock-color;

// -----------------------------------------------------------------------------

// Icons
@timeline-column-header-border-color: @border-color;

@timeline-preview-button-bg-on-color: @bg-color;
@timeline-preview-button-bg-off-color: @bg-color;

@timeline-table-button-bg-on-color: @bg-color;
@timeline-table-button-bg-off-color: @bg-color;

@timeline-lock-button-bg-on-color: @bg-color;
@timeline-lock-button-bg-off-color: @bg-color;

@timeline-config-button-bg-color: @bg-color;

@timeline-preview-icon: if(@xsh-mono-icons, 'timeline/preview_small.svg', 'timeline/preview_small-color.svg');
@timeline-table-icon: if(@xsh-mono-icons, 'timeline/table_small.svg', 'timeline/table_small-color.svg');
@timeline-table-trans-icon: if(@xsh-mono-icons, 'timeline/trans_small.svg', 'timeline/trans_small-color.svg');
@timeline-preview-trans-icon: if(@xsh-mono-icons, 'timeline/preview_trans_small.svg', 'timeline/preview_trans_small-color.svg');

// [node] ======================================================================
//       ::::    :::  ::::::::  :::::::::  :::::::::: 
//      :+:+:   :+: :+:    :+: :+:    :+: :+:         
//     :+:+:+  +:+ +:+    +:+ +:+    +:+ +:+          
//    +#+ +:+ +#+ +#+    +:+ +#+    +:+ +#++:++#      
//   +#+  +#+#+# +#+    +#+ +#+    +#+ +#+            
//  #+#   #+#+# #+#    #+# #+#    #+# #+#             
// ###    ####  ########  #########  ##########       
// -----------------------------------------------------------------------------

// SETTINGS --------------------------------------------------------------------

@node-text-color: @xsh-cell-text-color;
@node-viewer-bg-color: darken(@bg-color, 5% * @ui-contrast);

// Use Xsheet values by default, add another value to tweak if required
@node-lighten-amount: @xsh-cell-lighten-amount - 0%;
@node-sat-amount: @xsh-cell-sat-amount + 0%;

// -----------------------------------------------------------------------------

// Nodes
@node-selected-border-color: white;

@node-table-color: @xsh-xsheet-color;
@node-group-color: @xsh-camera-active-color;
@node-spline-color: hsl(84, 64%, 34%);
@node-normal-fx-color: hsl(211, 29%, 37%);
@node-macro-fx-color: hsl(322, 20%, 37%);
@node-image-adjust-fx-color: hsl(245, 19%, 38%);
@node-layer-blending-fx-color: hsl(190, 28%, 32%);
@node-matte-fx-color: hsl(0, 23%, 42%);

// Splines
@node-link-color: rgb(223, 223, 223);
@node-selected-link-color: cyan;
@node-motion-path-link-color: #94ee1e;
@node-motion-path-selected-link-color: yellow;

// -----------------------------------------------------------------------------

// Keyframes
@keyframe-total-color: #e08a21;
@keyframe-total-border-color: @keyframe-total-color;
@keyframe-total-color-hover: lighten(@keyframe-total-color, 8% * @hover-adjust-amount);
@keyframe-total-border-color-hover: @keyframe-total-border-color;

@keyframe-inbetween-color: #807e75;
@keyframe-inbetween-border-color: @keyframe-inbetween-color;

// FX Settings Panel Only
@keyframe-highlight-color: rgba(255, 255, 255, 0.3);
@keyframe-highlight-border-color: @keyframe-highlight-color;
@keyframe-modified-color: #1fb85f;
@keyframe-modified-border-color: @keyframe-modified-color;

// [fe] ========================================================================
//       :::::::::: ::::::::: ::::::::::: ::::::::::: ::::::::  ::::::::: 
//      :+:        :+:    :+:    :+:         :+:    :+:    :+: :+:    :+: 
//     +:+        +:+    +:+    +:+         +:+    +:+    +:+ +:+    +:+  
//    +#++:++#   +#+    +:+    +#+         +#+    +#+    +:+ +#++:++#:    
//   +#+        +#+    +#+    +#+         +#+    +#+    +#+ +#+    +#+    
//  #+#        #+#    #+#    #+#         #+#    #+#    #+# #+#    #+#     
// ########## ######### ###########     ###     ########  ###    ###      
// -----------------------------------------------------------------------------

// SETTINGS --------------------------------------------------------------------

@fe-text-color: white;

@fe-kf-border-darken-amount: -31%;
@fe-kf-border-sat-amount: 0%;
@fe-kf-hl-lighten-amount: 37%;
@fe-kf-hl-mix-amount: 100%;
@fe-kf-hl-mix-color: @hl-color;

@fe-ib-border-darken-amount: -62%;
@fe-ib-border-sat-amount: 0%;
@fe-ib-hl-lighten-amount: 22%;
@fe-ib-hl-mix-amount: 90%;
@fe-ib-hl-mix-color: @hl-color;

// -----------------------------------------------------------------------------

// Cell Colors
@fe-keyframe-color: #925d24;
@fe-ignored-keyframe-color: #ac2a39;
@fe-inbetween-color: #666250;
@fe-ignored-inbetween-color: #8a695e;

@fe-empty-color: @xsh-empty-cell-color-selected;
@fe-empty-range-color-selected: @xsh-empty-cell-color-selected;

// -----------------------------------------------------------------------------

// Curves Viewer
@fe-panel-line-color: white; // grid line color
@fe-panel-line-tone: 12%; // strength of grid line color (0 = invisible)

@fe-panel-text-color: @text-color;
@fe-panel-bg-color: darken(@bg-color, 6% * @ui-contrast);
@fe-panel-ruler-bg-color: darken(@fe-panel-bg-color, 4% * @ui-contrast);

@fe-panel-curve-color: rgba(255, 255, 255, 0.6); // all curves color
@fe-panel-curve-color-hover: #FFA500; // when mouse over a curve
@fe-panel-curve-keyframe-color: black; // the keyframe square handle
