@use 'sortable.scss';

body {
  font-size: 14px;
}

p {
  line-height: 1.7em;
}

code {
  font-family: monospace;
  background: #eee;
  padding: 5px;
  border-radius: 2px;
}

* {
  box-sizing: border-box;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sortable:nth-of-type(4) th:nth-child(7),
thead th.no-sort {
  background: pink !important;
  color: red !important;
}

.sortable:nth-of-type(4) th:nth-child(7) {
  pointer-events: none;
  &::after {
    color: red;
    content: '(also not sortable)';
    font-size: 0.9em;
    display: block;
  }
}

.lefty {
  td:nth-child(2),
  th:nth-child(2) {
    // width: 80px;
    text-align: right;
  }
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  // .sortable {
  //   --stripe-bg: #e4e4e4;
  //   --stripe-color: #000;
  //   --stripe-bg-odd: #fff;
  //   --stripe-color-odd: #111;
  //   --th-bg: #808080;
  //   --th-color: #fff;
  // }

  body {
    background-color: #121212;
    color: #e0e0e0;
  }

  code {
    background: #333;
    color: #e0e0e0;
  }

  .sortable:nth-of-type(4) th:nth-child(7),
  thead th.no-sort {
    background: #444 !important;
    color: #ff6b6b !important;
  }

  .sortable:nth-of-type(4) th:nth-child(7)::after {
    color: #ff6b6b;
  }

  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}