@import '~/@refinitiv-ui/halo-theme/src/native-elements/select';
@import '~/@refinitiv-ui/halo-theme/src/native-elements/button';
@import '~/@refinitiv-ui/halo-theme/src/native-elements/textarea';

@import '~/@refinitiv-ui/ds-theme/src/native-elements/a';
@import '~/@refinitiv-ui/ds-theme/src/native-elements/input';

@theme-name: 'elf-theme-ds'; // TODO:: change to ds-theme

:host {
  --grid-header-height                            : @grid-header-height; /// 28 Halo
  --grid-row-height                               : @grid-row-height; /// 28 Halo
  --theme-name                                    : @theme-name;

  // Filter icon color, drag guide + drag box border-color
  // --grid-guideline-color                          : @scheme-color-primary;

  .grid-vscroll, .grid-hscroll {
    // .ie-scrollbars();
    .mozilla-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; // Elemental
    // 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;
  }

  .tr-grid {
    background-color: inherit;
  }

  .tr-grid .title .cell:hover {
    background-color: @grid-header-hover-background-color; // ** missing from ds-theme
  }
  
  // Prevent from unexpected background color overiding
  .tr-grid .column.heat-map .cell.selected-row,
  .tr-grid .column.heat-map .cell.highlighted-row,
  .tr-grid .column.heat-map .cell.selection,
  .tr-grid .column.conditionally-colored .cell.selected-row,
  .tr-grid .column.conditionally-colored .cell.highlighted-row,
  .tr-grid .column.conditionally-colored .cell.selection,
  .tr-grid .title .selected-column .cell,
  .tr-grid .selected-column.heat-map .cell,
  .tr-grid .selected-column.conditionally-colored .cell,
  .tr-lg .cell.selected-row,
  .tr-lg .cell.highlighted-row,
  .tr-lg .selected-column .cell {
    background-image: none;
  }

  // Group header row
  // This feature is implemented for row grouping extension
  // In Solar theme, the color will be based from tr-grid
  .tr-lg .tr-stretched.folder,
  .tr-lg .tr-stretched.header {
    color: @grid-row-text-color;
    background-color: @grid-row-background-color;

    &:not(.closed) {
      color: @grid-expended-row-header-color;
    }
  }

  .tr-lg .selected-column .cell {
    border-top-color: transparent;
  }

  .tr-lg .cell.selected-row,
  .tr-lg .cell.selected-row.tr-stretched,
  .tr-lg .selected-column .cell { // Selected rows have more priority than row-coloring
    background-color: @grid-row-active-background-color; //
  }

  .tr-grid .section .tr-lg .cell.highlighted-row { // Highlighted style has more priority than row-coloring
    background-color: @grid-row-hover-background-color; //
  }

  .tr-grid .sortable-indicator {
    opacity: 0.5;
  }

  .tr-grid .section.title .column.selected-column .cell:last-child {
    border-bottom-color: @grid-column-active-title-border-color; // 13
  }

  // Global 
  --global-focus-bordercolor       : @grid-row-focus-border-color;
  --scrollbar-bgcolor              : @scrollbar-track-background-color; // transparent
  --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;
  
  // Selected column boundary **
  --grid-column-active-border-color: @grid-column-active-border-color; // The value will be invalidColor in core's theme (backward compatible with v3)
  
  // Column collapsing
  // --grid-column-grouped-bgcolor: @color-charcoal; // Column collapsing (expanded) // unused

  // Column pinning
  --grid-column-separator-bgcolor  : @grid-column-separator-background-color;

  // Row
  --grid-row-txtcolor              : @grid-row-text-color;
  --grid-row-bgcolor               : @grid-row-background-color;
  --grid-alt-row-bgcolor           : @grid-row-alternate-background-color;

  // row hovering
  --grid-highlight-txtcolor        : @grid-row-hover-text-color;
  --grid-highlight-bgcolor         : @grid-row-hover-background-color;

  // selected row, cell
  --grid-active-txtcolor           : @grid-row-active-text-color;
  --grid-selection-bgcolor         : @grid-row-active-background-color;

  // Row group header, Filter icon (alway on mode)
  --grid-header-txtcolor           : @grid-header-text-color;

  // Row group header
  --grid-header-bgcolor            : @grid-row-header-background-color;
  
  // Row grouping - Tag
  --grid-tag-bg-color              : @grid-tag-background-color;
  --grid-expanded-tag-bg-color     : @grid-expanded-tag-background-color;
  
  // Cell 
  // Editing
  // .cell.editing input[type=text], .cell.balloon
  --grid-active-bordercolor        : @grid-row-focus-border-color;
  --grid-active-bgcolor            : @grid-input-background-color;
  // .cell.editing input[type=text]
  --input-txtcolor                 : @grid-input-text-color;
  --input-selection-txtcolor       : @grid-input-selection-text-color;
  --input-selection-bgcolor        : @grid-input-selection-background-color;
  
  // Draging UI
  --grid-guideline-bgcolor         : @grid-guideline-background-color ;
  --grid-dragbox-bordercolor       : @grid-drag-box-border-color;
  --grid-dragbox-bgcolor           : @grid-drag-box-background-color;
  --grid-drag-indicator            : dashed 1px @grid-drag-indicator-border-color;

  // Sorting indicator, dragbox border color 
  // .cell.sorting.edge-indicator:before (box-shadow), .sorting.edge-indicator:after (border-top), dragbox border color
  --grid-title-sort-icon-color     : @grid-title-sort-icon-color;

  // Filter icon (always on mode + active), Dragbox guideline
  --grid-title-icon-color          : @grid-title-icon-active-color;
  
  // Filter icon, Stack icon
  --grid-title-filter-icon-color   : @grid-title-icon-color; // primary - 1 
  --grid-title-filter-icon-hover-color: @grid-title-icon-hover-color; //Filter icon normal and alway on mode

  // Filter icon for tiny column
  --grid-title-dot-icon            : @grid-title-dot-icon-color;

  // Row menu icon, Column menu icon
  --grid-column-menu-icon-color        : @grid-menu-icon-color;
  --grid-column-menu-icon-hover-color  : @grid-menu-icon-hover-color ;
  --grid-column-menu-icon-bgcolor      : @grid-menu-icon-background-color;
  --grid-column-menu-icon-hover-bgcolor: @grid-menu-icon-hover-background-color;

  // Row more icon
  --grid-row-menu-icon-color       : @grid-row-more-icon-color;
  --grid-row-menu-icon-hover-color : @grid-row-more-icon-hover-color;
}

.webkit-scrollbars();