:host {

	--grid-header-height                            : @grid-header-height;
	--grid-row-height                               : @grid-row-height;
	--grid-guideline-color                          : @scheme-color-primary;
	--theme-name                                    : @theme-name;

	.grid-vscroll, .grid-hscroll {
		.standard-scrollbars();
	}

	// More custom theme that has to be done via css selector
	.cell input,
	.cell textarea,
	.cell select,
	.cell button,
	ef-checkbox,
	input[type=checkbox] {
	  margin: 0;
	}
	select, button, input[type=text] { // Todo: force every thing in cells to have max size not exceed row height.
	  max-height: calc(var(--grid-row-height) - 6px);
	}
	select {
	  width: 100%;
	}
	.cell button {
	  min-width: unset;
	}
  
	.title input[type=search] {
	  width: 100%;
	  background-color: @grid-row-background-color;
	  max-height: calc(var(--grid-row-height) - 6px);
	}
  
	.grid-pane, .cell, .editing, .sorting, .filter-input, .folder {
	  .touch-action();
	}
	.tr-lg .cell {
	  // for ie
	  padding: @grid-cell-padding;
	  // for modern browser
	  padding: var(--grid-cell-padding, @grid-cell-padding);
	}
  
	// Sorted column text color
	.tr-grid .title .sorting,
	.tr-grid .title .sorting:hover,
	.tr-grid .title .cell.sorting:hover {
	  color: @grid-row-active-text-color;
	}
  
	// grid-theme
	
	--global-focus-bordercolor       : @grid-row-focus-border-color;
  
	--scrollbar-bgcolor              : @scrollbar-track-background-color;
  
	--button-txtcolor                : @button-text-color;
	--button-border-color            : @button-border-color;
	--button-bgcolor                 : @button-background-color;
	--button-bgoverlay-1             : transparent;
	--button-bgoverlay-2             : transparent;
	--button-hover-txtcolor          : @button-hover-text-color;
	--button-hover-bgcolor           : @button-hover-background-color;
  
	--input-txtcolor                 : @input-text-color;
	--input-selection-txtcolor       : @global-text-selection-color;
	--input-selection-bgcolor        : @global-text-selection-background;
  
	--grid-bordercolor               : @grid-border-color;
  
	// Column title
	--grid-title-bgcolor             : @grid-header-background-color;
	--grid-title-txtcolor            : @grid-header-text-color;
	--grid-title-hover-txtcolor      : @grid-header-text-color;
	--grid-title-sort-icon-color     : @scheme-color-secondary;
  
	// Row group header
	--grid-header-bgcolor            : @grid-header-background-color;
	--grid-header-txtcolor           : @grid-header-text-color;
	
	// Column collapsing
	--grid-column-grouped-bgcolor    : @grid-header-background-color;
  
	// Intentionally use invalidColor cause we need css to malformat
	// And then no border rendered cause css malformat
	--grid-column-active-border-color: @grid-column-active-border-color; // invalid color
  
	--grid-row-txtcolor              : @grid-row-text-color;
	--grid-row-bgcolor               : @grid-row-background-color;
	--grid-alt-row-bgcolor           : @grid-row-alternate-background-color;
  
	--grid-active-txtcolor           : @grid-row-active-text-color;
	--grid-active-bordercolor        : @grid-row-focus-border-color;
	--grid-active-bgcolor            : @input-background-color;
  
	--grid-highlight-txtcolor        : @grid-row-hover-text-color;
	--grid-highlight-bgcolor         : @grid-row-hover-background-color;
  
	--grid-selection-bgcolor         : @grid-row-active-background-color;
  
	--grid-guideline-bgcolor         : @scheme-color-primary;
	--grid-dragbox-bordercolor       : @control-border-color;
	--grid-column-separator-bgcolor  : @grid-border-color;
  
  
	// cgrid-theme
  
	--global-txtcolor                : @grid-row-text-color;
	--global-hover-txtcolor          : @grid-row-hover-text-color;
	--global-active-txtcolor         : @grid-row-active-text-color;
	--global-bordercolor             : @grid-border-color;
  
	--field-bgcolor-a                : @grid-row-background-color;
	--field-txtcolor-a               : @grid-row-text-color;
  
	// Popup
	--popup-boxshadow                : 0 0 10px fade(@dataviz-color-black, 50%);
	--popup-overlay-modal-bgcolor    : fade(@dataviz-color-black, 50%);
  
	// List
	--list-item-separator-bordercolor: @separator-color;
	--list-item-hover-bgcolor        : @grid-row-hover-background-color;
	--list-matched-txtcolor          : @scheme-color-primary;
  
	// Pager UI
	--pager-ui-bgcolor               : @grid-header-background-color;
  
	// Loading mask
	--loading-mask-color             : @overlay-background-color;
}
  
.webkit-scrollbars();