@import "../../../VendorAssetsBundle/Resources/assets/lesshat/3.0.2/lesshat.less";

@bem-path: "../$/bem";
@fonts-path: "../$/fonts";
@local-font-name-prefix: "Web ";

// ===================================
// Style
@--background-color: #fff;


// ===================================
// Layout

// Common
@--border-radius: 5px;
@--popup-base-color: rgba(0, 0, 0, 0.5);

@config-grid--color_main: #696969;
@config-grid--color_panel-background:    mix(@config-grid--color_main, #fff, 10%);
@config-grid--color_panel-label:         mix(@config-grid--color_panel-background, #000, 60%);
@config-grid--color_panel-label-hovered: #000;
@config-grid_collection--color_main: #3182bd;
 @config-grid_recording--color_main:  #31a354;
@config-grid_collection--color_header: mix(@config-grid_collection--color_main, #fff, 40%);
 @config-grid_recording--color_header:  mix(@config-grid_recording--color_main, #fff, 40%);
@config-grid_collection--color_panel-background: mix(@config-grid_collection--color_main, #fff, 10%);
 @config-grid_recording--color_panel-background:  mix(@config-grid_recording--color_main, #fff, 10%);
@config-grid_collection--color_panel-input: mix(@config-grid_collection--color_main, #fff, 20%);
 @config-grid_recording--color_panel-input:  mix(@config-grid_recording--color_main, #fff, 20%);
@config-grid_collection--color_panel-input_modified: mix(@config-grid_collection--color_panel-background, #000, 75%);
 @config-grid_recording--color_panel-input_modified:  mix(@config-grid_recording--color_panel-background, #000, 75%);
@config-grid_collection--color_panel-input_error: mix(@config-grid_collection--color_panel-background, #a00, 75%);
 @config-grid_recording--color_panel-input_error:  mix(@config-grid_recording--color_panel-background, #a00, 75%);
@config-grid_collection--color_panel-label: mix(@config-grid_collection--color_panel-background, #000, 60%);
 @config-grid_recording--color_panel-label:  mix(@config-grid_recording--color_panel-background, #000, 60%);

@config-grid_collection--panel_entity--height: 70px;
 @config-grid_recording--panel_entity--height: 44px;
@config-grid_collection--panel_view--width: 250px;
 @config-grid_recording--panel_view--width: 250px;
 
 
@config-grid_collection--entity-header-height: 42px;
 @config-grid_recording--entity-header-height: 46px;
@config-grid_collection--entity-header-height_adder: 30px;
 @config-grid_recording--entity-header-height_adder: 30px;
@config-grid--entity-header-margin-top: 5px;
@config-grid--view-header-height: 26px;
@config-grid--cells--margin-top: 20px;
@config-grid--cells--margin-left: 20px;
@config-grid--cells--margin-bottom: 50px;
@config-grid--cells--margin-right: 50px;
@config-grid--cells--margin-between_h: 10px;
@config-grid--cells--margin-between_v: 10px;
@config-grid--header-border-size: 5px;
@config-grid--header-fader-width: 10px;
@config-grid--cells--header-padding-top_entity: 8px;
@config-grid--cells--header-padding-top_view: 3px;
@config-grid--cells--header-padding-left: 8px;

@config-grid_collection--panel_entity--left: @config-grid_collection--panel_view--width + @config-grid--cells--margin-left;
 @config-grid_recording--panel_entity--left:  @config-grid_recording--panel_view--width + @config-grid--cells--margin-left;

@config-grid_collection--panel_view--top: @config-grid_collection--panel_entity--height + @config-grid--entity-header-margin-top + @config-grid_collection--entity-header-height + @config-grid--cells--margin-top;
 @config-grid_recording--panel_view--top:  @config-grid_recording--panel_entity--height + @config-grid--entity-header-margin-top +  @config-grid_recording--entity-header-height + @config-grid--cells--margin-top;

@config-grid-panel--command-size: 25px;
@config-grid-panel--command-margin-h_views: 5px;
@config-grid_collection--panel_entity--main-area-margin-top: 12px;
@config-grid_collection--panel_entity--main-area-margin-left: 13px;
@config-grid_recording--panel_entity--main-area-margin-top: 10px;
@config-grid_recording--panel_entity--main-area-margin-left: 13px;
@config-grid-panel_view--main-area-margin-left: 15px;
@config-grid-panel_view--main-area-margin-right: 15px;

@config-grid-panel--input-padding_left: 5px;
@config-grid-panel--input-padding_right: 5px;
@config-grid-panel--input-padding_top: 5px;
@config-grid-panel--input-padding_bottom: 5px;

@help--margin: 20px;
@help--box-shadow: 0px 5px 20px 5px @--popup-base-color;
@help--toc-width: 200px;
@help--toc-hiding-threshold: 500px;

@sample-vis--header-width: 150; 
@sample-vis--header-height: 150;
@sample-vis--col-header-height: 100;
@sample-vis--row-header-height: 20;

@main-menu--background-color: #000;
@main-menu--height: 28px;
@main-menu--logo-width: 300px;
@main-menu--logo-v-offset: -2px; 

@main-menu-bar--item-color_2collections: @config-grid_collection--color_main;
@main-menu-bar--item-color_2recordings:   @config-grid_recording--color_main;
@main-menu-bar--item-color_2collections_active: mix(@main-menu-bar--item-color_2collections, #fff, 60%);
@main-menu-bar--item-color_2recordings_active:  mix(@main-menu-bar--item-color_2recordings,  #fff, 60%);

@mode-changer--width: 30px;

@notifications--bottom-offset: 80px;
@notifications--top-offset: 150px;
@notification--width: 250px;
@notification--closer-width: 20px;

@player--command-size: @config-grid-panel--command-size;
@player--volume-icon-size: @config-grid-panel--command-size;

@z-index_help: 6000;
@z-index_main-menu: 1000;
@z-index_main-region: 10;
@z-index_main-region-cells: 20; // +10 internal
@z-index_flying-circle: 99;
@z-index_main-region-flipper: 100; // +10 internal
@z-index_notifications: 7000;
@z-index_jasmine: 9000;
@z-index_css-update-indicator: 9999;
@z-index_tooltip: 7010;

@import "macros.less";
