ontime/apps/client/src/features/modals/upload-modal/preview/PreviewTable.module.scss

@use "../../../../theme/_ontimeColours" as *;

.container {
  max-width: 100%;
  max-height: max(300px, 30vh);
  overflow: scroll;
}

.rundownPreview {
  font-size: calc(1rem - 2px);
  overflow-x: scroll;
}

.header,
.body {
  th {
    font-weight: 400;
    height: unset;
    line-height: calc(1rem - 2px);
    white-space: nowrap;
    padding-left: 0.25rem;
    padding-right: 1rem;
  }
}

.header {
  position: sticky;
  top: 0;
  background-color: white;
  box-shadow: 0 2px $gray-50;
  z-index: 3;

  th {
    font-weight: 200;
    text-align: left;
  }

  tr {
    word-wrap: unset;
  }
}

.body {
  td {
    text-align: left;
    vertical-align: top;
    padding: 0 0.5em;
  }

  .center {
    text-align: center;
  }

  .nowrap {
    white-space: nowrap;
  }

  .secondaryRow {
    padding: 0.25em 0.25em;
    background-color: $gray-50;
  }
}

table tr td:first-child,
table tr th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: white;
  box-shadow: 1px 0 $gray-50;
}