@use 'sass:map';
@use 'sass:math';
@use '~@angular/material' as mat;

@mixin resizable-table-theme($theme) {
  $config: mat.get-color-config($theme);
  $is-dark-theme: map.get($config, is-dark);
  $background: map.get($config, background);
  $foreground: map.get($config, foreground);
  $focusBackground: if($is-dark-theme, map_get(mat.$grey-palette, 800), map_get(mat.$grey-palette, 100));

  .mat-table {
    background: transparent;

    // header cell being resized
    th.mat-header-cell.resizing {
      background-color: $focusBackground;
    }
    th.mat-header-cell {
      background-color: mat.get-color-from-palette($background, background);

      &.resizing {
        border-color: mat.get-color-from-palette($foreground, text);
      }
      &.resizing .drag-handle,
      &:hover .drag-handle {
        background-color: mat.get-color-from-palette($foreground, text);
      }
    }
  }
}