@use "./utils" as *;
@import "./native-theme/theme_palette";
@import "_theme_palette";

$color-transparency: (
        't90': 0.9,
        't80': 0.8,
        't70': 0.7,
        't60': 0.6,
        't50': 0.5,
        't40': 0.4,
        't30': 0.3,
        't20': 0.2,
        't10': 0.1,
        't0' : 0
    );

html[data-theme-mode="dark"][data-theme="hsl"] {
    --color-l-step: 2%; // step between light1 and light2 .. etc. in percentage

    --color-h: 200; // Hue
    --color-s: 20%; // Saturation
    --color-l: 53%; // Lightness

    --brand-h: 200;
    --brand-s: 60%;
    --brand-l: 50%;

    --background-h: 200;
    --background-s: 20%;
    --background-l: 6%;
    --new-body-bg: hsl(var(--background-h), var(--background-s), calc(var(--background-l) + 0%));

    // fixed saturation ... keep calc() it's needed for HEX calculation
    --error-h: 0;
    --error-s: 60%;
    --error-l: 50%;
    //--error-luminosity-step: 10%;
    //--new-error-core: hsl(var(--error-h), var(--error-s), calc(var(--error-l) + 0%));
    //--new-error-dark: hsl(var(--error-h), var(--error-s), calc(var(--error-l) - var(--error-luminosity-step)));
    //--new-error-light: hsl(var(--error-h), var(--error-s), calc(var(--error-l) + var(--error-luminosity-step)));

    --green-h: 110;
    --green-s: 60%;
    --green-l: 50%;
    //--green-luminosity-step: 10%;
    //--new-green-core: hsl(var(--green-h), var(--green-s), calc(var(--green-l) + 0%));
    //--new-green-dark: hsl(var(--green-h), var(--green-s), calc(var(--green-l) - var(--green-luminosity-step)));
    //--new-green-light: hsl(var(--green-h), var(--green-s), calc(var(--green-l) + var(--green-luminosity-step)));

    --yellow-h: 50;
    --yellow-s: 60%;
    --yellow-l: 50%;
    //--yellow-luminosity-step: 10%;
    //--new-yellow-core:hsl(var(--yellow-h), var(--yellow-s), calc(var(--yellow-l) + 0%));
    //--new-yellow-dark: hsl(var(--yellow-h), var(--yellow-s), calc(var(--yellow-l) - var(--yellow-luminosity-step)));
    //--new-yellow-light: hsl(var(--yellow-h), var(--yellow-s), calc(var(--yellow-l) + var(--yellow-luminosity-step)));

    $color-transparency: (
        't90': 0.9,
        't80': 0.8,
        't70': 0.7,
        't60': 0.6,
        't50': 0.5,
        't40': 0.4,
        't30': 0.3,
        't20': 0.2,
        't10': 0.1,
        't0' : 0
    );

    $color-levels: (
        'l4': 1.6,
        'l3': 1.5,
        'l2': 1.3,
        'l1': 1.1,
        'core': 1,
        'd1': 0.9,
        'd2': 0.7,
        'd3': 0.5,
        'd4': 0.3,
        'd5': 0.2,
    );

    @each $key,
    $value in $color-levels {
        --color-level-#{$key}: #{$value};
        --new-brand-#{$key}: hsl(var(--brand-h), var(--brand-s), calc(var(--brand-l) * var(--color-level-#{$key})));
        --new-yellow-#{$key}:hsl(var(--yellow-h), var(--yellow-s), calc(var(--yellow-l) * var(--color-level-#{$key})));
        --new-green-#{$key}: hsl(var(--green-h), var(--green-s), calc(var(--green-l) * var(--color-level-#{$key})));
        --new-error-#{$key}: hsl(var(--error-h), var(--error-s), calc(var(--error-l)  * var(--color-level-#{$key})));
        @each $tkey,
        $tvalue in $color-transparency {
            --new-brand-#{$key}-#{$tkey}: hsla(var(--brand-h), var(--brand-s), calc(var(--brand-l) * var(--color-level-#{$key})), #{$tvalue});
            --new-yellow-#{$key}-#{$tkey}:hsla(var(--yellow-h), var(--yellow-s), calc(var(--yellow-l) * var(--color-level-#{$key})), #{$tvalue});
            --new-green-#{$key}-#{$tkey}: hsla(var(--green-h), var(--green-s), calc(var(--green-l) * var(--color-level-#{$key})), #{$tvalue});
            --new-error-#{$key}-#{$tkey}: hsla(var(--error-h), var(--error-s), calc(var(--error-l)  * var(--color-level-#{$key})), #{$tvalue});
        }
    }

    @for $i from 1 through 19 {
        --new-light#{$i}: hsl(var(--color-h), var(--color-s), calc(100% - #{$i} * var(--color-l-step)));
        @each $tkey,
        $tvalue in $color-transparency {
            --new-light#{$i}-#{$tkey}: hsla(var(--color-h), var(--color-s), calc(100% - #{$i} * var(--color-l-step)), #{$tvalue});
        }
    }

    @for $i from 1 through 19 {
        --new-dark#{$i}: hsl(var(--color-h), var(--color-s), calc(0% + #{$i} * var(--color-l-step)));
        @each $tkey,
        $tvalue in $color-transparency {
            --new-dark#{$i}-#{$tkey}: hsla(var(--color-h), var(--color-s), calc(0% + #{$i} * var(--color-l-step)), #{$tvalue});
        }
    }


    @for $i from 1 through 8 {
        --new-additional-light#{$i}: hsl(210, 25%, calc(100% - #{$i} * 1.8%));
    }
}

