/* TODO: Not currently used */
@media screen and (max-width: 480px) {
  .table-scroller {
    overflow-inline: auto;
    inline-size: 320px;
  }
}

table {
  border: 1px solid $dark;
  margin: auto;

  & thead {
    background-color: #808080;
    color: $light;
    z-index: 1;
    position: sticky;
    vertical-align: middle;
    inset-block-start: 0;
    max-block-size: 1.8em;

    & th {
      font-weight: bold;
      text-align: start;
      padding: 1em;
      font-size: 1.4em;
      border: 1px solid $dark;
    }
  }

  & tbody {
    & tr {
      &:nth-child(2n) {
        background-color: #DDDDD0;
      }

      & td {
        padding: 0.5em 1em;
        border: 1px solid $dark;
      }
    }

  }
}