/*
Assign values from root.css.
Put specific parameters which are only used in one place in specific.css
*/
:root {
    /* Borders */
    --standard-border-colour: var(--variant3);
    --inner-border-colour: var(--variant3);
    --inner-border-hover-colour: var(--variant2b);
    --textbox-border-colour: var(--soft-blue-gray);
    --textbox-border-hover-colour: var(--light-blue-gray);
    --textbox-border-focussed-colour: var(--light-blue-gray);
    
    /* General colours */
    --workspace-background-colour: var(--variant4);
    --standard-text-colour: var(--prussian-Blue);
    --heading-text-colour: var(--root-colour-1);
    --disabled-text-colour: var(--variant2b);
    --grey-text-on-light-grey-bg: var(--variant2);
    --standard-background-colour: var(--lightest);
    --standard-text-input-colour: var(--variant2);
    --text-link-hover-colour: var(--root-colour-2);
    --text-link-hover-background: var(--lightest);
    --control-colour: var(--variant2);
    --control-hover-colour: var(--root-colour-1);
    --tippy-background-colour: var(--deep-blue);

    /* Layout variables */
    --minimise-icon-fg-colour: var(--lightest);
    --minimise-icon-fg-hover: var(--lightest);
    --top-right-text-colour: var(--variant2);
    --top-right-text-colour-hover: var(--darkest);
    --top-right-icon-colour: var(--variant2);
    --ps-results-icon-colour: var(--variant2);
    --ps-results-icon-colour-hover: var(--darkest);
    --main-nav-border-colour: var(--root-colour-3);
    --main-nav-border-width: 4px;

    
    /* Gadget specific */
    --gadget-background-colour: var(--lightest);
    --gadget-icon-hover-colour: var(--root-colour-2);
    --gadget-header-background-colour: var(--lightest);
    --gadget-header-foreground-colour: var(--root-colour-1);
    --gadget-header-weight: var(--subheading-weight);
    --gadget-header-font-size: var(--subheading-text-size);
    --gadget-header-padding: var(--generic-element-gap);
    --gadget-internal-icon-colour: var(--root-colour-1);
    --gadget-internal-icon-colour-hover: var(--root-colour-2);

    /* Grouped gadget */
    --grouped-gadget-header-foreground: var(--gadget-header-foreground-colour);
    --grouped-gadget-tab-colour: var(--root-colour-1);
    --tab-background-colour: var(--variant4);

    /* Buttons */
    --button-text-colour: var(--lightest);
    --button-cancel-text-colour: var(--blue-gray);
    --cancel-button-border-colour: var(--soft-blue-gray);
    --cancel-button-background-colour: var(--lightest);
    --button-background-colour: var(--root-colour-2);
    --button-border-colour: var(--root-colour-2);
    --button-text-hover-colour: var(--lightest);
    --button-background-hover-colour: var(--root-colour-1);
    --button-focus-colour: var(--lightest);
    --button-focus-background-colour: var(--root-colour-1);
    --button-border-hover-colour: var(--root-colour-1);
    --button-border-width: var(--inner-border-width);
    --non-highlighted-button-colour: var(--variant2);
    --button-background-colour-hover: var(--root-colour-1);

    --secondary-button-hover-colour: var(--state-blue-lighter);
    --secondary-button-hover-text-colour: var(--prussian-Blue);

    /* menu highlight */
    --menu-button-hover-background-color: var(--alice-Blue);
    --menu-button-text-color: var(--prussian-Blue)

    /* Standard button widths */
    --cancel-button-width: calc(2 * var(--button-left-right-padding) + 42px);
    --ok-button-width: calc(2 * var(--button-left-right-padding) + 21px);
    --set-button-width: calc(2 * var(--button-left-right-padding) + 21px);
    --clear-button-width: calc(2 * var(--button-left-right-padding) + 32px);
    --search-button-width: calc(2 * var(--button-left-right-padding) + 41px);
    --select-button-width: calc(2 * var(--button-left-right-padding) + 41px);
    --overlay-colour: var(--variant2b);
    --overlay-opacity: 0.5;
   
    /* Waiting blocker relates to the full screen overlay cover - set to be grey with low opacity */
    --waiting-blocker-colour: var(--variant1);
    --waiting-blocker-opacity: 0.2;
    
    /* Loading animation blocks appearing over blocker parameters */
    --loading-animation-bar-colour: var(--darkest);
    --loading-animation-bar-opacity: 0.2;
    --loading-animation-bar-height: 40px;
    --loading-animation-bar-height16: 16px;
    --loading-animation-bar-height36: 36px;
    --loading-animation-bar-width: 5px;
    --loading-animation-bar-gap: 2px;
    --loading-animation-scaleY-initial: 0.4;
    
    /* For popups */
    --background-cover-colour: var(--root-colour-1);
    --background-colour-opacity: 0.5;

    /* For blocking gadgets */
    --blocker-colour: rgba(128,128,128,0.2);

    /* Shadow colours (previously used overlay-colour) */
    --shadow-colour: var(--variant2b);
        
    /* Misc */
    --highlight-border-colour: var(--variant3);    
    --active-tab-foreground-colour: var(--lightest);
    --active-tab-background-colour: var(--root-colour-1);
    --active-tab-text-color: var(--lightest);
    --ami-locked-gadget-colour: var(--variant3);
    --ami-locked-gadget-colour-fg: var(--variant2);
    --inverted-text-bg-colour: var(--root-colour-1);
    --standard-table-padding: calc(var(--generic-padding) * 2/3);
    --menu-container-background: var(--standard-background-colour);
    --checkbox-icon-gap: calc(var(--generic-padding) / 2);

    /* Locked gadget header */
    --locked-gadget-header-bg-colour: var(--root-colour-3);
    --locked-gadget-header-fg-colour: var(--lightest);
    --locked-gadget-header-bg-colour-hover: var(--darkest);

    /* Browse gadget - may extend to others too hence in this file */
    --accordion-background-colour: var(--root-colour-1);
    --selected-item-background-colour: var(--selected-item-background-color);
    --selected-item-foreground-colour: var(--lightest);
    --accordion-hover-selected-background-colour: var(--root-colour-2);
    --accordion-hover-selected-foreground-colour: var(--variant2);
    --browse-gadget-arrow-colour: var(--variant2);

    /* Pop up dialogues */
    --popup-dialog-title-text-colour: var(--root-colour-1);
    --dialog-border-colour: var(--variant3);
    --dialog-heading-size: var(--subheading-text-size);
    --dialog-heading-weight: var(--subheading-text-weight);
    --shadow-colour: var(--variant2);

    /* Gadgets with tables */
    --table-header-background-colour: var(--variant4);
    --table-header-text-colour: var(--darkest);
    --alternate-list-item-background-color: var(--variant4);
    --available-attribute-bg-colour: var(--highlight);
    --attribref-background-colour: var(--highlight-bg-colour);
    --available-attribute: var(--alternate-highlight);
    --special-background-colour: var(--highlight);

    /* Input */
    --input-alongside-button-height: calc(var(--standard-button-height) - 2px);
    --input-border-hover-colour: var(--variant2);
    
    /* List elements */
    --list-element-vertical-padding: 4px;
    --browse-list-line-height: 22px;
    --browser-list-background: var(--background-gray-light);

    /* Menu items */
    --icon-button-background-colour: var(--root-colour-3);
    --icon-button-background-hover-colour: var(--root-colour-2);
    --menu-background-colour: linear-gradient(180deg, #02a84b, #016841);
    /*linear-gradient(180.16deg, #31AB46 0%, #175222 100%)*/

    /* Config options */
    --edit-workspace-title-colour: var(--root-colour-1);

    /* Attribute editor */
    --choice-background-colour: var(--highlight);
    --choices-unavailable-background-colour: var(--variant3);
    --selected-tab-colour: var(--root-colour-1);
    --history-table-width: 60%;
    --history-values-width: calc(40% - 2 * var(--generic-element-gap));
   
    /* Relations gadget */
    --single-relation-colour: var(--root-colour-1-brighter);
    --multiple-relation-colour: var(--root-colour-2);

    /* Search gadget */
    --search-results-highlight-colour: var(--root-colour-2);
    --search-results-icon-size: var(--standard-icon-size);

    /* Error messages */
    --error-message-bg-colour: var(--lavender-Blush);
    --error-message-fg-colour: var(--prussian-Blue); 
    --error-message-dark-icon-colour: var(--root-colour-1); 

    /* Edit attribute */
    --edit-attribute-default-fg: var(--root-colour-1);
    --edit-attribute-default-bg: var(--lightest);
    --edit-attribute-active-fg: var(--lightest);
    --edit-attribute-active-bg: var(--root-colour-1);

    /* Left hand nav */
    --left-nav-color: var(--lightest);
    --left-nav-hover-color: var(--lightest);
    --version-colour: var(--root-colour-1-lightest);
    --nav-dropdown-colour: var(--lightest);
    --nav-panel-max-height: 300px;
    
    /* Workspace editor */
    --editor-controls-colour: var(--root-colour-2);
    --editor-controls-hover-colour: var(--root-colour-1);
    --editor-controls-border-colour: var(--root-colour-2);
    --alternate-section-colour: var(--variant4);

    /* Minimise icon */
    --ps-menu-icon-hover-bg-colour: var(--lightest);
    
    /* Layout */
    --main-search-bg-colour: var(--root-colour-2);
    --main-search-fg-colour: var(--lightest);
    --main-search-bg-colour-hover: var(--root-colour-1);
    --main-search-fg-colour-hover: var(--lightest);
    --ps-icons-background-colour: var(--lightest);
    --ps-workspace-colour: var(--variant4);
    --ps-menu-icon-bg-colour: var(--variant4);
    --ps-filters-bg-colour: var(--lightest);
    --ps-filters-link-colour: var(--variant2);
    --ps-filters-link-bg-hover-colour: var(--variant4);
    --ps-results-bg-colour: var(--lightest);
    --ps-results-link-bg-hover-colour: var(--variant4);
    --ps-facet-number-bg-colour: var(--variant4);
    --ps-applied-filter-icon-hover-color: var(--root-colour-2);

    /* Saved search */
    --saved-search-bg-colour: var(--lightest);
    --saved-search-tab-container-bg-colour: var(--variant4);
    --saved-search-tab-selected-bg-colour: var(--root-colour-1);
    --saved-search-tab-non-selected-fg-colour: var(--root-colour-1);
    --saved-search-text-colour: var(--standard-text-colour);
    --saved-search-text-hover-colour: var(--darkest);
    --saved-search-border-colour: var(--variant3);
    --saved-search-input-border-colour: var(--variant3);
    --saved-search-filter-bg-colour: var(--variant5);
    --saved-search-filter-fg-colour: var(--variant1);

    /* Product search options */
    --options-bg-colour: var(--lightest);
    --options-fg-colour: var(--variant2);
    --options-bg-colour-hover: var(--root-colour-1);
    --options-fg-colour-hover: var(--lightest);

    /* Bulk operations step through assigned */
    --bulk-operation-filler-empty: var(--variant4);
    --bulk-operation-filler-full: var(--root-colour-1-lightest);
    --step-active-text-colour: var(--root-colour-1);
    --step-visited-shape-colour: var(--variant2);
    --step-visited-text-colour: var(--variant2);
    --step-inactive-colour: var(--variant3);

    /* Gadget menus */
    --menu-item-fg-colour: var(--root-colour-1);
    --menu-item-fg-colour-hover: var(--lightest);
    --menu-item-bg-colour-hover: var(--root-colour-1);
    --menu-item-padding: calc(var(--generic-padding) * 2 / 3);
    
    /* Change password dialog */
    --change-password-dialog-width: 400px;

    /* Layout variables */
    --main-navigation-z-index: 112;
    --minimise-icon-container-size: 28px;
    --minimise-icon-size: 13px;
    --menu-shrink-time: 0.5s;
    --main-search-height: 35px;
    --main-search-input-width: 285px;
    --main-search-button-width: 45px;
    --main-search-icon-size: 13px;
    --top-right-elements-width: 230px;
    --top-right-controls-text-size: 13px;
    --top-right-controls-icon-size: 18px;
    --flyout-width: 300px;

    /* Product search */
    --ps-menu-icon-container-size: 30px;
    --ps-menu-icon-size: 16px;
    --ps-icon-button-height: 25px;
    --ps-facets-width: 280px;
    --ps-facet-font-size: 11px;
    --ps-applied-filter-icon-size: 16px;
    --ps-filter-input-search-width: 45px;
    --ps-facets-results-config-height-top: 250px;
    --ps-expanded-filter-box-width: 258px;
    --ps-facets-results-config-height-bottom: 100px;
    --ps-facet-hover-shift: 10px;
    --ps-save-search-menu-width: 205px;
    --ps-save-search-menu-edited-width: 240px;
    --ps-flyout-triangle-size: 10px;
    --ps-options-button-height: 21px;
    --ps-applied-facet-menu-width: 160px;
    --ps-default-result-layout-dropdown-width: 240px;
    --ps-help-icon-colour: var(--root-colour-1);
    --ps-help-icon-colour-hover: var(--root-colour-2);
    --ps-cursor-pointer: pointer;
    --ps-cursor-default: default;
    --ps-drag-area-height: 500px;

    /* Saved search specific */
    --saved-search-border-width: 0px;
    --saved-search-input-border-width: 1px;
    --saved-search-details-width: 270px;
    --saved-search-shared-with-list-height: 250px;
    
    /* Bulk operations */
    --bulk-operations-min-width: 520px;
    --bulk-operations-tabs-min-height: 76px;
    --step-circle-size: 34px;
    --step-line-thickness: 1px;

    /* Config options */
    --config-options-menu-width: 190px;
    --config-options-line-height: 21px;
    --price-list-name-width: 200px;
    --price-list-input-width: 60px;
    --configure-results-width: 500px;
    --configure-results-table-columns-height: 80px; 
    --bound-template-file-path-width: 300px;

    /* Search gadget */
    --search-gadget-left-hand-column: 130px;
    --search-gadget-attribute-options-width: 100px;
    --search-gadget-edit-dialog-left-width: 120px;

    /* Search Config Workspace */
    --search-config-table-rows: 20;
    --search-config-row-height: 32px;
    --search-config-name-column-width: 232px;
    --search-config-column-width: 78px;
    --reindex-column-width: 120px;
    --status-column-width: 150px;
    --search-config-table-width: calc(calc(19 + var(--search-config-name-column-width)) + calc(7 * var(--search-config-column-width)));           /* 232 + 5 * 92 + 19 (for the scrollbar) */
    --search-config-changes-width: 400px;

    /* Template variables */
    --template-font-family: var(--generic-font);
    --template-content-colour: var(--standard-text-colour);
    --template-background-colour: var(--lightest);
    --template-font-size: var(--standard-text-size);
    --template-font-weight: var(--standard-text-size);
    --template-item-separation: var(--generic-element-gap);
    --template-h1-size: var(--heading-text-size);
    --template-h1-weight: var(--heading-weight);
    --template-h2-size: var(--subheading-text-size);
    --template-h2-weight: var(--subheading-weight);
    --template-h3-size: var(--standard-text-size);
    --template-h3-weight: var(--subheading-weight);
    --template-border-colour: var(--inner-border-colour);
    --template-border-width: var(--inner-border-width);
    --template-select-list-background-colour: var(--variant4);
    
    /* tables */
    --template-table-content-colour: var(--darkest);
    --template-table-heading-weight: var(--subheading-weight);
    --template-table-even-row-colour: var(--lightest);
    --template-table-odd-row-colour: var(--variant4);
    
    /* links */
    --template-link-colour: var(--standard-text-colour);
    --template-link-decoration: underline;
    --template-link-colour-hover: var(--darkest);
    --template-link-decoration-hover: underline;

    /*
        buttons
        note, default button has border colour the same as the button colour
        to apply a border change --template-button-border-width to be x px
    */
    --template-button-colour: var(--root-colour-2);
    --template-button-border-colour: var(--root-colour-2);
    --template-button-border-width: 0;
    --template-button-border-radius: 0;
    --template-button-colour-hover: var(--root-colour-1);
    --template-button-border-colour-hover: var(--root-colour-1);

    /* search config */
    --attribute-name-max-width: 220px;

    /* Secondary browse gadget */
    --browse-secondary-header-bg: var(--variant3);
    --browse-secondary-main-bg: var(--variant4);
    --browse-secondary-object-highlight-bg: var(--variant2);
    --browse-secondary-font-style: italic;

    /* applied filter colours wave-6573 */
    --applied-filter-background-color: rgba(220, 220, 221, 0.6);
    --applied-filter-text-color: rgba(0, 0, 0, 0.6);
    --applied-filter-border-color: rgba(252, 244, 89, 0.4);
    --applied-filter-box-shadow-color: rgba(56, 47, 58, 0.40);

    --disabled-filter-background-color: rgba(255, 214, 214, 0.3);
    --disabled-filter-border-color: rgba(255, 103, 103, 0.1);

    --inverted-filter-background-color: rgba(214, 245, 255, 0.2);
    --inverted-filter-border-color: rgba(80, 217, 255, 0.15);

    /* filters wave-6573 */
    --available-filter-background-color: --lightest;
    --available-filter-heading-background-color: rgba(220, 220, 221, 0.6);

    /* table columns wave-6573 */
    --table-columns-background-color: var(--lightest);
    --table-columns-alt-background-color: var(--lightest);
    --table-row-hover-background: var(--light-shade-blue-gray);
    --table-background-color: var(--lightest);

    /* scrollbar */
    --table-scrollbar-background: var(--light-shade-blue-gray);

    /* table with Disabled Data */
    --table-disabled-row-font-weight: bold;
}