html[data-theme-mode="light"][data-theme="hsl"] {
    --color-l-step: 2%; // step between light1 and light2 .. etc. in percentage

    --color-h: 200; // Hue
    --color-s: 20%; // Saturation
    --color-l: 53%; // Lightness

    --brand-h: 200;
    --brand-s: 70%;
    --brand-l: 52%;

    --background-h: 200;
    --background-s: 20%;
    --background-l: 94%;
    --new-body-bg: hsl(var(--background-h), var(--background-s), calc(var(--background-l) + 0%));

    // fixed saturation ... keep calc() it's needed for HEX calculation
    --error-h: 0;
    --error-s: 60%;
    --error-l: 50%;
    //--error-luminosity-step: 10%;
    //--new-error-core: hsl(var(--error-h), var(--error-s), calc(var(--error-l) + 0%));
    //--new-error-dark: hsl(var(--error-h), var(--error-s), calc(var(--error-l) - var(--error-luminosity-step)));
    //--new-error-light: hsl(var(--error-h), var(--error-s), calc(var(--error-l) + var(--error-luminosity-step)));

    --green-h: 110;
    --green-s: 60%;
    --green-l: 50%;
    //--green-luminosity-step: 10%;
    //--new-green-core: hsl(var(--green-h), var(--green-s), calc(var(--green-l) + 0%));
    //--new-green-dark: hsl(var(--green-h), var(--green-s), calc(var(--green-l) - var(--green-luminosity-step)));
    //--new-green-light: hsl(var(--green-h), var(--green-s), calc(var(--green-l) + var(--green-luminosity-step)));

    --yellow-h: 50;
    --yellow-s: 60%;
    --yellow-l: 50%;
    //--yellow-luminosity-step: 10%;
    //--new-yellow-core:hsl(var(--yellow-h), var(--yellow-s), calc(var(--yellow-l) + 0%));
    //--new-yellow-dark: hsl(var(--yellow-h), var(--yellow-s), calc(var(--yellow-l) - var(--yellow-luminosity-step)));
    //--new-yellow-light: hsl(var(--yellow-h), var(--yellow-s), calc(var(--yellow-l) + var(--yellow-luminosity-step)));

    $revert-color-levels: (
        'l4': 0.3,
        'l3': 0.5,
        'l2': 0.7,
        'l1': 0.9,
        'core': 1,
        'd1': 1.1,
        'd2': 1.3,
        'd3': 1.5,
        'd4': 1.6,
        'd5': 1.7,
    );

    @each $key,
    $value in $revert-color-levels {
        --color-level-#{$key}: #{$value};
        --new-brand-#{$key}: hsl(var(--brand-h), var(--brand-s), calc(var(--brand-l) * var(--color-level-#{$key})));
        --new-yellow-#{$key}:hsl(var(--yellow-h), var(--yellow-s), calc(var(--yellow-l) * var(--color-level-#{$key})));
        --new-green-#{$key}: hsl(var(--green-h), var(--green-s), calc(var(--green-l) * var(--color-level-#{$key})));
        --new-error-#{$key}: hsl(var(--error-h), var(--error-s), calc(var(--error-l)  * var(--color-level-#{$key})));
        @each $tkey,
        $tvalue in $color-transparency {
            --new-brand-#{$key}-#{$tkey}: hsla(var(--brand-h), var(--brand-s), calc(var(--brand-l) * var(--color-level-#{$key})), #{$tvalue});
            --new-yellow-#{$key}-#{$tkey}:hsla(var(--yellow-h), var(--yellow-s), calc(var(--yellow-l) * var(--color-level-#{$key})), #{$tvalue});
            --new-green-#{$key}-#{$tkey}: hsla(var(--green-h), var(--green-s), calc(var(--green-l) * var(--color-level-#{$key})), #{$tvalue});
            --new-error-#{$key}-#{$tkey}: hsla(var(--error-h), var(--error-s), calc(var(--error-l)  * var(--color-level-#{$key})), #{$tvalue});
        }
    }

    @for $i from 1 through 19 {
        --new-light#{$i}: hsl(var(--color-h), var(--color-s), calc(0% + #{$i} * var(--color-l-step)));
        @each $tkey,
        $tvalue in $color-transparency {
            --new-light#{$i}-#{$tkey}: hsla(var(--color-h), var(--color-s), calc(0% + #{$i} * var(--color-l-step)), #{$tvalue});
        }
    }

    @for $i from 1 through 19 {
        --new-dark#{$i}: hsl(var(--color-h), var(--color-s), calc(100% - #{$i} * var(--color-l-step)));
        @each $tkey,
        $tvalue in $color-transparency {
            --new-dark#{$i}-#{$tkey}: hsla(var(--color-h), var(--color-s), calc(100% - #{$i} * var(--color-l-step)), #{$tvalue});
        }
    }

    @for $i from 1 through 8 {
        --new-additional-light#{$i}: hsl(210, 25%, calc(100% - #{$i} * 1.8%));
    }
}

