/*- First level of variables will contain all the colours that will be used in the application.
Naming convention:
**--[type]-[lightness]-[color_alpha]**, where **color_alpha** is added in case it's different than 1.
*Example*:
--primary-l72, --neutral-l53, --accent-l72


    Second level of variables will describe colors by what they'll be used for.
  Naming convention:
  **--[type]-[state]-[element_name]-[what_it_is_used_on]-color**
  *type*: primary, secondary, accent, etc
  *state*: disabled, selected, pressed, etc.
  *element_name*: div, span, h1, button, select, etc.
  *what_it_is_used_on*: border, bg, text

  Example: 
  --primary-l33: hsl(198, 100%, 33%)
  --primary-default-button-background-color: var(--primary-l33)

- Third level of variables will be ones used in Web Components.
  Their naming convention is similar to the second level of color variables, only they have to have the component's name as a prefix.
*/
:root, tab-panel, button-menu, multi-select, modal-confirm, input, radio-button, toggle-switch,
tree-view-item::part(itemWrapper), tree-view-group::part(groupWrapper), tree-view-item, tree-view-group {
    --primary-l10: hsl(198, 100%, 10%); /* Orbit */
    --primary-l13: hsl(198, 100%, 13%); /* Secondary */
    --primary-l23: hsl(198, 100%, 23%); /* Chameleon */
    --primary-l28: hsl(198, 100%, 28%); /* Electric */
    --primary-l33: hsl(198, 100%, 33%); /* Main Event */
    --primary-l33-a06: hsla(198, 100%, 33%, 0.6);
    --primary-l43: hsl(198, 100%, 43%); /* Primary */
    --primary-l43-a08: hsla(198, 100%, 43%, 0.8);
    --primary-l43-a07: hsla(198, 100%, 43%, 0.7);
    --primary-l43-a06: hsla(198, 100%, 43%, 0.6);
    --primary-l43-a05: hsla(198, 100%, 43%, 0.5);
    --primary-l43-a04: hsla(198, 100%, 43%, 0.4);
    --primary-l43-a03: hsla(198, 100%, 43%, 0.3);
    --primary-l43-a035: hsla(198, 100%, 43%, 0.35);
    --primary-l43-a015: hsla(198, 100%, 43%, 0.15);
    --primary-l53: hsl(198, 100%, 53%); /* Argentina */
    --primary-l53-a035: hsl(198, 100%, 53%, 0.35);
    --primary-l63: hsl(198, 100%, 63%); /* Jazz */
    --primary-l72: hsl(198, 100%, 72%); /* Unicorn */
    --primary-l85: hsl(198, 100%, 85%); /* Summer */

    --accent-l36: hsl(54, 100%, 36%, 0.28); /* Yoga */

    --neutral-black: hsl(0, 0%, 0%); /* Black */
    --neutral-black-a025: hsla(0, 0%, 0%, 0.25);
    --neutral-black-a03: hsla(0, 0%, 0%, 0.3);
    --neutral-black-a04: hsla(0, 0%, 0%, 0.4);
    --neutral-black-a05: hsla(0, 0%, 0%, 0.5);
    --neutral-black-a06: hsla(0, 0%, 0%, 0.6);
    --neutral-black-a07: hsla(0, 0%, 0%, 0.7);
    --neutral-black-a08: hsla(0, 0%, 0%, 0.8);
    --neutral-white: hsl(0, 0%, 100%); /* White */
    --neutral-white-a01: hsla(0, 0%, 100%, 0.1);
    --neutral-white-a025: hsla(0, 0%, 100%, 0.25);
    --neutral-white-a02: hsla(0, 0%, 100%, 0.2);
    --neutral-white-a03: hsla(0, 0%, 100%, 0.3);
    --neutral-white-a035: hsla(0, 0%, 100%, 0.35);
    --neutral-white-a05: hsla(0, 0%, 100%, 0.5);
    --neutral-white-a06: hsla(0, 0%, 100%, 0.6);
    --neutral-l0: hsl(198, 15%, 0%); /* Black */
    --neutral-l0-a06: hsla(198, 15%, 0%, 0.6);
    --neutral-l3: hsl(198, 15%, 3%); /* Night */
    --neutral-l6: hsl(198, 15%, 6%); /* Black Hole */
    --neutral-l8: hsl(198, 15%, 8%); /* Charcoal */
    --neutral-l13: hsl(198, 15%, 13%); /* DAK */
    --neutral-l23: hsl(198, 15%, 23%); /* Petrol */
    --neutral-l28: hsl(198, 15%, 28%); /* Koala */
    --neutral-l33: hsl(198, 15%, 33%); /* Dolphin */
    --neutral-l43: hsl(198, 15%, 43%); /* England */
    --neutral-l53: hsl(198, 15%, 53%); /* Stone */
    --neutral-l78: hsl(198, 15%, 78%); /* Mozart */
    --neutral-l95: hsl(198, 15%, 95%); /* Candyfloss */
    --destructive-l29: hsl(360, 93%, 29%); /* Cherry */
    --destructive-l39: hsl(360, 93%, 39%); /* Radio */
    --destructive-l63: hsl(360, 93%, 63%); /* Pop */
    --destructive-l69: hsl(360, 93%, 69%); /* Flamingo */
    --confirmation-l17: hsl(109, 95%, 17%); /* Forest */

    --custom-color-l35: hsl(180, 2%, 40%);
    /* body */
    --general-font: Open Sans, Arial, Helvetica;
    --heading2-size: 24px;
    --neutral-default-nav-background-color: var(--neutral-l3);
    --neutral-default-body-background-color: var(--neutral-l8);
    --neutral-background-color: var( --neutral-black);
    --neutral-background-color-a025: var(--neutral-black-a025);
    --neutral-background-color-a03: var(--neutral-black-a03);
    --neutral-background-color-a04: var(--neutral-black-a04);
    --neutral-background-color-a05: var(--neutral-black-a05);
    --neutral-background-color-a06: var(--neutral-black-a06);
    --neutral-background-color-a07: var(--neutral-black-a07);
    --neutral-background-color-a08: var(--neutral-black-a08);
    /* a */
    --primary-default-a-background-color: var(--primary-l43);
    --primary-hover-a-background-color: var(--primary-l43);
    --primary-active-a-border-color: var(--primary-l43);
    --primary-default-a-text-color: var(--primary-l43);
    --primary-hover-a-text-color: var(--primary-l43);
    /* input */
    --primary-default-input-background-color: var(--neutral-l6);
    /* button */
    --primary-default-button-background-color: var(--primary-l33);
    --primary-disabled-hover-button-background-color: var(--primary-l33);
    --primary-default-button-background-color-a07: var(--primary-l33-a07);
    --primary-hover-button-background-color: var(--primary-l23);
    --neutral-hover-button-background-color: var(--neutral-white-a01);
    --primary-hover-button-border-color: var(--primary-l43);
    --primary-selected-button-background-color: var(--primary-l43);
    --primary-selected-button-text-color: var(--primary-l43);
    --neutral-default-button-text-color: var(--neutral-white);
    --secondary-default-button-border-color: var(--primary-l43);
    --secondary-default-button-text-color: var(--primary-l43);
    --secondary-hover-button-border-color: var(--primary-l53);
    --secondary-hover-button-text-color: var(--primary-l53);
    --tertiary-default-button-background-color: var(--neutral-l33);
    --tertiary-hover-button-background-color: var(--neutral-l43);
    --destructive-default-button-background-color: var(--destructive-l39);
    --destructive-hover-button-background-color: var(--destructive-l29);
    --destructive-default-button-text-color: var(--destructive-l63);
    --secondary-destructive-default-button-border-color: var(--destructive-l63);
    --secondary-destructive-default-button-text-color: var(--destructive-l63);
    --destructive-hover-button-text-color: var(--destructive-l69);
    --secondary-destructive-hover-button-border-color: var(--destructive-l69);
    --secondary-destructive-hover-button-text-color: var(--destructive-l69);
    /* li */
    --primary-default-li-background-color: var(--primary-l43-a07);
    --primary-active-li-background-color: var(--primary-l43);
    --primary-default-li-text-color-a07: var(--primary-l43-a07);
    --primary-hover-li-background-color: var(--primary-l43);
    --primary-hover-li-text-color: var(--primary-l43);
    /* span */
    --primary-default-span-text-color: var(--primary-l43);
    /* div */
    --neutral-default-div-border-color-a02: var(--neutral-white-a02);
    --neutral-default-div-border-color: var(--neutral-l53);
    --neutral-hover-div-background-color-a02: var(--neutral-white-a02);
    --neutral-hover-div-background-color-a03: var(--neutral-white-a03);
    --neutral-default-div-text-color: var(--neutral-white);
    --neutral-default-div-box-shadow-color-a06: var(--neutral-l0-a06);
    --primary-default-div-background-color: var(--primary-l43);
    --primary-default-div-background-color-a06: var(--primary-l33-a06);
    --primary-default-div-border-color: var(--primary-l43);
    --primary-default-div-border-color-a06: var(--primary-l33-a06);
    --primary-default-div-outline-color: var(--primary-l43);
    --primary-default-div-outline-color-a07: var(--primary-l43-a07);
    --primary-default-div-text-color: var(--primary-l43);
    --primary-active-div-text-color: var(--primary-l43);
    --primary-active-div-background-color-a07: var(--primary-l43-a07);
    --primary-selected-div-background-color: var(--primary-l23);
    --primary-hover-div-outline-color: var(--primary-l43);
    --primary-hover-div-background-color: var(--primary-l10);
    --destructive-default-div-text-color: var(--destructive-l63);
    /* checkbox */
    --primary-default-checkbox-border-color: var(--primary-l43);
    /* radio */
    --primary-default-radio-border-color: var(--primary-l43);
    --primary-default-radio-background-color: var(--primary-l43);
    /* h2 */
    --primary-default-h2-text-color: var(--primary-l43);
    --primary-default-h2-border-color: var(--primary-l43);
    /* h3 */
    --primary-active-h3-text-color: var(--primary-l43);
    --primary-hover-h3-background-color: var(--primary-l23);
    --primary-active-h3-background-color: var(--primary-l13);
    --primary-hover-h3-border-color: var(--primary-l23);
    --neutral-default-h3-border-color: var(--neutral-l43);
    /* icon */
    --primary-default-icon-background-color: var(--primary-l43);
    --primary-default-icon-fill-color: var(--primary-l43);
    --primary-active-icon-background-color-a08: var(--primary-l43-a08);
    --primary-active-icon-border-color: var(--primary-l43);
    --primary-hover-icon-background-color-a05: var(--primary-l43-a05);
    --primary-active-icon-text-color-a05: var(--primary-l43-a05);
    --destructive-default-icon-background-color: var(--destructive-l63);
    --secondary-default-icon-background-color: var(--primary-l43);
    /* Scrollbar */
    --scrollbar-track-color: hsl(0, 0%, 43%);
    --scrollbar-thumb-color: var(--neutral-l33);
    --scrollbar-thumb-hover-color: var(--neutral-l43);
    --scrollbar-thumb-active-color: var(--neutral-l28);
    /* Mark */
    --accent-default-mark-text-background-color: var(--accent-l36);
    --accent-default-mark-text-color: var(--neutral-white);
    /************************************  Web components    **********************************************/
    /* modal-confirm */
    --modal-confirm-primary-default-button-background-color: var(--primary-default-button-background-color);
    /* text-link */
    --text-link-primary-default-a-text-color: var(--primary-default-a-text-color);
    /* dropdown-menu */
    --dropdown-menu-option-primary-default-option-background-color: var(--primary-l43);
    --dropdown-menu-neutral-default-label-text-color: var(--neutral-white);
    --dropdown-menu-neutral-default-options-wrapper-background-color: var(--neutral-black);
    --dropdown-menu-neutral-default-label-background-color: transparent;
    --dropdown-menu-option-neutral-default-div-text-color: var(--neutral-white);
    --dropdown-menu-option-neutral-default-div-background-color: var(--neutral-l6);
    --dropdown-menu-option-primary-selected-div-background-color: var(--primary-l10);
    --dropdown-menu-option-primary-hover-div-background-color: var(--primary-l13);
    /* multi-select */
    --multi-select-primary-default-checkbox-border-color: var(--primary-default-checkbox-border-color);
    /* toggle-switch */
    --toggle-switch-primary-active-div-background-color: var(--primary-l43);
    --toggle-switch-primary-active-div-border-color: var(--primary-l43);
    --toggle-switch-primary-hover-div-border-color: var(--primary-l72);
    --toggle-switch-primary-hover-div-background-color: var(--neutral-l3);
    --toggle-switch-primary-hover-button-background-color: var(--primary-l72);
    --toggle-switch-primary-pressed-div-border-color: var(--primary-l33);
    --toggle-switch-primary-pressed-div-background-color: var(--neutral-l3);
    --toggle-switch-primary-pressed-button-background-color: var(--primary-l33);
    --toggle-switch-primary-active-hover-div-background-color: var(--primary-l72);
    --toggle-switch-primary-active-hover-div-border-color: var(--primary-l72);
    --toggle-switch-primary-active-pressed-div-background-color: var(--primary-l33);
    --toggle-switch-primary-active-pressed-div-border-color: var(--primary-l33);
    /* mlstn-button */
    --mlstn-button-neutral-default-button-old-background-color-a025: var(--neutral-white-a025);
    --mlstn-button-neutral-hover-button-old-background-color-a035: var(--neutral-white-a035);
    --mlstn-button-primary-default-button-background-color: var(--primary-default-button-background-color);
    --mlstn-button-primary-hover-button-background-color: var(--primary-hover-button-background-color);
    --mlstn-button-neutral-default-button-text-color: var(--neutral-default-button-text-color);
    --mlstn-button-secondary-default-button-border-color: var(--secondary-default-button-border-color);
    --mlstn-button-secondary-default-button-text-color: var(--secondary-default-button-text-color);
    --mlstn-button-secondary-hover-button-border-color: var(--secondary-hover-button-border-color);
    --mlstn-button-secondary-hover-button-text-color: var(--secondary-hover-button-text-color);
    --mlstn-button-tertiary-default-button-background-color: var(--tertiary-default-button-background-color);
    --mlstn-button-tertiary-hover-button-background-color: var(--tertiary-hover-button-background-color);
    --mlstn-button-destructive-default-button-background-color: var(--destructive-default-button-background-color);
    --mlstn-button-destructive-hover-button-background-color: var(--destructive-hover-button-background-color);
    --mlstn-button-secondary-destructive-default-button-border-color: var(--secondary-destructive-default-button-border-color);
    --mlstn-button-secondary-destructive-default-button-text-color: var(--secondary-destructive-default-button-text-color);
    --mlstn-button-destructive-default-button-text-color: var(--destructive-default-button-text-color);
    --mlstn-button-secondary-destructive-hover-button-border-color: var(--secondary-destructive-hover-button-border-color);
    --mlstn-button-secondary-destructive-hover-button-text-color: var(--secondary-destructive-hover-button-text-color);
    --mlstn-button-destructive-hover-button-text-color: var(--destructive-hover-button-text-color);
    --mlstn-button-border-radius: 2px;
    --mlstn-button-font-family: var(--general-font);
    --mlstn-button-font-size: 14px;
    --mlstn-button-font-weight: 600;
    /* loading-indicator */
    --loading-indicator-destructive-default-icon-background-color: var(--destructive-default-icon-background-color);
    --loading-indicator-secondary-default-icon-background-color: var(--secondary-default-icon-background-color);
    /* scroll-bar */
    --scroll-bar-neutral-default-track-background-color: var(--scrollbar-track-color);
    --scroll-bar-neutral-hover-track-background-color: var(--scrollbar-track-color);
    --scroll-bar-neutral-default-thumb-background-color: var(--scrollbar-thumb-color);
    --scroll-bar-neutral-hover-thumb-background-color: var(--scrollbar-thumb-hover-color);
    --scroll-bar-neutral-active-thumb-background-color: var(--scrollbar-thumb-active-color);
    /* form-field */
    --form-field-destructive-default-div-text-color: var(--destructive-default-div-text-color);
    --form-field-neutral-default-div-background-color: var(--primary-default-input-background-color);
    --form-field-destructive-focus-div-border-color: var(--destructive-default-button-background-color);
    /* split-panel*/
    --split-panel-background-color: var(--neutral-l8);
    --median-background-color: var(--neutral-l23);
    --median-line-color: var(--primary-l43);
    --median-size: 4px;
    --collapse-default-background-color: var(--neutral-l33);
    --collapse-hover-background-color: var(--neutral-l43);
    /* tab-panel */
    --tab-panel-neutral-default-h3-border-color: var(--neutral-default-h3-border-color);
    --tab-panel-primary-hover-div-border-color: var(--primary-default-div-border-color);
    --tab-panel-primary-selected-div-border-color: var(--primary-default-div-border-color);
    --tab-panel-primary-active-div-background-color: var(--primary-active-h3-background-color);
    --tab-panel-primary-hover-div-background-color: var(--primary-hover-h3-background-color);
    /* button-menu */
    --button-menu-primary-div-background-color: rgba(255, 255, 255, 0.3);
    --button-menu-primary-hover-div-background-color: var(--primary-l13);
    --button-menu-neutral-hover-div-background-color-a02: var(--neutral-hover-div-background-color-a02);
    --button-menu-neutral-hover-div-background-color-a03: var(--neutral-hover-div-background-color-a03);
    --button-menu-neutral-default-div-text-color: var(--neutral-default-div-text-color);
    --button-menu-neutral-default-div-background-color: var(--neutral-l6);
    --button-menu-neutral-default-div-border-color: var(--neutral-default-div-border-color);
    --button-menu-neutral-default-div-box-shadow-color-a06: var(--neutral-default-div-box-shadow-color-a06);
    --button-menu-div-margin: 2.5px 0px 0px 0px;
    --button-menu-slot-div-width: auto;
    --button-menu-slot-div-min-width: 174px;
    --button-menu-slot-padding: 6px 12px 6px 12px;
    /* radio-button */
    --radio-button-input-width-hight-size: 16px;
    --radio-button-input-border-size: 1px;
    --radio-button-input-border-gap-padding: 3px;
    --radio-button-input-border-radius: 100%;
    --radio-button-input-circle-margin-right: 8px;
    --radio-button-neutral-deselected-input-border-circle: var(--neutral-white);
    --radio-button-primary-selected-hover-input-border-color-circle: var(--primary-l72);
    --radio-button-primary-hover-input-border-color: var(--primary-l72);
    --radio-button-primary-selected-input-border-color-circle: var(--primary-l53);
    --radio-button-checked-background-color: var(--neutral-l6);
    --radio-button-disabled-input-circle-label-text-opacity: 0.30;
    --radio-button-label-text-color: var(--neutral-white);
    --radio-button-label-text-font-size: 14px;
    --radio-button-label-text-font-weight: 400;
    --radio-button-label-text-line-height: 20px;
    --radio-button-primary-selected-input-border-color-circle: var(--primary-l53);
    --radio-button-primary-selected-active-input-border-color-circle: var(--primary-l33);
    --radio-button-primary-selected-disabled-input-border-color-circle: var(--primary-l33);
    --radio-button-primary-active-input-border-color: var(--primary-l33);
    /* tree-view-item */
    --tree-view-item-primary-hover-div-background-color: var(--primary-l13);
    --tree-view-item-accent-mark-background-color: var(--accent-default-mark-text-background-color);
    --tree-view-item-accent-mark-color: var(--accent-default-mark-text-color);
    --tree-view-item-color-text: var(--neutral-white);
    --tree-view-item-background-color: var(--neutral-l8);
    --tree-view-item-background-color-hover: var(--primary-l13);
    --tree-view-item-background-color-selected: var(--primary-l28);
    --tree-view-item-sub-title-color: var(--neutral-white-a06);
    --tree-view-item-color-disabled-text: var(--neutral-white-a035);
    --tree-view-item-sub-title-color: var(--neutral-white-a06);
    /* tree-view-group */
    --tree-view-group-accent-mark-background-color: var(--accent-default-mark-text-background-color);
    --tree-view-group-accent-mark-color: var(--accent-default-mark-text-color);
    --tree-view-group-background-color-hover: var(--primary-l13);
    --tree-view-group-color-disabled-text: var(--neutral-white-a035);
    /* search-box */
    --search-box-neutral-default-input-border: 1px solid var(--neutral-l43);
    --search-box-neutral-hover-input-border: 1px solid var(--neutral-l78);
    --search-box-neutral-default-input-text-color: var(--neutral-white);
    --search-box-neutral-default-placeholder-text-color: var(--neutral-white-a06);
    --search-box-neutral-default-form-background-color: var( --neutral-l6);
    --search-box-primary-focus-input-border: 1px solid var(--primary-l43);
    --search-box-border-radius: 2px;
    --recent-searches-border: var(--neutral-l53);
    --recent-searches-background-color: var(--neutral-l6);
    --recent-searches-title-color: var(--neutral-white-a06);
    --recent-searches-hover-background-color: var(--primary-l13);
    /*toast-message*/
    --toast-mesage-width: 276px;
    --toast-mesage-default-toast-background-color: var(--primary-l13);
    --toast-mesage-hover-toast-background-color: var(--primary-l23);
    --toast-mesage-active-toast-background-color: var(--primary-l10);
    --toast-mesage-primary-toast-text-color: var(--neutral-white);
    --toast-mesage-secondary-toast-text-color: var(--neutral-white-a06);
    --toast-mesage-font-family: var(--general-font);
    /*timeline*/
    --timeline-background-color: var(--neutral-l8);
    /*range-slider*/
    --range-slider-input-unfilled-track-color: var(--neutral-l43);
    --range-slider-input-thumb-hover-color: var(--primary-l72);
    --range-slider-label-hover: var(--neutral-white-a02);
    --range-slider-label-pressed: var(--neutral-white-a03);
    --range-slider-button-menu-neutral-default-div-background-color: var(--neutral-l6);
    --range-slider-button-menu-neutral-default-div-border-color: var(--neutral-default-div-border-color);
    --range-slider-button-menu-neutral-default: var(--neutral-default-div-box-shadow-color-a06);
    /*shuttle-slider*/
    --shuttle-slider-input-track-width: 94px;
    --shuttle-slider-input-track-height: 2px;
    --shuttle-slider-input-unfilled-track-color: var(--neutral-l43);
    --shuttle-slider-input-thumb-width: 6px;
    --shuttle-slider-input-thumb-height: 18px;
    --shuttle-slider-input-thumb-border-radius: 6px;
    --shuttle-slider-input-thumb-color: var(--neutral-white);
    --shuttle-slider-input-thumb-hover-color: var(--primary-l72);
    --shuttle-slider-input-disabled-thumb-color: var(--custom-color-l35);
    /*time slot*/
    --time-slot-border-color: var(--neutral-l78);
    --time-slot-short-border-color: var( --neutral-l43);
    --time-slot-text-color: var(--neutral-white);
    /*playback header*/
    --playback-header-background-color: var(--neutral-l95);
    /*current time*/
    --current-time-background-color: var(--neutral-l95);
    --current-time-default-text-color: var(--neutral-l3);
    --current-time-hover-text-color: var(--primary-l33);
    --current-time-collapsed-text-color: var(--neutral-white);
    /* toggle button playback/live */
    --toggle-button-container-background-color: var( --neutral-l23);
    --toggle-button-active-button-background-color: var(--primary-l33);
    --toggle-button-default-text-color: var(--neutral-white-a06);
    --toggle-button-active-text-color: var(--neutral-white);
    --toggle-button-font-family: var(--general-font);
}


/* scroll width */
::-webkit-scrollbar {
    width: 8px;
}

/* scroll Track */
::-webkit-scrollbar-track {
    background: transparent;
}

/* scroll Handle */
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color);
}

    /* scroll Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: var(--scrollbar-thumb-hover-color);
    }

::-webkit-scrollbar-button {
    display: none;
}