@reference 'tailwindcss';

:host {
  --emr-data-view-row-bg: var(--color-background);
  --emr-data-view-hl-header-row-bg: var(--color-surface-container);
  --emr-data-view-hl-header-margin: calc(var(--spacing) * 1) 0;
  --emr-data-view-sticky-header-top: 0;
  --emr-data-view-selected-border-color: var(--color-primary);
  --emr-data-view-row-hover-bg: var(--color-surface-bright);
  --emr-data-view-bg: transparent;
  --mat-table-row-item-outline-width: 0;
  --mat-table-background-color: var(--emr-data-view-bg);
  --emr-content-fade-color: var(--emr-data-view-row-bg);
  --emr-data-view-header-bg: var(--color-background);

  display: flex;
  flex-direction: column;
  height: 100%;

  mat-table {
    height: 100%;
    padding-bottom: calc(var(--spacing) * 3);
  }

  ::ng-deep {
    emr-block-state {
      --emr-block-state-padding: 0;
    }

    .mat-mdc-header-row {
      background: var(--emr-data-view-header-bg);
    }
  }

  .mat-mdc-cell {
    background: var(--emr-data-view-row-bg);

    &.cell-action-bar {
      background: linear-gradient(to left, var(--emr-data-view-row-bg) 90%, transparent);
    }
  }

  .emr-skeleton-block {
    z-index: 1;
  }

  .mdc-data-table__cell.mat-column-selection:first-child,
  .mdc-data-table__header-cell.mat-column-selection:first-child {
    max-width: calc(var(--spacing) * 16);
    padding: 0;
    justify-content: center;
  }

  .mat-mdc-header-cell {
    text-transform: uppercase;
    font-size: var(--text-xs);
    overflow: hidden;
  }

  .mat-mdc-row.mdc-data-table__row {
    border: 1px solid var(--color-border) !important;
    border-radius: theme(--radius-xl);
    overflow: hidden;
    height: calc(var(--spacing) * 16);

    & + .mdc-data-table__row {
      margin-top: calc(var(--spacing) * 4);
    }
  }

  .mdc-data-table__row {
    position: relative;

    &.is-selected {
      border-color: var(--emr-data-view-selected-border-color) !important;
    }
  }

  &.hover-rows {
    .data-view-row {
      &:hover {
        .mat-mdc-cell {
          --emr-data-view-row-bg: var(--emr-data-view-row-hover-bg);
        }
      }
    }
  }

  .data-view-row {
    &:hover {
      .cell-action-bar {
        opacity: 100%;
        z-index: 1;
      }
    }
  }

  &.is-loading {
    .data-view-row {
      .cell-action-bar {
        display: none;
      }
    }
  }

  ::ng-deep {
    .header-cell,
    .cell {
      min-width: var(--emr-data-view-cell-width, auto);
      max-width: var(--emr-data-view-cell-width, auto);
    }

    .cell {
      padding-top: calc(var(--spacing) * 2);
      padding-bottom: calc(var(--spacing) * 2);
    }

    .header-cell-action-bar,
    .cell-action-bar {
      position: absolute;
      top: 0;
      bottom: 0;
      inset-inline-end: 0;
      padding: 0;

      &:not(:has(.force-visible)) {
        opacity: 0;
        z-index: -50;
      }
    }
  }

  .mat-mdc-table {
    .mat-mdc-header-cell {
      color: var(--sys-on-surface);
    }
  }

  &.highlight-header {
    ::ng-deep {
      .mat-mdc-header-row {
        position: relative;
        margin: var(--emr-data-view-hl-header-margin);

        &::before {
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          background: var(--emr-data-view-hl-header-row-bg);
          height: calc(var(--spacing) * 10);
          border-radius: theme(--radius-lg);
          z-index: 0;
        }
      }

      .mdc-data-table__header-cell {
        --emr-skeleton-from-bg: var(--color-neutral-300); // theme('colors.neutral.300/60');
        --emr-skeleton-to-bg: var(--color-neutral-400); // theme('colors.neutral.400/50');
      }

      .mat-mdc-table .mat-mdc-header-cell {
        background: transparent;
        color: var(--text-neutral-700);
      }
    }
  }

  ::ng-deep {
    .mat-sort-header {
      z-index: 1;
      position: relative;
    }

    .mat-sort-header-stem {
      width: 1px;
    }

    .mat-sort-header-pointer-left,
    .mat-sort-header-pointer-right {
      height: 1px;
    }

    .mat-sort-header-pointer-middle {
      width: 1px;
      height: 1px;
    }
  }

  &[data-view-variant="table"] {
    --emr-data-view-hl-header-margin: 0;

    .mat-mdc-header-row {
      &::before {
        height: calc(var(--spacing) * 12);
      }
    }

    .mat-mdc-row.mdc-data-table__row {
      border: none !important;
      border-top: 1px solid var(--color-border) !important;
      height: auto;
      border-radius: 0;

      & + .mdc-data-table__row {
        margin-top: 0;
      }
    }

    &.highlight-header {
      .mat-mdc-row.mdc-data-table__row {
        &:first-of-type {
          border-top: none !important;
        }
      }
    }
  }
}

:host-context(html.dark) {
  --emr-data-view-row-hover-bg: var(--color-surface-container-low);

  ::ng-deep {
    .mdc-data-table__header-cell {
      --emr-skeleton-from-bg: var(--color-neutral-700); // theme('colors.neutral.700/60');
      --emr-skeleton-to-bg: var(--color-neutral-800); // theme('colors.neutral.800/50');
    }

    .mat-mdc-table {
      .mat-mdc-header-cell {
        color: var(--text-neutral-400);
      }
    }
  }
}