html[data-theme="hsl"] {
    body {
        background-color: var(--new-body-bg);
        color : #A5B7C0;
    }

    --body-bg    : var(--new-body-bg);
    --alt-body-bg : var(--new-dark1);
    --body-text-color : var(--new-light10);

    --anchor-color : hsl(var(--brand-h), var(--brand-s), var(--brand-l));
    --anchor-hover-color : hsl(var(--brand-h), var(--brand-s), calc(var(--brand-l) * var(--color-level-l1)));

    --header-bg                  : var(--new-dark7);
    --header-border-color        : transparent;
    --header-webadm-bg           : var(--new-dark7);
    --header-webadm-border-color : transparent;

    --ribbon-bg     : var(--bluez);
    --ribbon-border : var(--bluez);
    --ribbon-color  : var(--new-light4);

    --ribbon-alert-bg : #{$yellow_d2_lighter};
    --ribbon-alert-border : #{$yellow_d2_lighter};
    --ribbon-alert-color : var(--new-dark3);

    --image-box-border-color : var(--new-dark10);
    --image-box-selected-border-color : var(--new-brand-d1);

    --storage-size-available : var(--new-light4);
    --storage-size-reserved : repeating-linear-gradient(
                -45deg,
                var(--new-light4),
                var(--new-light4) 4.25px,
                var(--new-light6) 4.25px,
                var(--new-light6) 9px
    );
    --storage-size-reserved-border : var(--new-light6);

    --search-link-color               : var(--new-light2);
    --search-link-hover-color         : var(--new-light6);
    --search-link-visited-color       : var(--new-light6);
    --search-link-visited-hover-color : var(--new-light8);
    --search-highlight-color          : var(--new-brand-d1-t80);

    --user-selected-highlight-color : var(--new-brand-d1-t80);

    --spot-gradient : radial-gradient(
        ellipse farthest-corner at center center,
        #303F47 0,
        #2B383F 3%,
        #263137 5%,
        #212A2F 10%,
        #1C2327 15%,
        #171C1F 20%,
        #121517 23%,
        #0D0E0F 25%,
        #080707 30%,
        #000000 40%
    );

    --h1 : var(--new-light4);
    --h2 : var(--new-light4);
    --h3 : var(--new-light4);
    --h4 : var(--new-light4);
    --h5 : var(--new-light4);
    --h6 : var(--new-light4);
    --h7 : var(--new-light4);

    --elements-disabled : var(--new-dark12);

    --svg-info-fill: #{$info_icon_dark};
    --svg-info-elm-fill: #{$info_icon_dark_elm};

    --svg-warning-fill: #C26626;
    --svg-warning-elm-fill: #{$warning_icon_dark_elm};

    --svg-std-icon-fill : var(--new-dark16);
    --svg-path-light-color : var(--new-dark9);
    --svg-path-dark-color  : var(--new-light4);
    --svg-path-accent-color : var(--svg-path-dark-color);

    --svg-confirmations-color  : var(--new-light10);

    --svg-placeholder-elm1-color : var(--new-light4);
    --svg-placeholder-elm2-color : var(--new-light10);

    --text-placeholder-color : var(--new-dark18);

    --scrollbar-color                   : var(--new-light16);
    --scrollbar-thumb-bg                : var(--new-light10);
    --scrollbar-thumb-border-color      : var(--new-dark9);
    --menu-scrollbar-thumb-border-color : var(--new-dark9);

    --tooltip-shadow-color : var(--new-dark1);
    --tooltip-bg : var(--new-dark13);
    --tooltip-color : var(--new-light4);

    --popover-shadow-color : none;
    --popover-bg           :var(--new-dark13);
    --popover-color        : var(--new-light4);

    --validation-popover-shadow-color : none;
    --validation-popover-bg           : var(--new-dark9);
    --validation-popover-color        : var(--new-light4);

    --radio-color              : var(--new-light10);
    --radio-check-color        : var(--new-brand-d1);
    --radio-hover-color        : var(--new-light4);
    --radio-hover-check-color  : var(--new-brand-core);
    --radio-active-color       : var(--new-light10);
    --radio-active-check-color : var(--new-brand-l1);
    --radio-active-hover-color : var(--new-light4);

    --checkbox-color              : var(--new-light10);
    --checkbox-check-color        : var(--new-brand-d1);
    --checkbox-hover-color        : var(--new-light4);
    --checkbox-hover-check-color  : var(--new-brand-core);
    --checkbox-active-color       : var(--new-light2);
    --checkbox-active-check-color : var(--new-brand-l1);
    --checkbox-active-hover-color : var(--new-light4);

    --auth-header-bg : var(--new-dark6);
    --auth-header-color : var(--new-light4);
    --auth-subheader-color : var(--new-light10);
    --auth-body-bg : var(--new-dark4);
    --auth-pill-bg : var(--new-dark11);

    --border-color         : var(--new-dark11);
    --border-hover-color   : var(--new-dark8);
    --border-active-color  : var(--new-dark6);
    --horizontal-sep-color : var(--new-dark9);

    --label-color          : var(--new-light4);
    --label-disabled-color : var(--new-light4);

    --placehoder-cloud-color   : var(--new-dark5);
    --placehoder-cloud-opacity : 0;
    --placeholder-light-color : var(--new-light4);
    --placeholder-light2-color : var(--new-light5);
    --placeholder-accent-color : var(--new-light6);
    --placeholder-accent2-color : var(--new-light12);
    --placehoder-title-color   : var(--new-light4);
    --placehoder-body-color    : var(--new-light10);

    --placehoder-v2-title-color   : #{--new_dark_17};
    --placehoder-v2-message-color    : #{--new_dark_17};
    --placeholder-v2-description-color: #{--new_dark_17};

    --progress-bar-color                  : var(--new-dark16);
    --progress-bar-border-color           : var(--new-dark16);
    --progress-bar-reindex-color          : var(--new-brand-d1);
    --progress-bar-heder-title-color      : var(--new-brand-d1);
    --progress-bar-heder-persentage-color : var(--new-light4);

    --switch-slider-bg            : var(--new-dark12);
    --switch-slider-hover-bg      : var(--new-dark14);
    --switch-disabled-color       : var(--new-dark12);
    --switch-disabled-hover-color : var(--new-dark14);
    --switch-selected-color       : var(--new-green_d1);
    --switch-selected-hover-color : var(--new-green_main);
    --switch-button-color         : var(--new-light10);
    --switch-bar-color            : var(--new-green-core);
    --switch-bar-hover-color      : var(--new-green_l1);
    --switch-bar-disable-color    : var(--new-dark8);

    --switch-warning-color        : var(--new-error-d2);
    --switch-warning-hover-color  : var(--new-error-d1);
    --switch-warning-circle-color : var(--new-error-d1);
    --switch-circle-off-color         : var(--new-dark9);
    --switch-circle-off-hover-color   : var(--new-red_main);
    --switch-circle-off-disable-color : var(--new-dark9);

    --switch-circle-color         : var(--new-dark9);
    --switch-circle-hover-color   : var(--new-red_main);
    --switch-circle-disable-color : var(--new-dark9);

    --developer-menu-bg: var(--new-dark5);
    --developer-menu-base-color : var(--new-light10);

    // *** arch svg ***********************
    --arch-svg-dash-stroke              : var(--new-brand-d6);
    --arch-svg-solid-path-arrow-fill    : var(--new-light4);
    --arch-svg-level1-fill              : var(--new-dark15);
    --arch-svg-level1-color             : var(--new-light2);
    --arch-svg-level2-fill              : var(--new-dark12);
    --arch-svg-level3-fill              : var(--new-dark5);
    --arch-svg-spacer-fill              : var(--new-dark3);
    --arch-svg-cloud-fill               : var(--new-brand-d2);
    --arch-svg-cloud-color              : var(--new-light2);
    --arch-svg-cloud-relay-fill         : var(--new-brand-d5);
    --arch-svg-cloud-relay-color        : var(--new-light4);
    --arch-svg-third-party-fill         : var(--new-dark7);
    --arch-svg-built-in-fill            : var(--new-dark5);
    --arch-svg-built-in-color           : var(--new-light4);
    --arch-svg-rest-streaming-api-fill  : var(--new-dark5);
    --arch-svg-rest-streaming-api-color : var(--new-light4);
    --arch-svg-server-fill              : var(--new-dark7);
    --arch-svg-server-hover-fill        : var(--new-dark7);
    --arch-svg-transparent-tile-stroke  : var(--new-dark18);
    // ***************************************

    --left-menu-bg                              : var(--new-dark5);
    --left-menu-border-color                    : transparent;
    --left-menu-l1-bg                           : transparent;
    --left-menu-l1-bg-hover                     : var(--new-dark11);
    --left-menu-l1-bg-active                    : var(--new-dark9);
    --left-menu-l1-color                        : var(--new-light4);
    --left-menu-l1-selected-bg                  : var(--new-dark6);
    --left-menu-l1-selected-hover-bg            : var(--new-dark9);
    --left-menu-l3-scroll                       : var(--new-dark6);
    --left-menu-l3-shadow                       : transparent;
    --left-menu-l3-bg                           : var(--new-dark6);
    --left-menu-l3-color                        : var(--new-light4);
    --left-menu-l3-accent-color                 : var(--new-light10);
    --left-menu-l3-additional-color             : var(--new-light16);
    --left-menu-l3-hover-bg                     : var(--new-light10);
    --left-menu-l3-hover-color                  : var(--new-dark2);
    --left-menu-l3-opacity                      : 1;
    --left-menu-l3-selected-bg                  : var(--new-light16);
    --left-menu-l3-selected-color               : var(--new-light2);
    --left-menu-disabled-item-color             : var(--new-dark13);
    --left-menu-disabled-item-addtitional-color : var(--new-dark14);

    // New header ******************************
    --header-level-one-color              : hsl(var(--color-h), var(--color-s), calc(100% - 13 * var(--color-l-step)));
    --header-level-one-bg                 : hsl(var(--color-h), var(--color-s), calc(0% + 4 * var(--color-l-step)));
    --header-level-one-active-bg          : hsl(var(--color-h), var(--color-s), calc(0% + 5 * var(--color-l-step)));
    --header-level-one-active-color       : hsl(var(--color-h), var(--color-s), calc(100% - 4 * var(--color-l-step)));
    --header-level-one-hover-color        : hsl(var(--color-h), var(--color-s), calc(100% - 10 * var(--color-l-step)));
    --header-level-two-bg                 : hsl(var(--color-h), var(--color-s), calc(0% + 6 * var(--color-l-step)));
    --header-item-disabled                : hsl(var(--color-h), var(--color-s), calc(0% + 13 * var(--color-l-step)));
    --header-level-two-hover-border-color : hsl(var(--color-h), var(--color-s), calc(0% + 11 * var(--color-l-step)));
    --header-arrow-hover                  : hsl(var(--color-h), var(--color-s), calc(0% + 8 * var(--color-l-step)));
    --header-nav-arrow-bg                 : hsl(var(--color-h), var(--color-s), calc(0% + 7 * var(--color-l-step)));
    --header-logout-action-color          : hsl(var(--color-h), var(--color-s), calc(100% - 16 * var(--color-l-step)));
    --header-active-border-bg             : hsl(var(--brand-h), var(--brand-s), var(--brand-l));

    // Logo;
    --header-logo-text-color              : var(--new-light4);
    --header-logo-border                  : var(--new-dark11);

    // Mobile header
    --mobile-header-bg                    : var(--new-dark4);
    --mobile-level-one-color              : var(--new-dark15);
    --mobile-level-two-color              : var(--new-light6);
    --mobile-header-svg-color             : var(--new-light1);
    --mobile-header-border-one            : var(--new-dark2);
    --mobile-header-border-two            : var(--new-dark5);
    --mobile-header-border-three          : var(--new-dark3);
    --mobile-header-item-nav-arrow        : var(--new-dark13);
    --mobile-header-logout-btn-bg         : var(--new-dark12);
    --mobile-header-logout-btn-color      : var(--new-light2);

    // Header profile dropdown
    --header-profile-bg : hsl(var(--color-h), var(--color-s), calc(0% + 7 * var(--color-l-step)));
    --header-profile-color : hsl(var(--color-h), var(--color-s), calc(100% - 13 * var(--color-l-step)));
    --header-profile-hover-bg : hsl(var(--color-h), var(--color-s), calc(0% + 9 * var(--color-l-step)));
    --header-profile-hover-color : hsl(var(--color-h), var(--color-s), calc(100% - 10 * var(--color-l-step)));
    --header-profile-active-color : hsl(var(--color-h), var(--color-s), calc(100% - 4 * var(--color-l-step)));
    --header-profile-active-bg : hsl(var(--color-h), var(--color-s), calc(0% + 9 * var(--color-l-step)));

    // Header lang
    --header-lang-bg   : var(--new-dark4);
    --header-lang-code : var(--new-light16);
    --header-lang-code-text: var(--new-light1);

    // Footer
    --footer-bg                           : var(--new-dark4);
    --footer-text-color                   : var(--new-dark18);
    --footer-link-color                   : var(--new-dark18);

    // View tab ********************************
    --view-bg                    : var(--new-dark5);
    --view-search-bg             : var(--new-dark5);
    --view-search-color          : var(--new-light10);
    --view-search-hover-bg       : var(--new-dark3);
    --view-search-hover-color    : var(--new-light10);
    --view-search-active-bg      : var(--new-dark3);
    --view-search-active-color   : var(--new-light4);

    --control-color              : var(--new-dark10);
    --control-enabled-color      : var(--new-dark18);
    --control-hoved-bg           : var(--new-dark3);
    --control-active-bg          : var(--new-dark3);

    --left-menu-view-hover-bg    : var(--new-dark8);
    --left-menu-view-selected-bg : var(--new-light16);
    // end View tab ****************************

    --sidebar-toggling-ear-color : var(--new-light16);

    --time-under-mouse-bg               : var(--new-dark9-t90);
    --timeline-date-color               : var(--new-light10);
    --timeline-time-color               : var(--new-light4);
    --timeline-bg                       : var(--new-dark5);
    --timeline-tick-color               : var(--new-dark10);
    --timeline-major-color              : var(--new-dark4);
    --timeline-manor-color              : var(--new-dark10);
    --timeline-scrollbar-bg             : var(--new-dark9);
    --timeline-scrollbar-hover-bg       : var(--new-dark8);
    --timeline-scrollbar-stripe-bg      : var(--new-dark18);
    --timeline-scrollbutton-bg          : var(--new-dark9-t50);
    --timeline-scrollbutton-hover-bg    : var(--new-dark9-t90);
    --timeline-playback-indicator-bg    : var(--new-light4);
    --timeline-playback-indicator-color : var(--new-dark2);
    --timeline-selection-panel-bg       : var(--new-brand-d3);
    --timeline-selection-panel-hover-bg       : var(--new-brand-d4);
    --timeline-selection-panel-active-bg      : var(--brand-d2);
    --timeline-selection-panel-color    : var(--light4);
    --timeline-selection-picker         : dark;
    --timeline-selection-panel-delimiter-color : var(--new-light4-t20);
    --timeline-selection-panel-close-bg        : var(--new-brand-d6);
    --timeline-selection-panel-close-hover-bg        : var(--new-brand-d5);
    --timeline-selection-panel-close-active-bg        : var(--new-brand-d4);
    --timeline-control-color            : var(--new-light4);
    --timeline-chunk-color : var(--green_l2);
    --timeline-background : rgba(var(--green_l2--rgb), 0.1);

    // Timeline actions (for now) --TT
    --button-action-bg: var(--new-light3);
    --button-action-border-color: var(--new-light15);
    --button-action-icon-fill: var(--new-light10);

    --paginator-bg           : var(--new-dark6);
    --paginator-color        : var(--new-light10);
    --paginator-hover-bg     : var(--new-dark12);
    --paginator-hover-color  : var(--new-light2);
    --paginator-active-bg    : var(--new-dark11);
    --paginator-active-color : var(--new-light2);

    --btn-download-hover-bg : var(--new-light10);

    --btn-close-hover-bg : var(--new-dark9);
    --btn-close-hover-color : var(--new-light10);
    --btn-close-active-bg : var(--new-dark4);
    --btn-close-active-color : var(--new-light17);

    --btn-text-color : var(--new-light4);
    --btn-text-hover-color : var(--new-light10);
    --btn-text-active-color : var(--new-light17);

    --btn-clear-bg    : transparent;
    --btn-clear-color : var(--new-light4);
    --btn-clear-hover-bg  : transparent;
    --btn-clear-hover-color  : var(--new-light10);
    --btn-clear-active-bg : transparent;
    --btn-clear-active-color : var(--new-light17);

    --btn-dropdown-toggle-bg             : var(--new-dark8);
    --btn-dropdown-toggle-selected-color : var(--new-light5);
    --btn-dropdown-toggle-color          : var(--new-light10);
    --btn-dropdown-toggle-shadow-color   : none;
    --btn-dropdown-toggle-hover-bg       : var(--new-dark9);
    --btn-dropdown-toggle-hover-shadow   : inset 0 -1px 0 0 var(--new-dark6);
    --btn-dropdown-toggle-active-bg      : var(--new-dark11);
    --btn-dropdown-toggle-active-shadow  : inset 0 1px 0 0 var(--new-dark6);

    --btn-tag-bg                 : var(--new-dark12);
    --btn-tag-color              : var(--new-light2);
    --btn-tag-selected-bg        : var(--new-dark15);
    --btn-tag-selected-hover-bg  : var(--new-dark11);
    --btn-tag-selected-active-bg : var(--new-dark8);
    --btn-tag-selected-color     : var(--new-light4);

    --btn-arrow-bg             : var(--new-dark12);
    --btn-arrow-color          : var(--new-light2);
    --btn-arrow-hover-bg       : var(--new-dark10);
    --btn-arrow-hover-color    : var(--new-light2);
    --btn-arrow-selected-bg    : var(--new-dark9);
    --btn-arrow-selected-color : var(--new-light5);

    --btn-default-bg                : var(--new-dark14);
    --btn-default-color             : var(--new-light2);
    --btn-default-shadow            : none;
    --btn-default-hover-bg          : var(--new-dark10);
    --btn-default-hover-color       : var(--new-light2);
    --btn-default-hover-shadow      : inset 0 -1px 0 0 var(--new-dark6);
    --btn-default-active-bg         : var(--new-dark9);
    --btn-default-active-color      : var(--new-light5);
    --btn-default-active-shadow     : inset 0 1px 0 0 var(--new-dark6);
    --btn-default-focus-shadow      : var(--new-brand-d1);
    --btn-default-focus-outline-rgb : var(--new-brand-d1-t30);

    --btn-primary-bg : hsl(var(--brand-h), var(--brand-s), var(--brand-l));
    --btn-primary-color : hsl(var(--color-h), var(--color-s), calc(100% - 2 * var(--color-l-step)));
    --btn-primary-shadow : inset 0 -1px 0 0 hsl(var(--brand-h), var(--brand-s), calc(var(--brand-l) * var(--color-level-d2)));
    --btn-primary-hover-bg : hsl(var(--brand-h), var(--brand-s), calc(var(--brand-l) * var(--color-level-d1)));
    --btn-primary-hover-color : hsl(var(--color-h), var(--color-s), calc(100% - 1 * var(--color-l-step)));
    --btn-primary-hover-shadow : inset 0 -1px 0 0 hsl(var(--brand-h), var(--brand-s), calc(var(--brand-l) * var(--color-level-d2)));
    --btn-primary-active-bg : hsl(var(--brand-h), var(--brand-s), calc(var(--brand-l) * var(--color-level-d2)));
    --btn-primary-active-color : hsl(var(--color-h), var(--color-s), calc(100% - 1 * var(--color-l-step)));;
    --btn-primary-active-shadow : inset 0 1px 0 0 hsl(var(--brand-h), var(--brand-s), calc(var(--brand-l) * var(--color-level-d4)));
    --btn-primary-focus-shadow : hsl(var(--brand-h), var(--brand-s), calc(var(--brand-l) * var(--color-level-d1)));
    --btn-primary-focus-outline-rgb : hsla(var(--brand-h), var(--brand-s), calc(var(--brand-l) * var(--color-level-d1)), 0.3);

    --btn-danger-bg                : hsl(var(--error-h), var(--error-s), var(--error-l));
    --btn-danger-color             : hsl(var(--color-h), var(--color-s), calc(100% - 1 * var(--color-l-step)));
    --btn-danger-shadow            : hsl(var(--error-h), var(--error-s), calc(var(--error-l) * var(--color-level-d2)));
    --btn-danger-hover-bg          : hsl(var(--error-h), var(--error-s), calc(var(--error-l) * var(--color-level-d1)));
    --btn-danger-hover-color       : hsl(var(--color-h), var(--color-s), calc(100% - 1 * var(--color-l-step)));
    --btn-danger-hover-shadow      : hsl(var(--error-h), var(--error-s), calc(var(--error-l) * var(--color-level-d3)));
    --btn-danger-active-bg         : hsl(var(--error-h), var(--error-s), calc(var(--error-l) * var(--color-level-d2)));
    --btn-danger-active-color      : hsl(var(--color-h), var(--color-s), calc(100% - 1 * var(--color-l-step)));
    --btn-danger-active-shadow     : hsl(var(--error-h), var(--error-s), calc(var(--error-l) * var(--color-level-d4)));
    --btn-danger-focus-shadow      : hsl(var(--brand-h), var(--brand-s), calc(var(--brand-l) * var(--color-level-d1)));
    --btn-danger-focus-outline-rgb : hsla(var(--brand-h), var(--brand-s), calc(var(--brand-l) * var(--color-level-d1)), 0.3);

    --btn-header-saparator-color : hsl(var(--color-h), var(--color-s), calc(100% - 4 * var(--color-l-step)));
    --btn-header-main-bg : hsl(var(--color-h), var(--color-s), calc(100% - 4 * var(--color-l-step)));
    --btn-header-main-color : hsl(var(--color-h), var(--color-s), calc(0% + 9 * var(--color-l-step)));
    --btn-header-main-hover-bg : hsl(var(--color-h), var(--color-s), calc(100% - 2 * var(--color-l-step)));

    --btn-header-webadm-main-bg         : transparent;
    --btn-header-webadm-main-color      : var(--new-light4);
    --btn-header-webadm-main-hover-bg   : var(--new-dark11);
    --btn-header-webadm-main-active-bg  : var(--new-dark15);
    --btn-disabled-opacity: 0.3;

    --dialog-bg : var(--new-dark5);
    --dialog-border-color : var(--new-dark11);
    --dialog-header-bg : var(--new-dark6);
    --dialog-header-color: var(--new-dark17);
    --dialog-header-muted-color: var(--new-dark20);
    --dialog-overlay-bg: var(--new-dark1-t50);
    --dialog-box-shadow: 0px 16px 32px var(--new-dark15-t20);

    --svg-legend-bg : var(--new-dark5);
    --svg-legend-border-color : var(--new-dark11);

    --light-text-color : var(--new-light10);
    --light-text-opacity : .4;

    --tab-link-hover-bg           : var(--new-dark11);
    --tab-link-hover-bottom-color : var(--new-dark6);
    --tab-link-active-bg           : var(--new-dark5);
    --tab-link-active-bottom-color : var(--new-dark5);
    --tab-link-selected-color       : var(--new-brand-core);

    --tab-link-webadm-color               : var(--new-light4);
    --tab-link-webadm-hover-bg            : var(--new-dark11);
    --tab-link-webadm-active-bg           : var(--new-dark5);

    --dropdown-menu-arrow-color      : var(--new-dark15);
    --dropdown-menu-arrow-fill-color : var(--new-dark4);

    --dropdown-menu-border : 1px solid var(--new-dark8);
    --dropdown-menu-top-border : 1px solid var(--new-dark15);
    --dropdown-menu-shadow : none;
    --dropdown-menu-bg : var(--new-dark4);
    --drop-menu-systems-bg    : var(--new-dark5);
    --drop-menu-navigation-bg : var(--new-dark7);
    --dropdown-placeholder-color : var(--new-light15);

    --dropdown-item-color: var(--new-light10);
    --dropdown-item-active-bg : var(--new-dark9);
    // --dropdown-item-active-color
    --dropdown-item-hover-bg : var(--new-dark7);
    --dropdown-item-hover-color : var(--new-light10);
    --dropdown-item-selected-bg    : var(--new-dark11);
    --dropdown-item-selected-color : var(--new-light4);
    --dropdown-item-error-color : var(--new-error-core);

    // part of drop-menu
    --system-tile-icon-offline-color : var(--new-error-d1);
    --system-tile-name-color  : var(--new-light4);
    --system-tile-owner-color : var(--new-light10);
    --system-tile-hover-bg : var(--new-dark6);
    --system-tile-active-bg : var(--new-dark5);
    --system-tile-selected-bg : var(--new-dark11);
    --system-tile-nav-link-color : var(--new-light4);
    --system-tile-nav-link-icon-color : var(--new-light4);
    --system-tile-nav-link-hover-bg    : var(--new-dark6);
    --system-tile-nav-link-hover-color : var(--new-light4);
    --system-tile-nav-link-active-bg           : var(--new-dark11);
    --system-tile-nav-link-active-border-color : var(--new-dark11);
    // *****************

    --swagger-get-bg    : #{$blue12};
    --swagger-put-bg    : #{$orange_d1};
    --swagger-delete-bg : var(--new-error-d1);
    --swagger-patch-bg  : #{$cyan600};
    --swagger-post-bg   : #{$green_d1};
    --swagger-btn-execute-bg    : var(--new-brand-core);
    --swagger-btn-execute-color : #{$light4};
    --swagger-btn-value-text-color   : #{$light10};
    --swagger-btn-key-text-color     : #{$purple400};
    --swagger-btn-value-number-color : #{$green_d2};
    --swagger-textarea-color : #{$light10};
    --swagger-required-color : var(--new-error-core);
    --swagger-input-disabled: #{$dark11};
    --swagger-input-disabled-border: #{$dark13};
    --swagger-table-header-color: #{$light4};
    --api-tool-section-header: #{$dark1};
    --media-type-bg: #{$dark11};
    --media-type-border: #{$light13};

    --footer-color : var(--new-light10-t60);

    --tabset-bg : var(--new-dark3);
    --tabset-hover-bg : var(--new-dark6);
    --tabset-color : var(--new-light10);

    --table-alt-row-bg: var(--new-dark5);
    --table-row-hover-bg : rgba(var(--brand-core--rgb), .1);
    --table-row-selected-bg : var(--new-light16);
    --table-row-selected-color : var(--new-light1);

    --dynamic-table-row-hover-bg : var(--new-light16) !important;

    --promo-tile-bg : var(--new-dark4);
    --promo-tile-h4-color : var(--new-light10);
    --promo-tile-img-1-path : url("/static/images/promo/landing_promo_dark_1.svg");
    --promo-tile-img-2-path : url("/static/images/promo/landing_promo_dark_2.svg");
    --promo-tile-img-3-path : url("/static/images/promo/landing_promo_dark_3.svg");

    --toast-danger-bg : var(--red_d3);
    --toast-danger-color : var(--new-light4);
    --toast-danger-border-color : var(--new-red_d3);
    --toast-success-bg : #32731E; //$green_d1;
    --toast-success-color : var(--new-light4);
    --toast-success-border-color : #32731E; //$green_d1;
    --toast-warning-bg : var(--yellow_d2);
    --toast-warning-color : var(--new-dark6);
    --toast-warning-border-color : var(--new-yellow_d2);
    --toast-info-bg : var(--new-brand-d3);
    --toast-info-color : var(--new-light4);
    --toast-info-border-color : var(--new-brand-d3);

    --card-shadow : none;
    --card-active-shadow : 0 2px 5px 0 var(--new-dark6);
    --card-header-bg : var(--new-dark6);
    --card-header-text : var(--new-light4);
    --card-body-bg   : var(--new-dark4);
    --card-hover-bg : var(--new-dark8);

    --card-simple-info-bg           : var(--bluez);
    --card-simple-info-border-color : var(--bluez);
    --card-simple-info-color        : var(--new-light4);
    --card-simple-info-svg-color    : var(--new-light4);

    --card-simple-warning-bg           : var(--yellow_d2_lighter);
    --card-simple-warning-border-color : var(--yellow_d2_lighter);
    --card-simple-warning-color        : var(--new-dark1);
    --card-simple-warning-svg-color    : var(--new-dark1);

    --card-simple-error-bg           : var(--red_d1_lighter);
    --card-simple-error-border-color : var(--red_d1_lighter);
    --card-simple-error-color        : var(--new-light4);
    --card-simple-error-svg-color    : var(--new-light4);
    --card-simple-error-svg-ornament-color    : var(--red_d1_lighter);

    --card-simple-default-bg           : var(--red_d3);
    --card-simple-default-border-color : var(--red_d3);
    --card-simple-default-color        : var(--new-light4);

    --card-support-bg : var(--new-dark6);
    --card-support-color : var(--new-light10);
    --card-support-svg-elem-bg : var(--new-light10);

    --card-capability-header-bg : var(--new-dark6);
    --card-capability-intro-color : var(--new-light10);
    --card-capability-icon        : var(--new-brand-d1);

    --support-lang-wrapper-bg    : var(--new-dark4);
    --support-lang-wrapper-color : var(--new-light10);
    --support-tech-apple-color : var(--new-light4);

    --success-label : var(--green_main);

    --error-label : #C22626;
    --error : var(--new-error-core);

    --input-bg                 : var(--new-dark4);
    --input-hover-bg           : var(--new-dark8);
    --input-color              : var(--new-light10);
    --input-border-color       : var(--new-dark11);
    --input-error-color        : var(--new-red_main);
    --input-error-border-color : var(--new-red_main);
    --input-hover-color        : var(--new-light10);
    --input-hover-border-color : var(--new-dark18);
    --input-focus-color        : var(--new-light4);
    --input-focus-border-color : var(--new-brand-d1);
    --input-focus-shadow-color : var(--new-brand-d1-t30);
    --input-active-bg           : var(--new-dark3);
    --input-active-color        : var(--new-light4);
    --input-active-border-color : var(--new-dark19);
    --input-color-placeholder   : var(--new-light10);

    --input-disabled-color : var(--new-light10);
    --input-disabled-border-color : var(--new-dark11);

    --input-numeric-arrow-bg    : var(--new-dark4);
    --input-numeric-arrow-color : var(--new-light10);

    --badge-opacity : 0.9;
    --badge-base-bg    : var(--new-dark6);
    --badge-base-hover-bg : var(--new-dark9);
    --badge-base-color : var(--new-light4);
    --badge-base-selected-bg : var(--new-dark15);
    --badge-base-selected-hover-bg  : var(--new-dark11);
    --badge-base-selected-active-bg : var(--new-dark8);

    --badge-default-bg    : var(--new-dark11);
    --badge-color : var(--new-light4);
    --badge-selected-color : var(--new-light3);
    --badge-danger-bg    : var(--new-red_d4);
    --badge-danger-bright-bg : var(--new-red_d2);
    --badge-danger-bright-color : var(--new-light4);
    --badge-warning-bg           : #E1A700; //$yellow_d1);
    --badge-warning-bright-bg    : #E1A700; //$yellow_d1);
    --badge-warning-bright-color : var(--new-dark6);
    --badge-success-bg        : var(--new-green_d2);
    --badge-success-bright-bg : var(--new-green_d1);
    --badge-brand-bg : var(--new-brand-d2);
    --badge-info-bg : var(--new-brand-d4);
    --badge-integration-bg : var(--new-dark13);
    --badge-integration-color : var(--new-light4);

    --grey-section-bg : var(--new-dark7);
    --grey-section-sep-color : var(--new-dark11);

    --dashboard-add-widget-color : var(--new-brand-d2);
    --dashboard-widget-hover-color : var(--new-brand-core);
    --dashboard-settings-menu-bg : var(--new-dark6);
    --dashboard-settings-menu-shadow : none;

    --active-license-text: var(--green_main);
    --inactive-license-text: var(--yellow_d2);

    // System groups TODO
    --groups-sidebar-bg: var(--new-dark4);
    @include generateVarAndRgb(--groups-sidebar-highlight, $dark18);
    --groups-sidebar-highlight-color: var(--new-light4);
    --groups-sidebar-triangle-icon-fill: var(--new-dark17);
    --groups-sidebar-triangle-icon-highlight-fill: var(--new-dark6);
    --groups-sidebar-folder-icon-fill: var(--new-dark17);
    --groups-sidebar-folder-icon-highlight-fill: var(--new-dark1);

    --group-card-folder-icon-body-fill: var(--new-dark11);
    --group-card-folder-icon-tab-fill: var(--new-dark13);
    --group-card-bg-grad0: var(--new-dark5);
    --group-card-bg-grad100: var(--new-dark7);
    --group-card-border-color: var(--new-dark10);

    @include generateVarAndRgb(--system-card-bg-grad0, $dark4);
    @include generateVarAndRgb(--system-card-bg-grad100, $dark5);

    --system-card-bg: var(--light2);
    --system-card-active-bg: var(--new-light4);
    --system-card-offline-color: var(--new-light4);
    --system-card-border-color: var(--new-dark8);
    --system-card-owner-color: var(--light16);

    --card-subtext-color: var(--new-light4);
    --card-menu-dots-fill: var(--new-light4);
    --card-placeholder-shadow: inset 0 0.25rem 0.5rem var(--new-light6-t20);
    --card-drag-shadow: 0 1rem 2rem var(--new-light6-t20);

    --card-context-bg: var(--new-dark9);
    --card-context-shadow: 0 1rem 2rem var(--new-light6-t40);

    /*  */
    --new-feature-gradient: linear-gradient(242.24deg, var(--new-dark2) 0.43%, var(--new-brand-d4) 122.68%);
    --cloud-storage-spot-gradient: radial-gradient(50% 50% at 50% 50%, var(--new-dark2) 0%, var(--new-brand-d4) 0.01%, transparent 98.65%);
    --cloud-storage-focus: var(--new-dark6);
    --cloud-storage-focus-2: var(--new-dark6);
    --cloud-storage-info-text: var(--new-light9);

    /* Bookmarks */
    --bookmarks-background-color: inherit;
    --bookmarks-calendar-today-border: var(--new-light1-t40);
    --bookmarks-calendar-today-highlight-shadow: var(--new-light1);
    --bookmarks-input-border-color: var(--new-dark11);
    --bookmarks-time-input-active-bg: var(--new-dark1);
    --bookmarks-filter-header-bg: var(--new-dark7);
    --bookmarks-filter-clear-btn-bg: var(--new-dark9);
    --bookmarks-filter-clear-btn-stroke: var(--new-light4);
    --bookmarks-filter-body-bg: var(--new-dark8);
    --bookmarks-filter-button-bg: var(--new-dark6);
    --bookmarks-filter-filled-text: var(--new-light2);
    --bookmarks-text-highlight-bg: var(--new-dark12);
    --bookmarks-duration-bg: var(--new-dark1-t50);
    --bookmarks-card-background-color: #181c20;
    --bookmarks-card-background-color-hover: var(--dark7);
    --bookmarks-card-shadow-color-hover: var(--new-dark7);
    --bookmarks-card-border-color: inherit;
    --bookmarks-share-header-title-color: var(--light4);
    --bookmarks-share-url-background-color: var(--brand-core);
    --bookmarks-share-url-text-color: var(--light1);
    --bookmarks-share-details-text-color: var(--light4);
    --bookmarks-share-delete-text-color: var(--light4);
    --bookmarks-share-password-container-border-color: var(--dark6);
    --bookmarks-share-password-container-background-color: var(--dark4);
    --bookmarks-share-input-header-text-color: var(--light4);
    --bookmark-sharing-viewer-text-color: var(--light4);

    --tour-background: var(--new-dark9-t40);

    /* System Admin */
    --system-admin-info-text: var(--new-light4);

    --no-systems-description-color: var(--dark17);

    --sidebar-background: var(--new-dark5);
    --sidebar-tab-hover: var(--new-dark6);
    --sidebar-tab-active: var(--new-dark4);
    --sidebar-tab-closed: var(--new-dark8);

    /* Layouts */
    --layout-grid-item-hover: var(--new-light15);
    --layout-grid-item-playing: var(--new-light6);
    --layout-grid-item-playing-hover: var(--new-light1);
    --layout-grid-item-selected: var(--new-brand-core);
    --layout-grid-item-selected-hover: var(--new-brand-l2);

    --placeholder-error-color: var(--new-attention-red);
    --placeholder-info-color: var(--new-light10);
    --placeholder-error-color-old: #{$red_main};
    --placeholder-info-color-old: var(--new-dark11);

    --tree-locked-icon: var(--new-light4);
    --tree-node-editable-color-override: var(--new-dark9);

    --tree-node-main-color: var(--new-light10);
    --tree-node-secondary-color: var(--new-dark17);
    --tree-node-selected-main-color: var(--new-brand-core);
    --tree-node-selected-secondary-color: var(--new-dark17);
    --tree-node-activated-main-color: var(--new-light1);
    --tree-node-activated-secondary-color: var(--new-light1);
    --tree-node-checked-main-color: var(--new-light1);
    --tree-node-checked-secondary-color: var(--new-dark17);
    --tree-node-hover-background: var(--new-dark6);
    --tree-node-pressed-background: var(--new-dark4);
    --tree-node-activated-background: var(--new-dark4);
    --tree-node-hover-activated-background: var(--new-dark7);
    --tree-node-pressed-activated-background: var(--new-dark4);
    --tree-node-playing-outline: var(--new-dark10);
    --tree-node-offline-color: var(--new-dark15);

    --tree-node-action-color: var(--new-light10);
    --tree-node-action-hover-color: var(--new-light3);
    --tree-node-menu-color: var(--new-light10);

    --context-menu-bg: var(--drop-menu-navigation-bg);
    --context-menu-shadow: var(--new-dark1-t20);
    --context-menu-hr: var(--new-dark8);
    --context-menu-item-text: var(--btn-text-color);
    --context-menu-item-icon: var(--svg-path-dark-color);
    --context-menu-item-text-hover: var(--new-light1);
    --context-menu-item-icon-hover: var(--new-light1);
    --context-menu-item-bg-hover: var(--brand-core);
    --context-menu-item-expanded-bg: var(--new-dark9);

    --grid-new-layout-text: var(--new-light17);
    --grid-new-layout-text-highlight: var(--new-light10);

    --overlay-action-bg: var(--new-dark3-t60);
    --overlay-action-svg: var(--new-light1-t80);
    --overlay-action-svg-hover: var(--new-light1);
    --overlay-action-text: var(--new-light1);
    --overlay-text: var(--new-light1);
    --overlay-status-title: var(--new-light10);
    --other-sites-title: var(--new-light10);
    --other-sites-heading-background: var(--new-dark6);
    --other-sites-heading-background-hover: var(--new-dark7);
    --other-sites-heading-background-active: var(--new-dark4);
    --other-sites-expand-stroke: var(--new-light16);

    --no-camera-placeholder-color: var(--new-light10);
    --no-layouts-body-color: var(--new-light17);

    /* Merge */
    --merge-unmerged-error-text: var(--light10);
    --merge-unmerged-system-message: var(--light10);
}
