@import '~/@refinitiv-ui/halo-theme/src/native-elements/input';
@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/a';
@import '~/@refinitiv-ui/halo-theme/src/native-elements/textarea';

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

@import '../base';

:host {

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

  .tr-grid .title .cell:hover {
    background-color: @grid-header-hover-background-color;
  }
  
  // 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 {
    background-color: @grid-row-background-color;
    color: @grid-row-text-color;

    & when(@variant = dark) {
      &:not(.closed) {
        background-color: @color-black;
        color: @color-white;
      }
      &:hover {
        color: @color-white;
        background-color: @color-cod-grey;
      }
    }
  
    & when(@variant = light) {
      &:hover {
        background-color: @color-alabaster;
      }
    }
  }

  .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;
  }

  & when(@variant = dark) {
    .tr-grid .section.title .column.selected-column .cell:last-child {
      border-bottom-color: @color-torea-bay;
    }

    --grid-column-grouped-bgcolor: @color-charcoal; // Column collapsing (expanded)
    --grid-header-txtcolor: @color-silver;
    --grid-header-bgcolor: @color-lights-out;
    --grid-row-menu-icon-color: @grid-header-text-color;
    --grid-row-menu-icon-hover-color: @color-white;
    --grid-title-icon-color: @color-cornflower-blue;
    --grid-title-icon-hover-color: @color-white;
    --grid-title-filter-icon-color: @color-cornflower-blue;
    --grid-title-filter-icon-hover-color: @color-white;
    --grid-title-dot-icon: @grid-header-text-color;
    --grid-dragbox-bgcolor: @color-mine-shaft;
    --grid-drag-indicator: dashed 1px @color-dusty-grey;
    --grid-column-separator-bgcolor: @color-dusty-grey;
  }

  & when(@variant = light) {
    .tr-grid .section .column.selected-column .cell:first-child {
      border-top-color: @color-silver;
    }

    --grid-column-grouped-bgcolor: @color-alabaster; // Column collapsing (expanded)
    --grid-header-txtcolor: @color-mine-shaft;
    --grid-header-bgcolor: @color-white;
    --grid-row-menu-icon-color: @grid-header-text-color;
    --grid-row-menu-icon-hover-color: @color-blue-ribbon;
    --grid-title-icon-color: @color-blue-ribbon;
    --grid-title-icon-hover-color: @color-refinitiv-blue;
    --grid-title-filter-icon-color: @color-persian-blue;
    --grid-title-filter-icon-hover-color: @color-blue-ribbon;
    --grid-title-dot-icon: @color-grey;
    --grid-dragbox-bgcolor: @color-white;
    --grid-drag-indicator: none;
    --grid-column-separator-bgcolor: @color-silver;
  }

  --grid-tag-bg-color: @color-charcoal;
  --grid-expanded-tag-bg-color: @color-scorpion;
  --grid-column-menu-icon-color: @color-white;
  --grid-column-menu-icon-bgcolor: @color-blue-ribbon;
  --grid-column-menu-icon-hover-bgcolor: @color-refinitiv-blue;
}