.TableSizer {
  @apply border-t py-3;

  table {
    @apply mx-auto mb-7 w-auto border-separate border-spacing-1 [counter-reset:table-row];

    tr {
      @apply [counter-increment:table-row];

      &:has(td.active) {
        &:not(:has(+ tr > td.active)) {
          td.active:not(:has(+ td.active)) {
            &::before {
              @apply absolute bottom-3 left-1/2 right-1/2 flex items-center justify-center text-sm text-gray-500 [content:counter(table-row)_'x'_counter(table-column)];
            }
          }
        }
      }

      &:first-child {
        @apply [counter-reset:table-column];

        td.active {
          @apply [counter-increment:table-column];
        }
      }
    }

    td {
      @apply size-6 rounded-lg border bg-white p-0;

      /* Mobile viewports only show 10x10 grid */
      &:nth-child(n + 11) {
        @apply max-sm:hidden;
      }

      &.active {
        @apply bg-primary-600;
      }
    }
  }
}
