import { css } from 'lit'

export default css`
  :host {
    display: block;
    height: 100%;
  }

  :host([overflow]) {
    overflow: auto;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    --md-focus-ring-shape-start-start: 0;
    --md-focus-ring-shape-start-end: 0;
    --md-focus-ring-shape-end-end: 0;
    --md-focus-ring-shape-end-start: 0;

    color: var(--md-sys-color-on-surface-variant);
  }

  th,
  td {
    font-family: var(--md-sys-typescale-label-large-font);
    font-size: var(--md-sys-typescale-label-large-size);
    letter-spacing: var(--md-sys-typescale-label-large-tracking);
    line-height: var(--md-sys-typescale-label-large-height);
    text-align: left;
  }

  th:has(md-focus-ring),
  td:has(md-focus-ring) {
    position: relative;
    outline: none;
  }

  th {
    font-weight: var(--md-sys-typescale-label-large-weight);
  }

  tr {
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
  }

  td:not(.no-padding):not(:first-child):not(:last-child),
  th:not(.no-padding):not(:first-child):not(:last-child) {
    padding: 12px;
  }

  .cell-content {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  :not([data-delegate='true']) > .cell-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  [aria-selected='true'] {
    background-color: var(--md-sys-color-secondary-container);
  }

  .sort-icon {
    --md-icon-size: 16px;
  }

  .primary-cell {
    font-family: var(--md-sys-typescale-title-small-font);
    font-weight: var(--md-sys-typescale-title-small-weight);
    font-size: var(--md-sys-typescale-title-small-size);
    letter-spacing: var(--md-sys-typescale-title-small-tracking);
    line-height: var(--md-sys-typescale-title-small-height);
  }

  .scroll-sentinel {
    display: block;
    width: 100%;
  }

  .empty,
  ::slotted(.empty) {
    font-family: var(--md-sys-typescale-body-medium-font);
    font-weight: var(--md-sys-typescale-body-medium-weight);
    font-size: var(--md-sys-typescale-body-medium-size);
    letter-spacing: var(--md-sys-typescale-body-medium-tracking);
    line-height: var(--md-sys-typescale-body-medium-height);
    text-align: center;

    color: var(--md-sys-color-on-surface);
  }
`
