@layer components {
  .table-scroller {
    overflow-x: auto;
  }

  table.queue {
    inline-size: 100%;
    border-collapse: collapse;

    & th {
      text-align: start;
      font-size: var(--text-x-small);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--color-muted);
      border-block-end: 1px solid var(--color-rule);
      padding-block: 0.4rem;
      padding-inline: var(--block-space-half);
    }

    & td {
      padding: var(--block-space-half);
      border-block-end: 1px solid var(--color-rule);
      vertical-align: top;
    }

    & tbody tr {
      transition: background-color 120ms;

      &:hover {
        background: var(--color-shade);
      }
    }

    & .num {
      text-align: end;
      font-variant-numeric: tabular-nums;
    }
  }
}