@use 'sass:map';
@use './../utils/tokens.scss' as tokens;
@use './dataTable.vars.scss' as dataTableVars;

@import '@viasat/beam-tokens/components/DataTable';

$dataTableBaseClass: dataTableVars.$dataTableBaseClass;

$dataTableDensity: (
  'sm': (
    'cell-height': tokens.$bm-comp-data-table-size-cell-sm-height,
    'cell-y': tokens.$bm-comp-data-table-space-cell-sm-y,
  ),
  'md': (
    'cell-height': tokens.$bm-comp-data-table-size-cell-md-height,
    'cell-y': tokens.$bm-comp-data-table-space-cell-md-y,
  ),
  'lg': (
    'cell-height': tokens.$bm-comp-data-table-size-cell-lg-height,
    'cell-y': tokens.$bm-comp-data-table-space-cell-lg-y,
  ),
);

.#{$dataTableBaseClass}-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: tokens.$bm-comp-data-table-color-bg;

  &--bordered {
    border: tokens.$bm-sem-border-width-md solid
      tokens.$bm-comp-data-table-color-border;
  }

  &--rounded {
    border-radius: tokens.$bm-comp-data-table-radius;

    // Clips child content to the rounded corners. Overlay sub-components (dropdowns,
    // column menus, popovers) that need to exceed the container bounds must use a
    // React portal instead.
    overflow: hidden;
  }

  .#{$dataTableBaseClass}__toolbar {
    color: tokens.$bm-comp-data-table-color-header-body;
    text-align: start;
    padding-inline: tokens.$bm-comp-data-table-space-x;
    padding-block: tokens.$bm-comp-data-table-space-header-md-y;
  }
}

.#{$dataTableBaseClass} {
  width: 100%;
  border-collapse: collapse;
  color: tokens.$bm-comp-data-table-color-cell-text;

  &__header {
    color: tokens.$bm-comp-data-table-color-header-heading;
    font: tokens.$bm-comp-data-table-typo-col-header;
    text-align: start;
    padding-inline: tokens.$bm-comp-data-table-space-x;
    padding-block: tokens.$bm-comp-data-table-space-header-md-y;
  }

  &__head {
    background: tokens.$bm-comp-data-table-color-col-header-bg;
  }

  &__column-header {
    background: tokens.$bm-comp-data-table-color-col-header-bg;
    color: tokens.$bm-comp-data-table-color-col-header-text;
    font: tokens.$bm-comp-data-table-typo-col-header;
    text-align: start;
    // Deliberate: header labels stay single-line (EPTOOLS-2190 AC); header
    // truncation is a Phase 2 concern.
    white-space: nowrap;

    &--align-end {
      text-align: end;
    }
  }

  &__body {
    background: tokens.$bm-comp-data-table-color-bg;
  }

  // Body scoping keeps grouped header rows plain while rows opt into striping.
  &__body &__row--striped {
    background-color: tokens.$bm-comp-data-table-color-zebra;
  }

  // Opt-in hover layers over the base or zebra fill, scoped to this table's rows.
  &--row-hover > &__body > &__row:hover {
    background-image: linear-gradient(
      tokens.$bm-sem-color-state-layer-hover,
      tokens.$bm-sem-color-state-layer-hover
    );
  }

  &__cell {
    font: tokens.$bm-comp-data-table-typo-cell;
    color: tokens.$bm-comp-data-table-color-cell-text;
    border-bottom: tokens.$bm-sem-border-width-md solid
      tokens.$bm-comp-data-table-color-border;

    &--align-end {
      text-align: end;
    }
  }

  &__footer {
    color: tokens.$bm-comp-data-table-color-cell-text;
    padding-inline: tokens.$bm-comp-data-table-space-x;
    padding-block: tokens.$bm-comp-data-table-space-footer-md-y;
  }
}

// Density modifiers (sm / md / lg)
@each $density, $props in $dataTableDensity {
  .#{$dataTableBaseClass}--#{$density} {
    .#{$dataTableBaseClass}__cell,
    .#{$dataTableBaseClass}__column-header {
      height: map.get($props, 'cell-height');
      padding-block: map.get($props, 'cell-y');
      padding-inline: tokens.$bm-comp-data-table-space-x;
    }
  }
}